Skip to Content
Chat With AI

Chat With AI

A small Vite + React example for the ask-message flow: user sends a message, an agent worker replies, and every open tab sees updates live.

Source: examples/chat-with-ai/

There is no external AI API call — the agent returns a deterministic demo reply so you can run everything locally without API keys.

What it does

  • The browser writes a user message into chat_demo.messages with the ORM
  • chat_demo.ai_inbox receives those inserts as a topic
  • src/agent.ts runs runConsumer() from @kalamdb/consumer
  • The agent writes progress rows into chat_demo.agent_events
  • The agent commits one assistant reply back into chat_demo.messages
  • Every open browser tab sees the rows through live subscriptions

Prerequisites

  • Node.js 18+
  • KalamDB on port 2900

Quick start

Start KalamDB (Docker example):

BASH
docker run -d --name kalamdb -p 2900:2900 \  -e KALAMDB_SERVER_HOST=0.0.0.0 \  -e KALAMDB_ROOT_PASSWORD=kalamdb123 \  -e KALAMDB_JWT_SECRET=local-dev-secret-please-change-32chars \  -v kalamdb_data:/data jamals86/kalamdb:latest

From the example folder:

BASH
cd examples/chat-with-ainpm installnpm run setup

Run the agent worker in one terminal:

BASH
npm run agent

Run the browser app in another terminal:

BASH
npm run dev

Open the Vite URL (usually http://127.0.0.1:5173).

What to try

Type a short message such as:

TEXT
latency spike after deploy

You should see your user row, live agent progress, and then a final AI reply: row. Open a second browser tab to confirm live updates arrive there too.

The write path (browser)

TS
await db.insert(chatMessages).values({    room: ROOM,    role: 'user',    author: CHAT_USERNAME,    sender_username: CHAT_USERNAME,    content,});

The agent path (worker)

TS
await runConsumer<ChatDemoMessages>({    client,    name: 'chat-ai-agent',    topic: 'chat_demo.ai_inbox',    groupId: 'chat-ai-agent',    onChange: async (_ctx, change) => {        const row = change.data;        if (row.role !== 'user') return;        // Build and persist the assistant reply here.    },});

Setup creates the topic route:

SQL
CREATE TOPIC chat_demo.ai_inbox;ALTER TOPIC chat_demo.ai_inbox ADD SOURCE chat_demo.messages ON INSERT;

Files worth reading

FilePurpose
src/App.tsxBrowser client, ORM insert, live subscriptions
src/schema.generated.tsGenerated table definitions and row types
src/agent.tsTopic consumer and reply worker
chat-app.sqlUSER table, STREAM table, namespace setup
setup.mjsLocal bootstrap using the kalam CLI

Credentials

npm run setup creates or reuses:

  • user: admin
  • password: kalamdb123

Both the browser and worker use this account for the local demo.

Troubleshooting

Setup cannot reach KalamDB

BASH
curl http://127.0.0.1:2900/health

Agent running but no reply

Re-run setup so the topic route exists:

BASH
npm run setup

Next steps

Last updated on
Realtime Ops FeedReact AI Chat