React AI Chat
A chat-application validation surface for @kalamdb/react. Browser code lives in src/app, the topic worker in src/agent.
Source: examples/react-ai-chat/
What it does
- Multi-conversation chat UI with live message lists
- WebSocket-confirmed sends and streamed typing tokens
- File attachments and human approval actions
- Deterministic topic-agent worker (no external AI API required)
Prerequisites
- Node.js 18+
- KalamDB on port 2900
Quick start
Open the Vite URL, usually http://127.0.0.1:5176.
npm run setup clears example topics if they exist, imports chat-app.sql, seeds a default conversation, and writes .env.local.
For custom credentials, set KALAMDB_URL, KALAMDB_USER, and KALAMDB_PASSWORD before running setup.
What to try
Send a message like:
The agent creates approval rows, streams typing tokens, and continues after you approve or reject.
Browser-only demo mode: skip npm run setup and set VITE_KALAMDB_DEMO_MODE=true in .env.local.
Files worth reading
| File | Purpose |
|---|---|
src/app/App.tsx | KalamProvider and LiveQueries orchestration |
src/app/components/Conversation.tsx | Message list and composer layout |
src/app/components/ChatComposer.tsx | Attach-file and enter-to-send composer |
src/agent/index.ts | Deterministic topic-agent worker |
chat-app.sql | Namespace, tables, topics, and seed data |
Verify it works
Next steps
- Chat With AI — smaller ask/reply example without
@kalamdb/react - TypeScript SDK setup
Last updated on