Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

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... show more

Santiago

451,829 subscribers

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

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

10 Comments

Santiago1 year ago

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

Arpit Sharma1 year ago

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

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 🪁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 Joule1 year ago

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

Fabrizio Rinaldi1 year ago

@CopilotKit 🤯

Harris MechLink1 year ago

@CopilotKit Can we expect any limitations with MCP integration?

Vishal1 year ago

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

AI Generalist 🌍🔧 💡1 year ago

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

Rajat Kapoor1 year ago

@CopilotKit This is amazing!

Related Videos

Introducing MCP client-side tooling🪁 Add an MCP client into your React application with a single command $ npx copilotkit@latest init -m MCP Chat with MCP severs inside your app and allow them to be tools for your in-app copilot. Documentation, demo & tutorial 🔗👇

Introducing MCP client-side tooling🪁 Add an MCP client into your React application with a single command $ npx copilotkit@latest init -m MCP Chat with MCP severs inside your app and allow them to be tools for your in-app copilot. Documentation, demo & tutorial 🔗👇

CopilotKit🪁

38,050 views • 1 year ago

Introducing Open MCP Client 🪁 Chat with any MCP server in your own app, just grab a URL from . The team and I vibe coded with Cursor this weekend and built: 1. The first web-based MCP client (link👇) 2. An open-source client you can add into any app How it's built It uses CopilotKit🪁 for the client and interactivity layer, and connects to a 40 line LangGraph ReAct agent that coordinates MCP calls. Hosted on Vercel. Kudos to Suhas Deshpande and Tyler Slaton for hacking and thanks to Harrison Chase for pointers!

Introducing Open MCP Client 🪁 Chat with any MCP server in your own app, just grab a URL from . The team and I vibe coded with Cursor this weekend and built: 1. The first web-based MCP client (link👇) 2. An open-source client you can add into any app How it's built It uses CopilotKit🪁 for the client and interactivity layer, and connects to a 40 line LangGraph ReAct agent that coordinates MCP calls. Hosted on Vercel. Kudos to Suhas Deshpande and Tyler Slaton for hacking and thanks to Harrison Chase for pointers!

Atai Barkai

299,711 views • 1 year ago

Build a 100% local, private, and secure MCP client. You can connect it to any MCP server. Step-by-step guide:

Build a 100% local, private, and secure MCP client. You can connect it to any MCP server. Step-by-step guide:

Akshay 🚀

15,560 views • 7 months ago

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!

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

I'm still picking my jaw off the floor with this MCP update: Postman will now automatically build an MCP server for an API. Automatically! You select your API and the requests you want to include, and Potman will generate a Zip file with everything you need. In collaboration with Postman, I recorded a video showing how I generated an MCP server for the Google Maps API. It's glorious! Also, and before I forget: You can now test any MCP server with your Postman application. They built MCP right in, so now you can: • Connect to an MCP server • List out all of the available tools • Test any of the tools This is a 10x boost for the MCP ecosystem. If you've tried the default MCP debugger, you'll understand how huge a deal it is that you can do all of that from Postman now. Go here to give this a try:

I'm still picking my jaw off the floor with this MCP update: Postman will now automatically build an MCP server for an API. Automatically! You select your API and the requests you want to include, and Potman will generate a Zip file with everything you need. In collaboration with Postman, I recorded a video showing how I generated an MCP server for the Google Maps API. It's glorious! Also, and before I forget: You can now test any MCP server with your Postman application. They built MCP right in, so now you can: • Connect to an MCP server • List out all of the available tools • Test any of the tools This is a 10x boost for the MCP ecosystem. If you've tried the default MCP debugger, you'll understand how huge a deal it is that you can do all of that from Postman now. Go here to give this a try:

Santiago

215,727 views • 1 year ago

MCP meets Ollama! In this video you'll learn how build a 100% local MCP client that you can connect to any MCP server. 100% open-source code, step-by-step guide:

