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 UI, the SDK that wires UI components directly into the MCP protocol🤯 Watch the video to see the new phase in AI interaction! Why browse when you can have universal apps that deliver the right UI to consume any data and perform any action? Replace cumbersome walls... show more

Ido Salomon

6,355 subscribers

79,457 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Finally, MCP servers can now deliver UI-rich experiences! MCP servers in Claude/Cursor don't offer UI any experience yet, like charts. It's just text/JSON. mcp-ui lets you add interactive web components to its output that can be rendered by the MCP client. 100% open-source!

Finally, MCP servers can now deliver UI-rich experiences! MCP servers in Claude/Cursor don't offer UI any experience yet, like charts. It's just text/JSON. mcp-ui lets you add interactive web components to its output that can be rendered by the MCP client. 100% open-source!

Avi Chawla

123,784 views • 1 year ago

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.

Google Cloud

19,318,891 views • 4 months ago

MCP tools have only ever returned text for the model to read. Now they return interactive UI. 🪄 TanStack AI's new MCP Apps support renders ui:// widgets right in the chat - static or fully interactive, with a client/server bridge.

MCP tools have only ever returned text for the model to read. Now they return interactive UI. 🪄 TanStack AI's new MCP Apps support renders ui:// widgets right in the chat - static or fully interactive, with a client/server bridge.

TANSTACK

133,087 views • 3 months ago

MCP servers were stuck on text and data. Not anymore. 👀 Proposed by Anthropic, OpenAI, and the MCP-UI community, the new MCP Apps Extension standardizes interactive interfaces with security built in. Here's what you need to know. ▶️

MCP servers were stuck on text and data. Not anymore. 👀 Proposed by Anthropic, OpenAI, and the MCP-UI community, the new MCP Apps Extension standardizes interactive interfaces with security built in. Here's what you need to know. ▶️

GitHub

60,969 views • 9 months ago

🚀 Introducing MCP Agents in Magentic-UI! Spin up custom agents that wrap one (or many) MCP tools, and let the Orchestrator pick the best agent for every step of the plan. Check out the demo below to see them in action 👇 #MCP #MagenticUI #AIagents

🚀 Introducing MCP Agents in Magentic-UI! Spin up custom agents that wrap one (or many) MCP tools, and let the Orchestrator pick the best agent for every step of the plan. Check out the demo below to see them in action 👇 #MCP #MagenticUI #AIagents

Microsoft AI Frontiers

10,635 views • 1 year ago

1/ NEW: Introducing the Blockworks MCP: our data, your agents. Plug ChatGPT, Claude or any AI agent into every dataset we have and build whatever you can imagine.

1/ NEW: Introducing the Blockworks MCP: our data, your agents. Plug ChatGPT, Claude or any AI agent into every dataset we have and build whatever you can imagine.

Blockworks

83,778 views • 6 days ago

this github repo contains 50 of the most essential MCP servers that give your AI agents superpowers. > works with claude code, gemini, codex, cursor, and other MCP-compatible clients > MIT licensed > 5 categories, 50 MCP servers in total whether you want your agent to browse the web, manage files, interact with apps, or automate workflows, you'll find the right MCP here. link:

this github repo contains 50 of the most essential MCP servers that give your AI agents superpowers. > works with claude code, gemini, codex, cursor, and other MCP-compatible clients > MIT licensed > 5 categories, 50 MCP servers in total whether you want your agent to browse the web, manage files, interact with apps, or automate workflows, you'll find the right MCP here. link:

m0h

60,642 views • 4 months ago

Comment “MCP” and I’ll DM you the servers I use every day Browser MCP tests apps for you, Magic MCP builds UI in seconds, and GitMCP links your AI to any repo. These are only 3 of the seven MCPs I use. Once you try them, you’ll never want to build with AI without them.

Comment “MCP” and I’ll DM you the servers I use every day Browser MCP tests apps for you, Magic MCP builds UI in seconds, and GitMCP links your AI to any repo. These are only 3 of the seven MCPs I use. Once you try them, you’ll never want to build with AI without them.

Prajwal Tomar

19,126 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

142,256 views • 1 year ago

Introducing the A2UI Widget Builder ⚙️ An interactive demo and template to build A2UI Widgets and bring them into your application. Powered by CopilotKit & Google's new A2UI spec Includes... - Widget Gallery: premade UI widgets you can use & modify - Material Icons: 100 of the most commonly used icons - UI Components: common components preview, usage and props - Source code and data on any widget/icon/component - Built with CopilotKit- so you get chat UI, generative UI, etc. Try it out: Tutorial of how to get started: Repo:

Introducing the A2UI Widget Builder ⚙️ An interactive demo and template to build A2UI Widgets and bring them into your application. Powered by CopilotKit & Google's new A2UI spec Includes... - Widget Gallery: premade UI widgets you can use & modify - Material Icons: 100 of the most commonly used icons - UI Components: common components preview, usage and props - Source code and data on any widget/icon/component - Built with CopilotKit- so you get chat UI, generative UI, etc. Try it out: Tutorial of how to get started: Repo:

CopilotKit🪁

