DEV Community

0 seconds of 0 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
00:00
 
Nathan Tarbert for CopilotKit

Posted on

99 11 13 12 17

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
Enter fullscreen mode Exit fullscreen mode

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.

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (25)

Collapse
 
arindam_1729 profile image
Arindam Majumder

Awesome Nathan!

Love this!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks Arindam!

Collapse
 
trent0123 profile image
Trent

Very cool!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks Trent!

Collapse
 
k0msenapati profile image
K Om Senapati

Fantastic

I love how MCPs can be used in agent less way

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks K Om!

It's pretty cool, isn't it

Collapse
 
k0msenapati profile image
K Om Senapati

Yupp

Collapse
 
joey_the_33rd profile image
Joseph Ndungu

This is transformational. 🤩🤩.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Wow, thanks, Joseph, that's really good feedback.

Collapse
 
xr0am profile image
xR0am

Awesome @nathan_tarbert ! Clearly a missing piece to make it easy to build clients to enhance composability.

Do you support the latest http streaming transport that replaces SSE?

Reason am asking is I recently released the MCP around our product that helps developers get crypto tips easily through a simple markdown button on their README and I used the latest transport.

Keen to try upgrading our web app as a client so users can come interact with MCP as well or offer it to others to integrate via your solution.

MCP launch tweet here : https://x.com/tipdotmd/status/1921210506800439440?s=46&t=K4GIh0DK9OyTnjBcntN7qA

Thanks in advance for your reply
xR0am

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Hey ROam, can you link to where HTTP replaces SSE?

We will definitely support this for sure.

Collapse
 
xr0am profile image
xR0am • Edited

hi @nathan_tarbert, see modelcontextprotocol.io/specificat...

Please let me know when OK and I will use it to add tip.md server there

I would be glad to have you on as a user on tip.md, I recently launched, still iterating and would appreciate any feedback you may have, or even better, see the below button on your README !

Image description

Collapse
 
nevodavid profile image
Nevo David

Been cool seeing steady progress - always gives me ideas for my own projects. Anyone else feel like the tools finally starting to click now?

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks Nevo, I agree, and yes I think MCP is breaking through.
It's a really useful tool!

Collapse
 
shricodev profile image
Shrijal Acharya

Can't wait to build something with this!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks Shrijal!
Let me know how it goes!

Collapse
 
jakehorton profile image
Jake Horton

Exciting update! MCP support will definitely enhance user-agent interactions!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Thanks Jake, definitely agree!

Collapse
 
rifatnext profile image
RK

Awesome

Collapse
 
daramola_olasupo_44e4ad8f profile image
daramola olasupo

Awesome

Some comments may only be visible to logged-in visitors. Sign in to view all comments.