MCP meets Ollama! In this video you'll learn how build a 100% local MCP client that you can connect to any MCP server. 100% open-source code, step-by-step guide:

Akshay 🚀

92,245 views • 1 year ago

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

You can connect your Supabase database via MCP server to Cursor! The Cursor agent can get the schema and any data from your database through the official Postgres MCP server! This helps Cursor understand your database better when it needs to modify it to add a new feature!

Tyler Shukert

203,451 views • 1 year ago

A Mini Crash-Course on MCP! Yesterday, I published a guide that covers: - What MCP is - How to build your own MCP server - How to create a 100% local MCP client - Using this to control & automate any browser Step-by-step guide...👇

A Mini Crash-Course on MCP! Yesterday, I published a guide that covers: - What MCP is - How to build your own MCP server - How to create a 100% local MCP client - Using this to control & automate any browser Step-by-step guide...👇

Akshay 🚀

66,623 views • 10 months ago

Ready to get started with @Antigravity? You can connect the Firebase MCP server to take your app development to the next level 🚀 Learn how to add Firebase MCP to Antigravity, link your current project, and start building →

Ready to get started with @Antigravity? You can connect the Firebase MCP server to take your app development to the next level 🚀 Learn how to add Firebase MCP to Antigravity, link your current project, and start building →

Firebase

90,985 views • 7 months ago

Unreal Engine 5.8 ships today with experimental MCP server support: Your sources, your pipeline and your workflow—simply configure the MCP plugin and connect to any agent. Get familiar with the MCP server and the PCG Primitive Plugin today and see what teams can build together:

Unreal Engine 5.8 ships today with experimental MCP server support: Your sources, your pipeline and your workflow—simply configure the MCP plugin and connect to any agent. Get familiar with the MCP server and the PCG Primitive Plugin today and see what teams can build together:

Unreal Engine

2,991,536 views • 22 days ago

🖼️ Introducing Open Multi-Agent Canvas - with MCP Chat with multiple LangGraph agents and any MCP server inside of a canvas app. Powered by CopilotKit🪁, LangChain & Larinháh Here's an example of how we used it to plan our offsite. We connected an agent to the Google Maps API, had it find local spots, and then sent the itinerary directly to Slack via MCP to be reviewed by the team. Explore and extend:

🖼️ Introducing Open Multi-Agent Canvas - with MCP Chat with multiple LangGraph agents and any MCP server inside of a canvas app. Powered by CopilotKit🪁, LangChain & Larinháh Here's an example of how we used it to plan our offsite. We connected an agent to the Google Maps API, had it find local spots, and then sent the itinerary directly to Slack via MCP to be reviewed by the team. Explore and extend:

CopilotKit🪁

22,080 views • 1 year ago

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵

⚡day 5 of launch week: from (zero) MCP server to ChatGPT app this is peak developer experience 🤌🏼 1. define your UI in a single react file. 2. test it instantly with hot reload in the built-in Inspector 3. deploy it in one click on mcp-use Cloud 4. ship it directly to ChatGPT with: npx create-mcp-use-app@latest my-server --template apps-sdk you can go from zero to a deployed mcp server with apps sdk widgets in just 5 minutes here's how 🧵

pederzh

22,647 views • 8 months ago

In case you missed it, earlier this week we launched "MCP: Build Rich-Context AI Apps with Anthropic." Enroll now and: ✅ Explore how MCP standardizes access to tools and data for AI applications, its underlying architecture, and how it simplifies the integration of new tools and connections to external systems (e.g., GitHub repos, Google Docs, local files). ✅ Build and deploy an MCP server that provides tools, resources, and prompts, and add it to the configuration of AI applications, such as Claude Desktop, to extend them. ✅ Build an MCP-compatible application that hosts multiple MCP clients, each maintaining 1-to-1 connection to an MCP server. Join in for free:

