MCP.directory

deploy

by GitHamza0206
0
0
Source

Deploy the Simba chat widget to a client website. Use when embedding the widget, connecting to Simba cloud or local, and configuring appearance.

Install

mkdir -p .claude/skills/deploy && curl -L -o skill.zip "https://mcp.directory/api/skills/download/5969" && unzip -o skill.zip -d .claude/skills/deploy && rm skill.zip

Installs to .claude/skills/deploy

About this skill

Deploy Simba Chat Widget

npm: https://www.npmjs.com/package/simba-chat

Before You Start

Required: You need an Organization ID to use the widget. Fetch available organizations:

curl -s http://localhost:8000/api/v1/organizations | jq

If organizations are found, ask the user which one to use for the widget. If no organizations exist or the API is not running, instruct them to:

  1. Start the Simba API server (make server)
  2. Create an organization in the Simba dashboard

1-Minute Setup

npm install simba-chat

import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';

// Add anywhere in your app
<SimbaChatBubble
  apiUrl="http://localhost:8000"      // Your Simba API
  organizationId="your-org-id"        // Required: Your organization ID
/>

Done! The chat widget appears in the bottom-right corner (default).

Configuration

PropTypeDefaultDescription
apiUrlstringRequiredSimba API URL
organizationIdstringRequiredYour organization ID
position"bottom-left" | "bottom-right""bottom-right"Widget position
collectionstring"default"Knowledge base collection
defaultOpenbooleanfalseStart with chat open
placeholderstring"Type a message..."Input placeholder
apiKeystring-For authenticated requests

Framework Examples

Next.js

// app/layout.tsx
import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SimbaChatBubble
          apiUrl="http://localhost:8000"
          organizationId="your-org-id"
        />
      </body>
    </html>
  );
}

React (Vite/CRA)

// main.tsx or App.tsx
import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';

function App() {
  return (
    <>
      <YourApp />
      <SimbaChatBubble
        apiUrl="http://localhost:8000"
        organizationId="your-org-id"
      />
    </>
  );
}

Plain HTML (No Build Step)

<script type="module">
  import { SimbaChatBubble } from 'https://esm.sh/simba-chat@0.1.0';
  import { createRoot } from 'https://esm.sh/react-dom@19/client';
  import { createElement } from 'https://esm.sh/react@19';

  const root = document.createElement('div');
  document.body.appendChild(root);

  createRoot(root).render(
    createElement(SimbaChatBubble, {
      apiUrl: 'http://localhost:8000',
      organizationId: 'your-org-id'
    })
  );
</script>
<link rel="stylesheet" href="https://esm.sh/simba-chat@0.1.0/styles.css">

Theming

Match your brand with CSS variables:

:root {
  --simba-primary: #2563eb;           /* Button/accent color */
  --simba-primary-foreground: #fff;   /* Text on buttons */
  --simba-background: #ffffff;        /* Chat background */
  --simba-foreground: #0f172a;        /* Text color */
  --simba-muted: #f1f5f9;             /* Secondary background */
  --simba-border: #e2e8f0;            /* Border color */
  --simba-radius: 0.5rem;             /* Corner radius */
}

Dark Mode

.dark {
  --simba-primary: #3b82f6;
  --simba-background: #1e293b;
  --simba-foreground: #f8fafc;
  --simba-muted: #334155;
  --simba-border: #475569;
}

Inline Chat (Embedded)

For embedding in a page section instead of floating:

import { SimbaChat } from 'simba-chat';
import 'simba-chat/styles.css';

<div style={{ height: '500px' }}>
  <SimbaChat
    apiUrl="http://localhost:8000"
    organizationId="your-org-id"
    placeholder="Ask a question..."
  />
</div>

Custom UI with Hook

Build your own chat interface:

import { useSimbaChat } from 'simba-chat';

function CustomChat() {
  const { messages, status, sendMessage, stop } = useSimbaChat({
    apiUrl: 'http://localhost:8000',
    organizationId: 'your-org-id',
  });

  return (
    <div>
      {messages.map((msg) => (
        <div key={msg.id}>{msg.role}: {msg.content}</div>
      ))}
      <input onKeyDown={(e) => {
        if (e.key === 'Enter') sendMessage(e.target.value);
      }} />
      {status === 'streaming' && <button onClick={stop}>Stop</button>}
    </div>
  );
}

Environment Variables

# .env.local
NEXT_PUBLIC_SIMBA_API_URL=http://localhost:8000

# .env.production
NEXT_PUBLIC_SIMBA_API_URL=https://api.simba.example.com

Troubleshooting

IssueSolution
Widget not showingCheck simba-chat/styles.css is imported
CORS errorsAdd client domain to Simba API CORS config
No responsesVerify apiUrl and collection are correct

Quick Checklist

  • npm install simba-chat
  • Import component and styles
  • Set apiUrl to your Simba API
  • Set organizationId (required - get from curl http://localhost:8000/api/v1/organizations)
  • Optionally set position="bottom-left" (default is bottom-right)
  • Customize colors with CSS variables
  • Test on mobile

More by GitHamza0206

View all skills by GitHamza0206 →

customer-service-expert

GitHamza0206

Expert guidance for improving customer service assistants. Use when optimizing UX, response time, tone, wording, conversation flow, or evaluating customer service quality.

00

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

643969

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

591705

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

318398

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

339397

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

451339

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

304231

Related MCP Servers

Browse all servers
Solana Agent KitSolana Agent Kit

Solana Agent Kit: Easily deploy tokens, mint NFTs, and manage DeFi & cross-chain tasks with Solana integration in chat i

1,6220 tools
SalesforceSalesforce

Unlock seamless Salesforce org management with the secure, flexible Salesforce DX MCP Server. Streamline workflows and b

3040 tools
Browser UseBrowser Use

Enable AI web browsing in your MCP client — simple command to add browser integration for chatbots using your LLM with n

800 tools
Perplexity AdvancedPerplexity Advanced

Perplexity Advanced: Dockerized Perplexity CLI and API client — AI chatbot CLI to query Perplexity & OpenRouter, attach

460 tools
NetlifyNetlify

Effortlessly manage Netlify projects with AI using the Netlify MCP Server—automate deployment, sites, and more via natur

389 tools
Llama.cpp BridgeLlama.cpp Bridge

Llama.cpp Bridge connects local llama-server instances to MCP clients, enabling chat, health checks, and flexible llama.

80 tools

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.