18,783 views • 9 months ago

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Atai Barkai

24,891 views • 3 months ago

Today, we're launching C1 by Thesys on Product Hunt and giving away up to 5M free tokens if you retweet this and sign up within 24 hours. C1 is the world’s first Generative UI API that augments LLMs to respond with interactive UI like charts, forms, cards, and more in real-time, instead of plain text. Integrates seamlessly with any LLM, framework or MCP in just 2 lines of code - Fully customisable to match your brand - Supports custom components - Renders instantly with no latency Ship rich, interactive AI apps 10× faster, with 80% less UI overhead.

Rabi Shanker Guha

71,954 views • 1 year ago

Today we're launching Amplitude MCP MCP was made for data analytics. Ask a vague question and have an AI model iteratively query Amplitude to find you insights. Amplitude MCP exposes all of Amplitude's functionality so an agent can interact with it directly. It allows you to use Amplitude without having to know anything about Amplitude's user interface or your data taxonomy. It uses the intelligence of off the shelf AI agents, including Claude, Gemini, and Cursor, to query Amplitude data you already have to find answers. It leverages all of your existing Amplitude data and how it's used to navigate through large complex behavioral datasets. You can have conversations about your product data directly inside any AI model with MCP. It can create Amplitude dashboards and notebooks with what it finds and even make recommendations. This is the best MCP use case I've ever seen. Watching an AI agent think, reason, query Amplitude, and then repeat that process iteratively is magical. See it in action:

Today we're launching Amplitude MCP MCP was made for data analytics. Ask a vague question and have an AI model iteratively query Amplitude to find you insights. Amplitude MCP exposes all of Amplitude's functionality so an agent can interact with it directly. It allows you to use Amplitude without having to know anything about Amplitude's user interface or your data taxonomy. It uses the intelligence of off the shelf AI agents, including Claude, Gemini, and Cursor, to query Amplitude data you already have to find answers. It leverages all of your existing Amplitude data and how it's used to navigate through large complex behavioral datasets. You can have conversations about your product data directly inside any AI model with MCP. It can create Amplitude dashboards and notebooks with what it finds and even make recommendations. This is the best MCP use case I've ever seen. Watching an AI agent think, reason, query Amplitude, and then repeat that process iteratively is magical. See it in action:

Spenser Skates

32,447 views • 11 months ago

OpenAI, Anthropic and Microsoft all back the same standard for running apps inside AI chats. Booking .com, Figma, and Canva are already using it. Still, most developers have never heard of it. It's called MCP Apps. So, why does it matter? The next time someone buys from your website, they may never visit it. They'll ask ChatGPT or Claude, and the model decides how your product shows up. Usually as plain text, sometimes wrong, with none of the experience you built. That's the next shift in how people find you: - SEO was about Google finding your page. - AEO was about AI citing you. - MCP Apps are about your actual product showing up inside the chat. An MCP server returns data. An MCP App returns data plus an interactive UI, like hotel cards or an add-to-cart flow, right inside the chat. The model even knows what the user clicked. In this episode, we build an MCP app from start to finish with Julien, the lead maintainer of Skybridge, an open-source framework that lets you turn any React app into an MCP app. Chapters: 0:00 - Intro 2:44 - MCP servers vs MCP Apps 5:12 - Live demo: Booking .com in ChatGPT 9:24 - How MCP Apps work: context and shared state 15:43 - Skybridge and its devtools 17:48 - Live demo: an e-commerce app in ChatGPT 24:49 - Code walkthrough: MCP tools to React views 28:10 - Syncing UI state: "What's in my cart?" 32:16 - Agent skill to turn any React app → MCP App 37:52 - Outro Link to Skybridge GitHub repo: MCP Apps bring your website into the chat. WebMCP does the reverse and lets AI agents use your website through tools it exposes. I've also written a full article on it, quoted below.

OpenAI, Anthropic and Microsoft all back the same standard for running apps inside AI chats. Booking .com, Figma, and Canva are already using it. Still, most developers have never heard of it. It's called MCP Apps. So, why does it matter? The next time someone buys from your website, they may never visit it. They'll ask ChatGPT or Claude, and the model decides how your product shows up. Usually as plain text, sometimes wrong, with none of the experience you built. That's the next shift in how people find you: - SEO was about Google finding your page. - AEO was about AI citing you. - MCP Apps are about your actual product showing up inside the chat. An MCP server returns data. An MCP App returns data plus an interactive UI, like hotel cards or an add-to-cart flow, right inside the chat. The model even knows what the user clicked. In this episode, we build an MCP app from start to finish with Julien, the lead maintainer of Skybridge, an open-source framework that lets you turn any React app into an MCP app. Chapters: 0:00 - Intro 2:44 - MCP servers vs MCP Apps 5:12 - Live demo: Booking .com in ChatGPT 9:24 - How MCP Apps work: context and shared state 15:43 - Skybridge and its devtools 17:48 - Live demo: an e-commerce app in ChatGPT 24:49 - Code walkthrough: MCP tools to React views 28:10 - Syncing UI state: "What's in my cart?" 32:16 - Agent skill to turn any React app → MCP App 37:52 - Outro Link to Skybridge GitHub repo: MCP Apps bring your website into the chat. WebMCP does the reverse and lets AI agents use your website through tools it exposes. I've also written a full article on it, quoted below.

