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.

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🪁

6,053 subscribers

38,050 views • 1 year ago •via X (Twitter)

Health & Wellness Science & Technology Education

Anya Rossi• Live Now

Private livecam show

9 Comments

CopilotKit🪁1 year ago

MCPs can be used with the CPK Standard Agent -- or inside specialized agents built with the top frameworks through CoAgents. Documentation 📄 Tutorial 👨‍🏫 CoAgents MCP: Demo 💻

MightyBot1 year ago

🧠 Unified Search. Smarter Meetings. Effortless CRM. MightyBot is your AI agent platform for seamless workflows—record meetings, automate CRM updates, and find answers across apps in seconds. 🌟 Focus on what matters. We'll handle the grind.

Anmol1 year ago

This is a seriously impressive release in mcp space. Congrats to the entire team! 👏

Bonnie1 year ago

This is awesome. Looking forward to giving it a try.

Arindam Majumder 𝕏1 year ago

Great Work Team 👏👏

Avi Chawla1 year ago

Great demo, can't wait to try these 🙌

Adam Silverman (Hiring!) 🖇️1 year ago

awesome

Saïd Aitmbarek1 year ago

damn looks really cool, trying it tomorrow :) meanwhile, feel free to push it to @microlaunchhq whenever it helps mate

luizfcouto1 year ago

@grok , give me some examples of what I can do with a MCP client on a react app

Related Videos

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 and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓

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 and instant access to any MCP server out there! It doesn't get easier than this. Check out the link below for instructions on how to proceed ↓

Santiago

39,944 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,645 views • 1 year 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

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,177 views • 1 year 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

141,941 views • 1 year ago

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Your dev experience now has full MCP support Use the the Shopify Dev MCP server to set up, code, and validate your app Demo with Darius Gai

Shopify Developers

23,214 views • 5 months 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 • 7 months ago

The official Venice MCP Server is live! 31 tools across every modality. Chat, image, video, audio, music, web search, and more. Works with your Hermes or OpenClaw agent, Claude Code, Cursor, Codex, or any MCP client. 👉

The official Venice MCP Server is live! 31 tools across every modality. Chat, image, video, audio, music, web search, and more. Works with your Hermes or OpenClaw agent, Claude Code, Cursor, Codex, or any MCP client. 👉

Sabrina

41,495 views • 19 days ago

1/ Introducing web2mcp: a toolchain that auto-generates an MCP interface for any website, powered by @stagehanddev + GPT-5. It uses computer-use-preview to map out all actions in a web app, then compiles them into an MCP spec. Demo on a sample app:

1/ Introducing web2mcp: a toolchain that auto-generates an MCP interface for any website, powered by @stagehanddev + GPT-5. It uses computer-use-preview to map out all actions in a web app, then compiles them into an MCP spec. Demo on a sample app:

Neel Somani

51,223 views • 9 months 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 • 9 months ago

Introducing connectors, our new MCP client in Figma Make → Connect external tools to create prototypes with full context → Update your connected docs or create tasks directly from Make

Introducing connectors, our new MCP client in Figma Make → Connect external tools to create prototypes with full context → Update your connected docs or create tasks directly from Make

Figma

181,332 views • 6 months ago

Introducing Duet (duet) - group chatgpt for work • chat with your team and the latest AI models together • connect your MCP tools • trigger workflows via agents • create a shared knowledge base for your entire team

Introducing Duet (duet) - group chatgpt for work • chat with your team and the latest AI models together • connect your MCP tools • trigger workflows via agents • create a shared knowledge base for your entire team

David

27,784 views • 6 months ago

MCP server now supports multi-file Agent Skills 🔥 → search_skills: find community skills → get_skill: download to .claude/skills/ → save_skill: backup your skills to your account Works with any MCP client. Self-host for private use ⚡ 🎥👇

MCP server now supports multi-file Agent Skills 🔥 → search_skills: find community skills → get_skill: download to .claude/skills/ → save_skill: backup your skills to your account Works with any MCP client. Self-host for private use ⚡ 🎥👇

fatih kadir akın

15,754 views • 4 months ago

[Introducing] Add Stripe's official MCP to your Cursor, in a couple of clicks.

[Introducing] Add Stripe's official MCP to your Cursor, in a couple of clicks.

Jeff Weinstein

54,953 views • 1 year ago

Claude Code performs a complete analysis of Gemini-CLI and OpenAI Codex using Deep Graph MCP... one command to implement Claude Code automatically pulls two popular AI assistant repos and performs deep architectural analysis to determine which one is actually better built. Single command to implement: claude mcp add "Deep Graph MCP" npx -- -y mcp-code-graph@latest google-gemini/gemini-cli openai/codex The results might surprise you 👇

Claude Code performs a complete analysis of Gemini-CLI and OpenAI Codex using Deep Graph MCP... one command to implement Claude Code automatically pulls two popular AI assistant repos and performs deep architectural analysis to determine which one is actually better built. Single command to implement: claude mcp add "Deep Graph MCP" npx -- -y mcp-code-graph@latest google-gemini/gemini-cli openai/codex The results might surprise you 👇

Daniel San

68,001 views • 11 months ago

Building a Crypto Wallet MCP server to integrate with AI tools? ⚙️🤖 Don’t leave your private keys exposed on local setups. With Phala Cloud & NEAR Protocol MCP, you can deploy your Wallet MCP server inside a TEE—secure, verifiable, and easy to launch. Here’s how 🧵

Building a Crypto Wallet MCP server to integrate with AI tools? ⚙️🤖 Don’t leave your private keys exposed on local setups. With Phala Cloud & NEAR Protocol MCP, you can deploy your Wallet MCP server inside a TEE—secure, verifiable, and easy to launch. Here’s how 🧵

Phala

21,706 views • 1 year ago

Native payments for MCP now in production! 🔥 Let users pay and consume your services and APIs directly from their MCP clients. In this demo we deploy a weather app in Replit ⠕ , paywall it with fewsats and access it from Anthropic Claude desktop app 🤯

Native payments for MCP now in production! 🔥 Let users pay and consume your services and APIs directly from their MCP clients. In this demo we deploy a weather app in Replit ⠕ , paywall it with fewsats and access it from Anthropic Claude desktop app 🤯

positiveblue ⚡️🍠

19,015 views • 1 year 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 • 6 months ago

before: FlutterFlow in one tab. Claude in another. you as the translator. after: your agent is inside the project. FlutterFlow MCP is finally here. Claude Code, Codex, Gemini CLI, Cursor, any MCP client. here's our tutorial:

before: FlutterFlow in one tab. Claude in another. you as the translator. after: your agent is inside the project. FlutterFlow MCP is finally here. Claude Code, Codex, Gemini CLI, Cursor, any MCP client. here's our tutorial:

FlutterFlow

488,775 views • 1 month ago