Realtime Kanban — AI-native UI updates with Vovk.ts

Realtime UI is a streaming-first architecture for Next.js that keeps the UI in perfect sync with the back-end using only JSON Lines and Vovk.ts. This series walks through Realtime Kanban — the reference app that implements it — showing how users, bots, AI agents, and MCP clients can all update the board in real time with almost zero extra code.

AI-friendly context for all articles in this series is available here.

📘Realtime UI Overview ▶️Run Locally with Docker Compose 🚀Deploy to Vercel 🧩State Normalization with Zustand ⚡Fetching and Normalizing the Data 🗃️Database Setup with Prisma and Zod Generator 🔗API Endpoints 🧠Vector Search via Embeddings 🔄Database Polling with Redis 🔐Basic Authentication and Authorization (Password Protection)🤖Text AI Chat Integration with AI SDK and AI Elements 🎙️OpenAI Realtime API with WebRTC 🔌MCP Server with mcp-handler 📨Telegram Bot with OpenAPI Mixins

See it in action

AI agent managing the board via MCP

Claude connects to the Kanban board through an MCP server and creates, moves, and deletes cards autonomously.

Multi-user collaboration with live polling

Multiple users edit the same board simultaneously — changes propagate in real time through database polling and normalized state.

Chat-driven board updates with function calling

A built-in text chat interface lets users manage cards through natural language, powered by OpenAI function calling.