Agent skill · software engineering · assistant-ui
react-mcp
Adds user managed browser MCP servers to assistant-ui with `@assistant-ui/react-mcp`. Use when mounting `McpManagerResource`, declaring `defineConnector` presets, persisting custom servers and OAuth state, composing `McpManagerPrimitive`, `McpServerPrimitive`, `McpAddFormPrimitive`, or `McpElicitationPrimitive`, handling an OAuth callback, browsing MCP resources, or diagnosing missing server tools, connection failures, and OAuth redirects. This covers end user chosen servers, not application owned backend MCP tools. For those use tools; for the chat runtime use runtime; for the copied dialog use elements.
Why this skill is useful
Provides specific commands and patterns for managing user-authenticated MCP servers in React applications, which the AI wouldn't reliably generate on its own.
What it needs
Requires @assistant-ui/react, @assistant-ui/react-mcp installed locally. About 4k tokens when loaded. Last updated 2026-08-02. 20 stars on the source repository.
What this skill does
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 serverIdtoolName. 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. Connectors are application presets and cannot be removed. A custom server is user supplied through McpAddFormPrimitive or aui.mcp.addCustomServer(...). Both kinds share state, storage, elicitation, and the tool registration path. See setup for manager options and storage lifetime rules. Continue after frontend tool calls The manager registers connected tools automatically. A chat runtime still needs to send completed frontend tool results to the route so the model can continue. If no chat runtime provides modelContext, the manager mounts a minimal one. Use aui.mcp.server({ id }).callTool(...) for a direct call in an event handler. Use the configuration UI Install the styled dialog with npx assistant-ui@latest add mcp-config. It is a copied runtime connected element, so import it from @/components/assistant-ui/elements/mcp-config.aui and render it under the manager provider. Pass an element as children to replace its default trigger. For a settings page, sidebar, or custom add flow, compose the headless primitives in ui. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills assistant-ui/react-mcp