Akshay 🚀

17,059 views • 5 days ago

Introducing Unreal MCP in UEFN. With Unreal MCP, you can connect agentic coding tools like Claude Code, Codex, or Cursor directly to UEFN, opening up new ways to build your experiences in the editor, from writing Verse and configuring devices to working with Scene Graph. Learn more: Here’s a look at what you can do 🧵👇

Introducing Unreal MCP in UEFN. With Unreal MCP, you can connect agentic coding tools like Claude Code, Codex, or Cursor directly to UEFN, opening up new ways to build your experiences in the editor, from writing Verse and configuring devices to working with Scene Graph. Learn more: Here’s a look at what you can do 🧵👇

Fortnite Developers

83,370 views • 1 month ago

We'll be open sourcing an LLM → UI streaming mechanism powered by the Vercel AI SDK and RSC. It will help you build rich AI apps that go beyond text and markdown, with optimal performance and robustness to UI state changes.

We'll be open sourcing an LLM → UI streaming mechanism powered by the Vercel AI SDK and RSC. It will help you build rich AI apps that go beyond text and markdown, with optimal performance and robustness to UI state changes.

Guillermo Rauch

207,316 views • 2 years ago

Finally, we have published Horizon OS UI Set for ISDK-Unity and Figma with the Interaction SDK v69 release on 10/9! This is our first public release of official UI components and design resources based on the Quest Design System. UI Set for Meta XR Interaction SDK: Figma Design file: By using UI Set, you can achieve consistent input modality support, visual feedback, and interaction behaviors. In addition to UI components and common UI pattern examples, theming capability can help you bring your own brand identity into your UI. We hope these UI Set Unity components + Figma design assets + Guideline docs - can help you designers, developers, and creators design, experiment, and build great spatial app experiences for Horizon OS platform. Including a personal blog post - How to build a simple spatial panel app with Meta Horizon OS UI Set, an image viewer with NASA Mars Rover API: #MetaQuest #MixedReality #MetaHorizonOS #InteractionSDK #MetaXRSDK #SpatialComputing

Yoon Park (박동윤)

59,277 views • 2 years ago

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 views • 8 months ago

$20 UI resources every design engineer should have bookmarked. Save this 🔖 1. Scrolltide ( - 300+ animated components and full site prompts, and every single one ships with the complete build prompt behind it. Spiral sliders, morph cards, 3D scenes, scroll-driven sections. - Copy the prompt, paste it into Claude or Cursor, get the component live. -Personal and client use, full source included, new drops weekly. 2. shadcn/ui ( — the gold standard for copy-paste React 3. Aceternity UI ( — 200+ animated React/Tailwind 4. Magic UI ( — drop-in animated components 5. Motion Primitives ( — advanced UI interactions 6. Uiverse ( — thousands of open-source elements 7. — component registry that plugs into agents via MCP 8. UIAble ( — expands the shadcn ecosystem 9. mapcn ( — map components for React 10. MicroKit UI ( — micro-interactions for buttons and inputs 11. Liquid Glass ( — glass refraction components 12. Kinetics ( — 150+ motion effects with code 13. Theatre.js ( — expressive web animation 14. Anime.js ( — lightweight DOM animation 15. Spline ( — 3D in the browser, exports to React 16. Unicorn Studio ( — interactive web effects 17. Component Gallery ( — 2,600+ examples of the same element solved 18. Navbar Gallery ( — hundreds of navigations 19. CSS Text Effects ( 20. 3Dicons ( — open-source 3D icons$

20 UI resources every design engineer should have bookmarked. Save this 🔖 1. Scrolltide ( - 300+ animated components and full site prompts, and every single one ships with the complete build prompt behind it. Spiral sliders, morph cards, 3D scenes, scroll-driven sections. - Copy the prompt, paste it into Claude or Cursor, get the component live. -Personal and client use, full source included, new drops weekly. 2. shadcn/ui ( — the gold standard for copy-paste React 3. Aceternity UI ( — 200+ animated React/Tailwind 4. Magic UI ( — drop-in animated components 5. Motion Primitives ( — advanced UI interactions 6. Uiverse ( — thousands of open-source elements 7. — component registry that plugs into agents via MCP 8. UIAble ( — expands the shadcn ecosystem 9. mapcn ( — map components for React 10. MicroKit UI ( — micro-interactions for buttons and inputs 11. Liquid Glass ( — glass refraction components 12. Kinetics ( — 150+ motion effects with code 13. Theatre.js ( — expressive web animation 14. Anime.js ( — lightweight DOM animation 15. Spline ( — 3D in the browser, exports to React 16. Unicorn Studio ( — interactive web effects 17. Component Gallery ( — 2,600+ examples of the same element solved 18. Navbar Gallery ( — hundreds of navigations 19. CSS Text Effects ( 20. 3Dicons ( — open-source 3D icons

Himanshu Hingorani

70,237 views • 10 days ago