Turn Your React App Into an MCP Client in Minutes
I'm on the CopilotKit team, and I'm excited to announce we've just added built-in support for MCP. The update went live today. For those unfamiliar, CopilotKit is a self-hostable, full-stack framework for building user interactive agents and copilots.. Our focus is on allowing your agents to take control of your application (by human approval), communicate what it's doing, and generate a completely custom UI for the user. Check out CopilotKit's GitHub ⭐️ What’s an MCP Client? It’s a web-based, client (React in this case) that lets you chat with any MCP server in your own app. All you need is a URL from Composio to get started. MCP lets you connect LLMs to external tools in a standardized way. Now you can use a chat interface to talk to any MCP-compatible server, right from your React app, with no agent framework required. Quickstart: With one command, you can start talking to MCP servers locally, from your own Next.js app. copilotkit@latest init -m MCP What we built: To show it off, I connected a simple self-hosted ToDo app to two platforms using MCP: Asana – Send blog ideas as tasks, assign them to myself, and set due dates. Typefully – Pull blog titles and save them as draft tweets. Stack: UI: CopilotKit MCP servers: Composio Framework: Next.js Agentic framework: None The code is open source, and contributions are welcome. GitHub: https://github.com/CopilotKit/copilotkit-mcp-demo Docs: https://docs.copilotkit.ai/guides/model-context-protocol Video demo: https://x.com/CopilotKit/status/1917976289547522074 Twitter Announcement: https://x.com/CopilotKit/status/1917976289547522074 Would love to hear what you're connecting MCP to! Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join our Discord.
I'm on the CopilotKit team, and I'm excited to announce we've just added built-in support for MCP. The update went live today.
For those unfamiliar, CopilotKit is a self-hostable, full-stack framework for building user interactive agents and copilots.. Our focus is on allowing your agents to take control of your application (by human approval), communicate what it's doing, and generate a completely custom UI for the user.
Check out CopilotKit's GitHub ⭐️
What’s an MCP Client?
It’s a web-based, client (React in this case) that lets you chat with any MCP server in your own app. All you need is a URL from Composio to get started.
MCP lets you connect LLMs to external tools in a standardized way. Now you can use a chat interface to talk to any MCP-compatible server, right from your React app, with no agent framework required.
Quickstart:
With one command, you can start talking to MCP servers locally, from your own Next.js app.
copilotkit@latest init -m MCP
What we built:
To show it off, I connected a simple self-hosted ToDo app to two platforms using MCP:
Asana – Send blog ideas as tasks, assign them to myself, and set due dates.
Typefully – Pull blog titles and save them as draft tweets.
Stack:
UI: CopilotKit
MCP servers: Composio
Framework: Next.js
Agentic framework: None
The code is open source, and contributions are welcome.
GitHub: https://github.com/CopilotKit/copilotkit-mcp-demo
Docs: https://docs.copilotkit.ai/guides/model-context-protocol
Video demo: https://x.com/CopilotKit/status/1917976289547522074
Twitter Announcement: https://x.com/CopilotKit/status/1917976289547522074
Would love to hear what you're connecting MCP to!
Follow CopilotKit on Twitter and say hi, and if you'd like to build something cool, join our Discord.
