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

Realtime Kanban is an example app that keeps a Next.js UI in sync with the back end and layers in a grab-bag of AI features — an MCP server, OpenAI function calling, a voice interface, embeddings, and a Telegram bot. This series walks through how it’s built, showing how users, bots, AI agents, and MCP clients can all update the same board in real time with very little extra code. It’s a worked example to learn from and copy, not a framework or a prescribed architecture — take the parts you need.

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

📘Realtime Kanban Overview ▶️Run Locally with Docker Compose 🚀Deploy to Vercel 🧩State Normalization with Zustand 🗃️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.