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+
- KalamDB running on
http://127.0.0.1:2900
Quick start
Open http://127.0.0.1:5173.
The setup script creates:
- namespace
demo - user table
demo.activity_feed - local user
demo-user/demo123 .env.localwith browser credentials
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 |
activity-feed.sql | Schema used by the app |
setup.mjs | Creates namespace, table, user, and .env.local |
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
Re-run npm run setup to regenerate .env.local, then restart the dev server.
Next steps
- Chat With AI — add a topic worker and agent replies
- TypeScript SDK setup
Last updated on