React Mcp

This puts MCP server management directly in the hands of your end users. Instead of hardcoding server connections, you drop in McpConfigDialog and let people add their own Linear, Notion, or custom MCP servers right from the browser, complete with OAuth flows and bearer tokens. The connected tools get namespaced and merged into the chat runtime automatically. It's built on assistant-ui primitives, so you can either use the drop-in dialog or compose your own UI from McpManagerPrimitive and McpServerPrimitive. Reach for this when you want user-driven tool discovery rather than developer-defined backends, or when you need to debug why OAuth isn't completing or servers aren't persisting between sessions.

skills.sh installs: 4.2K
GitHub stars: 29
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add assistant-ui/skills --skill react-mcp --agent claude-code

Installs into .claude/skills of the current project.

Files

assistant-ui React MCP

Always consult assistant-ui.com/llms.txt for the latest API.

@assistant-ui/react-mcp lets users connect preset or custom Streamable HTTP MCP servers in the browser. The manager persists server and auth state, exposes connection state to primitives, and registers each connected tool into modelContext as a frontend tool named serverId__toolName.

References

./references/setup.md -- manager configuration, storage, state, imperative methods, and resource reads
./references/ui.md -- the copied configuration dialog and every manager, server, and add form primitive
./references/oauth.md -- auth shapes, OAuth callback handling, CIMD, and connection states

Mount the manager

Declare fixed connectors with defineConnector, then extend the nearest aui scope with a config. connectionTimeout is a manager default in milliseconds. A connector or custom server can override it for its own connect and listTools() readiness flow.