Loading video...

Video Failed to Load

Go Home

You can now connect your React application to any MCP server! And it only takes a single command: $ npx copilotkit@latest init -m MCP This is massive for anyone building React applications! Using the CopilotKit🪁 MCP Client Component, you can get an MCP Client chat component in your application...

39,944 views • 1 year ago •via X (Twitter)

10 Comments

Santiago's profile picture
Santiago1 year ago

Here is how you get MCP working with your React application:

Arpit Sharma's profile picture
Arpit Sharma1 year ago

@CopilotKit Anyone else think this will be the new standard for integrating chatbots?

CodingTheSmartWay's profile picture
CodingTheSmartWay1 year ago

@CopilotKit Thanks for sharing, makes a lot of sense to add MCP to CopilotKit. Seems to be really easy to integrate this into a React based web project.

Uli 🪁's profile picture
Uli 🪁1 year ago

@CopilotKit Thanks for sharing this Santiago. It was great to give you early access and to get your feedback on this one.

Jude Joule's profile picture
Jude Joule1 year ago

@CopilotKit This update simplifies processes, enhancing development efficiency and integration efficacy.

Fabrizio Rinaldi's profile picture
Fabrizio Rinaldi1 year ago

@CopilotKit 🤯

Harris MechLink's profile picture
Harris MechLink1 year ago

@CopilotKit Can we expect any limitations with MCP integration?

Vishal's profile picture
Vishal1 year ago

@CopilotKit This makes integrating MCP with React apps super simple.

AI Generalist 🌍🔧 💡's profile picture
AI Generalist 🌍🔧 💡1 year ago

@CopilotKit React team is actually working on Official React MCP - See -

Rajat Kapoor's profile picture
Rajat Kapoor1 year ago

@CopilotKit This is amazing!

Related Videos

New course: MCP: Build Rich-Context AI Apps with Anthropic. Learn to build AI apps that access tools, data, and prompts using the Model Context Protocol in this short course, created in partnership with Anthropic Anthropic and taught by Elie Schoppik Elie Schoppik, its Head of Technical Education. Connecting AI applications to external systems that bring rich context to LLM-based applications has often meant writing custom integrations for each use case. MCP is an open protocol that standardizes how LLMs access tools, data, and prompts from external sources, and simplifies how you provide context to your LLM-based applications. For example, you can provide context via third-party tools that let your LLM make API calls to search the web, access data from local docs, retrieve code from a GitHub repo, and so on. MCP, developed by Anthropic, is based on a client-server architecture that defines the communication details between an MCP client, hosted inside the AI application, and an MCP server that exposes tools, resources, and prompt templates. The server can be a subprocess launched by the client that runs locally or an independent process running remotely. In this hands-on course, you'll learn the core architecture behind MCP. You’ll create an MCP-compatible chatbot, build and deploy an MCP server, and connect the chatbot to your MCP server and other open-source servers. Here’s what you’ll do: - Understand why MCP makes AI development less fragmented and standardizes connections between AI applications and external data sources - Learn the core components of the client-server architecture of MCP and the underlying communication mechanism - Build a chatbot with custom tools for searching academic papers, and transform it into an MCP-compatible application - Build a local MCP server that exposes tools, resources, and prompt templates using FastMCP, and test it using MCP Inspector - Create an MCP client inside your chatbot to dynamically connect to your server - Connect your chatbot to reference servers built by Anthropic’s MCP team, such as filesystem, which implements filesystem operations, and fetch, which extracts contents from the web as markdown - Configure Claude Desktop to connect to your server and others, and explore how it abstracts away the low-level logic of MCP clients - Deploy your MCP server remotely and test it with the Inspector or other MCP-compatible applications - Learn about the roadmap for future MCP development, such as multi-agent architecture, MCP registry API, server discovery, authorization, and authentication MCP is an exciting and important technology that lets you build rich-context AI applications that connect to a growing ecosystem of MCP servers, with minimal integration work. Please sign up here!

Andrew Ng

142,010 views • 1 year ago