---
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"
---

# CopilotKit Brings MCP Tool Calls Into The React Interface

## Retrieval answer

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.

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. CopilotKit's React tutorial provides that complete frontend path.

The shortest setup is `npx copilotkit@latest init -m MCP`. For a manual Next.js integration, the application installs `@copilotkit/react-core` and `@copilotkit/react-ui`, wraps the relevant interface in `CopilotKit`, and uses `setMcpServers()` to register an MCP endpoint.

`CopilotChat` supplies the conversational surface. Application actions can be registered with `useCopilotAction`, while a wildcard renderer captures MCP tool calls and turns their status, arguments, errors, and results into visible React components. In the example, tool handlers update the same todo state the user sees.

That distinction matters. A model calling an invisible remote tool is difficult to trust. A product-grade integration exposes the execution as interface state: which server is configured, which action was selected, whether it is still running, what changed, and where the user can stop or retry.

The tutorial also demonstrates a configuration modal for multiple servers and a cloned demo application. The architecture is useful beyond chat: MCP becomes the tool boundary, CopilotKit maps it into application actions, and React remains responsible for human-readable state and controls.

For New Runtime, this is the UI counterpart to stateless MCP infrastructure. Stateless servers simplify deployment, but the client still owns server selection, authorization, action rendering, and the human approval surface.