# Deploy
> Deploy the Simba chat widget to a client website. Use when embedding the widget, connecting to Simba cloud or local, and configuring appearance.
- Skill: `githamza0206/deploy` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add githamza0206/deploy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/githamza0206/deploy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: DevOps & Infra
- Author: githamza0206 (https://skillmd.com/u/githamza0206)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/githamza0206/deploy
---
# 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:
```bash
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
```bash
npm install simba-chat
```
```tsx
import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';
// Add anywhere in your app
```
Done! The chat widget appears in the bottom-right corner (default).
## Configuration
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `apiUrl` | `string` | **Required** | Simba API URL |
| `organizationId` | `string` | **Required** | Your organization ID |
| `position` | `"bottom-left" \| "bottom-right"` | `"bottom-right"` | Widget position |
| `collection` | `string` | `"default"` | Knowledge base collection |
| `defaultOpen` | `boolean` | `false` | Start with chat open |
| `placeholder` | `string` | `"Type a message..."` | Input placeholder |
| `apiKey` | `string` | - | For authenticated requests |
## Framework Examples
### Next.js
```tsx
// app/layout.tsx
import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
### React (Vite/CRA)
```tsx
// main.tsx or App.tsx
import { SimbaChatBubble } from 'simba-chat';
import 'simba-chat/styles.css';
function App() {
return (
<>
);
}
```
### Plain HTML (No Build Step)
```html
```
## Theming
Match your brand with CSS variables:
```css
: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
```css
.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:
```tsx
import { SimbaChat } from 'simba-chat';
import 'simba-chat/styles.css';
```
## Custom UI with Hook
Build your own chat interface:
```tsx
import { useSimbaChat } from 'simba-chat';
function CustomChat() {
const { messages, status, sendMessage, stop } = useSimbaChat({
apiUrl: 'http://localhost:8000',
organizationId: 'your-org-id',
});
return (
);
}
```
## Environment Variables
```bash
# .env.local
NEXT_PUBLIC_SIMBA_API_URL=http://localhost:8000
# .env.production
NEXT_PUBLIC_SIMBA_API_URL=https://api.simba.example.com
```
## Troubleshooting
| Issue | Solution |
|-------|----------|
| Widget not showing | Check `simba-chat/styles.css` is imported |
| CORS errors | Add client domain to Simba API CORS config |
| No responses | Verify `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