Realtime Kanban Overview

This series walks through Realtime Kanban, a full-stack example app. It shows one way to keep a Next.js UI up to date with Vovk.ts. The app works like a normal web app. It is also built so that AI agents (by text or voice) and MCP clients can operate it, including navigation and workflow automation. The frontend and backend code stay short.

The app is small on purpose, so you can reproduce, study, and adapt it: only Users and Tasks, and a simple password instead of full auth management.

Building blocks:

• Entity-driven state normalization (frontend) with Zustand : an entity registry parses backend responses and updates a normalized store. Components read entities by ID and re-render with little wiring.
• Database schema as the source of truth: Postgres and Prisma define the structure, and prisma-zod-generator  turns it into Zod schemas. The same schemas validate procedure inputs on the backend, so nothing is defined twice.
• Database polling events through Redis, served as JSON Lines streaming endpoints: changes from users, MCP clients, or bots reach the UI without a manual refresh.
• Text AI chat with the Vercel AI SDK  and AI Elements : the existing controllers become AI tools, and the results go back through the entity registry.
• Voice interface with the OpenAI Realtime API  and WebRTC: the agent makes authorized HTTP requests through the generated RPC modules, and the responses update the UI through the same entity registry. Client-side tools handle navigation inside the app.
• MCP server: procedures run locally on the backend and trigger polling events, which update the frontend state through the entity registry.
• External updates (Telegram bot): manage tasks by text or voice in Telegram. The same app is controlled from more than one place.

You can run the app locally with Docker Compose or deploy it to any Node.js platform, such as Vercel.