Giới thiệu

Chatbot sử dụng Mô Hình Ngôn Ngữ Lớn (LLM) là công nghệ mạnh mẽ, nhưng hầu hết vẫn bị giới hạn chỉ trả lời bằng văn bản. Khi người dùng yêu cầu dữ liệu phức tạp, mô hình thường chỉ cung cấp văn bản đơn giản thay vì hiển thị thứ gì đó thực sự hữu ích. Để khắc phục vấn đề này, tôi đã xây dựng một hệ thống kết hợp KendoReact với MCP-UI (Model Context Protocol UI).

Những gì tôi đã xây dựng

Hệ thống của tôi bao gồm:

• Các thành phần KendoReact cho giao diện người dùng tương tác và tinh tế.
• Supabase làm cơ sở dữ liệu.
• MCP-UI như cầu nối giữa chatbot và các thành phần giao diện người dùng.

Kết quả cuối cùng là một chatbot không chỉ trả lời bằng lời nói — nó có thể hiển thị KendoReact Grids và Cards trực tiếp trong cuộc hội thoại, được hỗ trợ bởi các truy vấn thực tế từ Supabase.

Cách hoạt động

Bên máy chủ

Tôi đã tạo một máy chủ MCP-UI sử dụng @mcp-ui/server. Máy chủ này cung cấp hai công cụ:

• show_grid: truy vấn các bảng (tasks, projects, users, user_task) với các bộ lọc và kết nối, và trả về một KendoReact Grid.
• show_user_details: lấy thông tin hồ sơ người dùng cùng với số lượng nhiệm vụ (todo, in_progress, done), và trả về một KendoReact Card.

Bên máy khách

Tôi đã xây dựng một giao diện chatbot sử dụng các thành phần KendoReact và @mcp-ui/client. Chatbot này có thể nhận các tin nhắn UIResource từ máy chủ và hiển thị chúng trong cuộc hội thoại.

Tại sao không xây dựng một giao diện tùy chỉnh?

MCP-UI giúp các thành phần trở nên di động. Bất kỳ máy chủ MCP nào hỗ trợ @mcp-ui/client (như LibreChat) đều có thể sử dụng các Grids và Cards tương tác từ máy chủ của tôi mà không cần tích hợp tùy chỉnh.

Tiềm năng tương lai

Tôi tin rằng đây là một cái nhìn sớm về tương lai của các ứng dụng LLM. Shopify đã bắt đầu thử nghiệm với “thương mại tác động” sử dụng các mẫu tương tự. Với các thành phần đã được kiểm chứng của Kendo UI và tính di động của MCP-UI, chúng ta có thể tưởng tượng nhiều trường hợp sử dụng khác:

• Bảng thống kê trực tiếp liên kết với cuộc hội thoại đang diễn ra.
• Quy trình tương tác nơi kết quả từ một máy chủ MCP cung cấp cho giao diện người dùng của máy chủ khác.
• Chatbot không chỉ giải thích dữ liệu mà còn cho phép bạn khám phá và thao tác nó.

Demo

⚠️ Lưu ý: Demo sử dụng Supabase, tôi sẽ cung cấp khóa API tạm thời sẽ bị xóa ngay sau khi thử thách kết thúc, nhưng cần một khóa API từ Anthropics.

• 🎥 Video demo về chatbot KendoReact tùy chỉnh của tôi được hỗ trợ bởi MCP-UI.
• 📸 Ảnh chụp màn hình của cùng một máy chủ MCP-UI đang hoạt động trong LibreChat, cho thấy giao diện người dùng có thể di chuyển giữa các khách hàng.

📦 Repo: github.com/HichamELBSI/kendo-react-mcp-ui

Các thành phần KendoReact đã sử dụng

• Grid, Column, Buttons → bảng nhiệm vụ và dự án tương tác.
• Card, CardHeader, CardTitle, CardBody, CardActions, CardImage, CardSubtitle → thẻ hồ sơ người dùng với ảnh đại diện và số lượng nhiệm vụ.
• Avatar, SvgIcon, TextArea → hoàn thiện cho tin nhắn và đầu vào chat.

Những bài học đã học

• MCP-UI rất mới, vì vậy tài liệu và các mẫu vẫn đang trong quá trình phát triển. Nhưng nó rất mạnh mẽ: một khi bạn học được luồng UIResource, bạn có thể làm cho bất kỳ thành phần React nào trở nên di động.
• KendoReact đã cung cấp cho tôi các thành phần giao diện người dùng đáng tin cậy và hoàn thiện ngay lập tức. Nếu không có chúng, tôi đã mất nhiều thời gian để tự tay xây dựng bảng và thẻ.
• Khoảnh khắc “aha!” là khi tôi thấy một KendoReact Grid hiển thị trong LibreChat phản hồi lại một truy vấn ngôn ngữ tự nhiên. Đó là lúc mọi thứ trở nên rõ ràng.

🔥 “Đừng chỉ nói cho tôi dữ liệu — hãy cho tôi thấy dữ liệu.”