In case you missed it, earlier this week we launched "MCP: Build Rich-Context AI Apps with Anthropic." Enroll now and: ✅ Explore how MCP standardizes access to tools and data for AI applications, its underlying architecture, and how it simplifies the integration of new tools and connections to external systems (e.g., GitHub repos, Google Docs, local files). ✅ Build and deploy an MCP server that provides tools, resources, and prompts, and add it to the configuration of AI applications, such as Claude Desktop, to extend them. ✅ Build an MCP-compatible application that hosts multiple MCP clients, each maintaining 1-to-1 connection to an MCP server. Join in for free:

DeepLearning.AI

23,829 views • 1 year ago

Introducing Vapi's MCP client! Your agent can now call tools from any MCP server (like Zapier or Composio), live in conversations. Access hundreds of tools without any custom integrations. Examples and docs👇

Introducing Vapi's MCP client! Your agent can now call tools from any MCP server (like Zapier or Composio), live in conversations. Access hundreds of tools without any custom integrations. Examples and docs👇

Vapi

43,181 views • 1 year ago

Introducing: Akash MCP Server Create a deployment on the Akash Supercloud directly from any MCP client — including Claude and Cursor.

Introducing: Akash MCP Server Create a deployment on the Akash Supercloud directly from any MCP client — including Claude and Cursor.

Akash Network

29,333 views • 1 year ago

MCP is mind-blowing. Here is a genius setup that will earn you a promotion with your manager. I have multiple data sources: data in S3, MySQL, and local files. Using Spice (an open-source project), I can co-locate all of that data behind a single SQL endpoint and augment it using MCP. Before, accessing data was slow, and I had to make multiple requests to get anything. After using Spice, I can query the data much faster (since it's mirrored locally), and I don't have to worry about where the data is coming from. Spice acts as an MCP server, so I can connect to it from my IDE or the Claude Desktop app and have access to all the data. But even more cool than that: Spice also acts as an MCP client, so it can connect to other MCP servers. This is where things get really interesting! Watch the video. I'm querying multiple data sources from my IDE and using the Google Maps MCP server for driving directions.

MCP is mind-blowing. Here is a genius setup that will earn you a promotion with your manager. I have multiple data sources: data in S3, MySQL, and local files. Using Spice (an open-source project), I can co-locate all of that data behind a single SQL endpoint and augment it using MCP. Before, accessing data was slow, and I had to make multiple requests to get anything. After using Spice, I can query the data much faster (since it's mirrored locally), and I don't have to worry about where the data is coming from. Spice acts as an MCP server, so I can connect to it from my IDE or the Claude Desktop app and have access to all the data. But even more cool than that: Spice also acts as an MCP client, so it can connect to other MCP servers. This is where things get really interesting! Watch the video. I'm querying multiple data sources from my IDE and using the Google Maps MCP server for driving directions.

Santiago

142,696 views • 1 year ago

Search Stripe knowledge and call Stripe APIs directly in Cursor using the new Stripe MCP server! Use this command to get started: npx -y Stripe/mcp --tools=all --api-key=STRIPE_SECRET_KEY

Search Stripe knowledge and call Stripe APIs directly in Cursor using the new Stripe MCP server! Use this command to get started: npx -y Stripe/mcp --tools=all --api-key=STRIPE_SECRET_KEY

Stripe Developers

88,604 views • 1 year ago

Here is how you can build an MCP server with I built an MCP server that can send emails with Resend in < 1 min. Didn't need to write any code.

Here is how you can build an MCP server with I built an MCP server that can send emails with Resend in < 1 min. Didn't need to write any code.

Bhanu Teja P

20,595 views • 1 year ago

Before you dismiss MCP, try building one first. Try it with a personal tool and plug it into your favorite IDE. You immediately start to see how insanely capable, useful and intelligent MCP can make your IDE. Watch me build a small MCP server to chat with AI papers within Windsurf:

Before you dismiss MCP, try building one first. Try it with a personal tool and plug it into your favorite IDE. You immediately start to see how insanely capable, useful and intelligent MCP can make your IDE. Watch me build a small MCP server to chat with AI papers within Windsurf:

elvis

79,869 views • 1 year ago