Turn Your React App Into an MCP Client in Minutes
Nathan Tarbert

Nathan Tarbert @nathan_tarbert

About: I am a developer and open-source evangelist!

Location:
Florida, USA
Joined:
Feb 22, 2023

Turn Your React App Into an MCP Client in Minutes

Publish Date: May 6
162 26

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.

Comments 26 total

  • Arindam Majumder
    Arindam Majumder May 6, 2025

    Awesome Nathan!

    Love this!

  • Trent
    TrentMay 6, 2025

    Very cool!

  • K Om Senapati
    K Om Senapati May 7, 2025

    Fantastic

    I love how MCPs can be used in agent less way

  • Jake Horton
    Jake HortonMay 7, 2025

    The latest CopilotKit update includes native MCP support, enabling React applications to interact with MCP servers through a chat client. This integration facilitates standardized communication between language models and external tools. The feature supports quick setup in Next.js apps and showcases connections to platforms such as Asana and Typefully for task and content management within the app environment. Student life is challenging, and finding affordable yet quality help can be stressful. When you need a trustworthy and professional cheap assignment, you should visit ukwritings.com/cheap-assignment where experts deliver original work on time and tailored to your requirements. UK Writings ensures great support throughout.

  • Shrijal Acharya
    Shrijal AcharyaMay 7, 2025

    Can't wait to build something with this!

  • Nevo David
    Nevo DavidMay 7, 2025

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

    • Nathan Tarbert
      Nathan TarbertMay 8, 2025

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

  • alony
    alonyMay 7, 2025

    Nice! Very cool. I’ve been following CopilotKit for a while now—it’s been beneficial!

    • Nathan Tarbert
      Nathan TarbertMay 8, 2025

      That's really cool to hear Alony!

      I would love to hear more about what you are building

  • Joseph Ndungu
    Joseph NdunguMay 8, 2025

    This is transformational. 🤩🤩.

    • Nathan Tarbert
      Nathan TarbertMay 8, 2025

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

  • RK
    RKMay 8, 2025

    Awesome

  • daramola olasupo
    daramola olasupoMay 8, 2025

    Awesome

  • owen peter
    owen peterMay 9, 2025

    Looks good

  • Lara Stewart - DevOps Cloud Engineer
    Lara Stewart - DevOps Cloud EngineerMay 9, 2025

    CopilotKit can do this? Really impressed.

  • Mary jo Mozurak
    Mary jo MozurakMay 9, 2025

    The most well-known cryptocurrency in the world, Bitcoin, has become extremely popular in recent years. More people and companies are adopting Bitcoin and other cryptocurrencies as a form of investment due to their anarchic framework and high return potential. Nevertheless, the emergence of Bitcoin has also given rise to a number of security issues, resulting in instances of lost or unreachable Bitcoins. Consequently, there is an enormous increase in demand for expert Bitcoin recovery services. Ever felt like your heart sinks when you realise you can’t get to your Bitcoin? There is a bigger demand than ever for trustworthy Bitcoin recovery services due to the rising popularity of Bitcoin and other cryptocurrency. The security risks connected with Bitcoin are growing along with its value and use. There are several possibilities for consumers to lose access to their priceless digital assets, including device malfunctions, cyberattacks, and forgotten passwords and wallet seeds. Cyberspace Hack Pro
    can help in this situation. Cyberspace Hack Pro is the legitimate sidekick when it comes to obtaining your unidentified or unaccessible Bitcoins back. Years of experience and unmatched knowledge have allowed them to assist many people in regaining access to their digital assets. Cyberspace Hack Pro provides specialized solutions that increase your chances of getting your Bitcoins back by analyzing your particular circumstances and using cutting-edge recovery methods. I will suggest your urgent request for support from Cyberspace Hack Pro team through: Do not get left behind. Contact Cyberspace hack pro through

    Email:Cyberspacehackpro@rescueteam.com

    And also on

    WhatsApp +1 (659) 217 9239

    cyberspacehackpro0.wixsite.com/cyb...

  • xR0am
    xR0amMay 13, 2025

    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

    • Nathan Tarbert
      Nathan TarbertMay 13, 2025

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

      We will definitely support this for sure.

      • xR0am
        xR0amMay 13, 2025

        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

  • David
    DavidMay 15, 2025

    This is sick!

Add comment