使用 KendoReact 和 MCP-UI 打破 LLM 聊天機器人的文字障礙

This is a submission for the KendoReact Free Components Challenge.

What I Built

Large Language Model (LLM) chatbots are powerful, but most of them are still limited to text-only answers. When users ask for complex data, the model ends up dumping plain text instead of showing something truly usable.

For this challenge, I built a system that breaks this limitation by combining:

KendoReact components for polished, interactive UI.
Supabase as the database backend.
MCP-UI (Model Context Protocol UI) as the glue between the chatbot and UI components.

The result is a chatbot that doesn’t just reply with words — it can render live KendoReact Grids and Cards directly in the conversation, powered by real Supabase queries.

Here’s how it works:

On the server side, I created an MCP-UI server using @mcp-ui/server. It exposes two tools:
- show_grid: queries tables (tasks, projects, users, user_task) with filters and joins, and returns a KendoReact Grid.
- show_user_details: fetches a user profile plus task counts (todo, in_progress, done), and returns a KendoReact Card.
On the client side, I built a chatbot UI using KendoReact components and @mcp-ui/client. This chatbot can receive UIResource messages from the server and render them inside the conversation.

Why not just build a custom UI directly? Because MCP-UI makes the components portable. Any MCP host that supports @mcp-ui/client (like LibreChat) can consume my server’s interactive Grids and Cards without any custom integration.

I believe this is an early preview of the future of LLM applications. Shopify is already experimenting with “agentic commerce” using similar patterns. With Kendo UI’s battle-tested components and MCP-UI’s portability, we can imagine many more use cases:

Live statistics dashboards tied to the ongoing conversation.
Interactive workflows where one MCP server’s results feed another’s UI.
Chatbots that don’t just explain data, but let you explore and manipulate it.

Demo

https://kendo-ai-bot-mcp-ui.vercel.app/
Try to display tasks, users or projects and interact with the dynamic KendoReact x MCP-UI components. (e.g. "Show me 10 tasks that are done", "Show me all the tasks assigned to Kyle Ellis", "Show me all tasks from the project student", etc)

⚠️ Heads up: This is running on a temporary Anthropic API key, so if you hammer it too hard the bot might ghost you. I love demos, but I don’t love surprise credit card bills. Please feel free to comment below if the app doesn't work anymore 😅.

⚠️ Note: For local setup, I'll provide temporary API keys for Supabase that will be deleted right after ther challenge but an Anthropic api key will be needed.

🎥 Video demo of my custom KendoReact chatbot powered by MCP-UI.
{% youtube bOhuHuiwQGM %}
📸 Screenshot of the same MCP-UI server running inside LibreChat, showing that the UI is portable across clients.

LibreChat that implements kendo MCP UI interactive components

📦 Repo: github.com/HichamELBSI/ai-chatbot-with-mcp-ui

KendoReact Components Used

Grid, Column, Buttons → interactive task and project tables.
Card, CardHeader, CardTitle, CardBody, CardActions, CardImage, CardSubtitle → user profile cards with avatar and task counts.
Avatar, SvgIcon, TextArea → polish for chat messages and inputs.

Lessons Learned

MCP-UI is very new, so documentation and patterns are still emerging. But it’s powerful: once you learn the UIResource flow, you can make any React component portable.
KendoReact gave me reliable, polished UI components that worked immediately. Without them, I’d have lost most of the hackathon hand-coding tables and cards.
The “aha!” moment was seeing a KendoReact Grid render inside LibreChat in response to a natural language query. That’s when the pieces clicked together.

🔥 “Don’t just tell me the data — show me the data.”