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

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, Nanobot, Goose, etc) 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.
  

• 📸 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 and Nanobot 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.”

Comments

[4kibah]

Thanks for the demo link, regarding the kendo and mcp-ui integration, would you be able to like just provide a bunch a components (like providing a UI library with Kendo) as a mcp-ui server and then build interactive components from the host messages?

[Tegoon]

Yes, that's why this UI + MCP seems crazy to me as well. This is really impressive anf the fact that shopify has already built agentic commerce on top of it is so nice

[Tegoon]

Like imagine building a whole elearning course with mcp-ui and you just provide the mcp server link so you people could run their learning through any chatobot 🤩

[ELABBASSI Hicham]

Yes, but since it is done through an iframe, I'm not sure about the security stuff. This is quite new, it will probably change in the future

[ELABBASSI Hicham]

good question! I don't really know to be honest. I've seen something like a ui library provided through the createUIResource api in the mcp-ui examples but I haven't tried it yet.

[Karim]

wow !! 🤩
Can I really render whatever I want ? Like can I create a youtube mcp ui tool so my chat bot can render specific videos ?

[ELABBASSI Hicham]

100% since you can basically render an iframe, the limit is your creativity.

[Karim]

Awesome dude !! Thanks🙏🏼

[PaperBoyDev]

Always as good, your articles — thank you again for the time you spend writing them.

[Aurore Castel]

Insane! I don’t understand everything about map servers but seeing react components in chatbots is crazy

[Tegoon]

This is insane to be honest, what's crazy is to think that in the near future, most websites will be more or less useless. You provide an MCP server that offers tools enabling chatbots such as ChatGPT to display parts of your website directly in conversations and interact with them! Are we aware of this? In any case, you've shown some very impressive innovation here, well done. Much like a website provides an API, it will now be able to provide parts of the interface directly through the MCP protocol. 🔥

[ELABBASSI Hicham]

Hello, not at all, I haven't seen that project and it is not related at all. My project is an integration with mcp-ui.

The project you just shared is an AI chatbot for pair programming. There is clearly no connection with my project at all, which is the development of an mcp-ui server that is providing Kendo interactive component that can be consume by any mcp-ui compatible chatbot (nanobot, librechat, goose).