Breaking down the text barrier of LLM chatbots with KendoReact and MCP-UI

#devchallenge #kendoreactchallenge #react #webdev

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

⚠️ Note: The demo uses Supabase, I'll provide temporary API keys 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.
📸 Screenshot of the same MCP-UI server running inside LibreChat, showing that the UI is portable across clients.

📦 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.”