{"schema_version":"newruntime-agent-readable-v0.2","type":"post","stable_id":"post:copilotkit-react-mcp-client-interface","slug":"copilotkit-react-mcp-client-interface","title":"CopilotKit Brings MCP Tool Calls Into The React Interface","description":"CopilotKit's React integration registers MCP servers with the chat runtime, exposes their tools to the model, and renders tool-call state inside the product interface.","retrieval_nugget":"CopilotKit's React integration registers MCP servers with the chat runtime, exposes their tools to the model, and renders tool-call state inside the product interface. An MCP client inside a product needs more than a transport connection. It has to register servers, expose their tools to the model, connect calls to application actions, and show the user what is running.","status":"published","published_at":"2026-08-03","updated_at":"2026-08-03","record_date":"2026-08-03","date_kind":"published_at","topics":["mcp","developer-tools","interfaces","api-design"],"source_urls":["https://www.copilotkit.ai/blog/add-an-mcp-client-to-any-react-app-in-under-30-minutes"],"visuals":[{"id":"copilotkit-react-mcp-client-interface","kind":"editorial-diagram","role":"hero","src":"https://newruntime.com/images/posts/copilotkit-react-mcp-client-interface.webp","alt":"Hand-drawn React application flow where a configured MCP server becomes available to a chat runtime, tool calls update application state, and a visible status card reports progress and results.","caption":"The useful MCP client surface includes server configuration, tool invocation, application state, and visible execution feedback.","credit":"New Runtime synthesis from CopilotKit","source_url":"https://www.copilotkit.ai/blog/add-an-mcp-client-to-any-react-app-in-under-30-minutes","generated_with":"gemini-3.1-flash-image","width":1600,"height":900,"legend":[{"label":"Server config","description":"The React application registers one or more MCP endpoints with the CopilotKit runtime."},{"label":"Tool call","description":"The model selects an exposed action and the application executes the matching handler."},{"label":"Visible state","description":"Tool status, errors, results, and changed application state remain visible to the user."}]}],"routes":{"html":"https://newruntime.com/posts/copilotkit-react-mcp-client-interface/","markdown":"https://newruntime.com/posts/copilotkit-react-mcp-client-interface.md","json":"https://newruntime.com/posts/copilotkit-react-mcp-client-interface.json"},"source_format":"markdown","next_reads":[{"type":"topic","path":"/topics/api-design/","reason":"Explore the api design topic hub.","url":"https://newruntime.com/topics/api-design/","title":"API Design - New Runtime","media_type":"text/html"},{"type":"topic","path":"/topics/developer-tools/","reason":"Explore the developer tools topic hub.","url":"https://newruntime.com/topics/developer-tools/","title":"Developer Tools - New Runtime","media_type":"text/html"},{"type":"related_material","path":"/posts/vercel-mcp-handler-stateless-protocol-bridge/","reason":"Shares api design and developer tools.","url":"https://newruntime.com/posts/vercel-mcp-handler-stateless-protocol-bridge/","title":"Vercel's mcp-handler 2.0 Makes MCP Servers More Stateless","media_type":"text/html"},{"type":"related_material","path":"/posts/drskill-agent-loadout-audit/","reason":"Shares developer tools and mcp.","url":"https://newruntime.com/posts/drskill-agent-loadout-audit/","title":"Dr. Skill Audits What An Agent Loads Before It Works","media_type":"text/html"},{"type":"related_material","path":"/posts/simon-stateless-mcp-practitioner-reset/","reason":"Shares developer tools and mcp.","url":"https://newruntime.com/posts/simon-stateless-mcp-practitioner-reset/","title":"Stateless MCP Makes Small, Auditable Agent Tools Practical Again","media_type":"text/html"}]}