Realtime Ops Feed
The smallest useful browser example for the TypeScript SDK — one React component, no wrapper layers.
Source: examples/simple-typescript/
What it does
- Reads rows with
queryAll() - Subscribes to live updates with
live() - Authenticates in the browser with
Auth.basic()and the SDK’s built-in JWT exchange
Open the app in two browser tabs, add an event in one tab, and the second tab updates immediately.
Prerequisites
- Node.js 18+
- Kalam CLI
Quick start
Open http://127.0.0.1:5173.
kalam dev starts the local server, applies kalam/schema.sql, keeps kalam/migrations/ current, regenerates TypeScript schema artifacts, and runs the Vite app.
Default local credentials are root / kalamdb123.
What to try
- Open the app in two tabs side by side.
- Submit a new event in one tab.
- Watch the same row appear in the other tab without refreshing.
Files worth reading
| File | Purpose |
|---|---|
src/App.tsx | Complete example — query, live subscription, and form submit |
kalam.toml | kalam dev project config |
kalam/schema.sql | Namespace, table, and seed rows |
kalam/migrations/0001_init.sql | Initial migration |
Verify it works
The Playwright test opens two pages, submits an event, and confirms both tabs show the same live row.
Troubleshooting
Cannot connect to KalamDB
Missing credentials
Use the local defaults from kalam dev: root / kalamdb123, or copy .env.example to .env.local and adjust it.
Next steps
- Chat With AI — add a topic worker and agent replies
- TypeScript SDK setup
Last updated on