Skip to Content
React AI Chat

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)
  • kalam.toml project with kalam/schema.sql, migrations, and supervised kalam dev processes

Prerequisites

  • Node.js 18+
  • Kalam CLI v0.5.3-rc.1 or newer (kalam self-update or build from source)

Quick start

BASH
cd examples/react-ai-chatnpm installkalam dev

Open the Vite URL, usually http://127.0.0.1:5176.

kalam dev starts the local KalamDB server, applies migrations, regenerates TypeScript schema types, and runs both configured processes:

TOML
[dev.processes]app = "npm run dev"agent = "npm run agent"

Default local credentials are root / kalamdb123 at http://127.0.0.1:2900, matching kalam/server/server.toml.

Access the running server (while kalam dev is up):

  • Admin UI: http://localhost:2900/ui  — log in as root / kalamdb123
  • CLI: kalam --url http://127.0.0.1:2900 --user root --password kalamdb123

Override credentials for app processes with KALAM_* / VITE_KALAM_* env vars (see below).

ProcessEnvironment variables
AgentKALAM_URL, KALAM_USER, KALAM_PASSWORD
Browser (Vite)VITE_KALAM_URL, VITE_KALAM_USER, VITE_KALAM_PASSWORD

Start fresh

Stop kalam dev, then:

BASH
kalam db resetkalam dev

This removes kalam/server/data and kalam/server/logs so the next dev session starts with an empty database. Migration files and server.toml are kept.

What to try

Send a message like:

TEXT
customer refund needs approval

The agent creates approval rows, streams typing tokens, and continues after you approve or reject.

Browser-only demo mode: set VITE_KALAM_DEMO_MODE=true in .env.local and run npm run dev without kalam dev.

Files worth reading

FilePurpose
kalam.tomlkalam dev config: schema path, codegen, dev processes
kalam/schema.sqlNamespace, tables, topics, and seed data
src/app/App.tsxKalamProvider and LiveQueries orchestration
src/app/components/Conversation.tsxMessage list and composer layout
src/agent/index.tsDeterministic topic-agent worker

Verify it works

BASH
npm run buildnpm test

With kalam dev running in another terminal:

BASH
npm run test:e2e

Next steps

Last updated on
Chat With AISummarizer Agent