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+
  • Kalam CLI

Quick start

From the example folder:

BASH
cd examples/chat-with-ainpm installkalam dev

kalam dev starts the local server, applies kalam/schema.sql, regenerates src/schema.generated.ts, and runs both the browser app and agent worker from [dev.processes].

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
kalam.tomlkalam dev project config
kalam/schema.sqlUSER table, STREAM table, topic route, seed data
kalam/migrations/0001_init.sqlInitial migration

Credentials

kalam dev uses the local development account:

  • user: root
  • password: kalamdb123

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

Troubleshooting

Server health check

BASH
curl http://127.0.0.1:2900/health

Agent running but no reply

Reset local state and reapply the migration:

BASH
kalam db resetkalam dev

Next steps

Last updated on
Realtime Ops FeedReact AI Chat