Overview

React hooks, components, and AI SDK integration for FrontMCP

@frontmcp/react provides a React binding layer for FrontMCP. It lets you connect to MCP servers, call tools, read resources, fetch prompts, and render UI — all with idiomatic React hooks and components.

Entry Points

The package exposes five entry points:

Import	Purpose
@frontmcp/react	Provider, hooks, components, ServerRegistry, and SDK re-exports
@frontmcp/react/ai	AI SDK integration (useAITools, useTools, createToolCallHandler)
@frontmcp/react/router	React Router bridge (useRouterBridge, navigation tools, route resource)
@frontmcp/react/state	State management integration (hooks + store adapters: reduxStore, valtioStore, createStore)
@frontmcp/react/api	API client integration (useApiClient, parseOpenApiSpec, HttpClient)

Architecture

FrontMcpProvider
  └─ ServerRegistry (singleton, multi-server)
       ├─ useCallTool / useReadResource / useGetPrompt
       ├─ useListTools / useListResources / useListPrompts
       ├─ useStoreResource (live subscriptions)
       ├─ useDynamicTool / useDynamicResource (dynamic registration)
       ├─ useComponentTree (DOM → MCP resource)
       ├─ useApiClient (OpenAPI → MCP tools)
       ├─ mcpComponent (type-safe agent-driven UI)
       ├─ AgentContent / AgentSearch (legacy, deprecated)
       ├─ ToolForm / PromptForm / ResourceViewer / OutputDisplay
       └─ useAITools / useTools (AI SDK bridge)

The provider manages the MCP client lifecycle. All state (status, tools, resources, prompts) is stored in the shared ServerRegistry singleton and read via useSyncExternalStore for tear-free rendering.

Installation

npm

npm install @frontmcp/react react react-dom

Peer Dependencies

@frontmcp/sdk and @frontmcp/utils are bundled as dependencies and installed automatically.

Package	Version	Required
react	^18.0.0 || ^19.0.0	Yes
react-dom	^18.0.0 || ^19.0.0	Yes
react-router-dom	^7.0.0	Optional (only for /router)
zod	^4.0.0	Optional (for mcpComponent and zod-based useDynamicTool)

Quick Example

import { create, FrontMcpProvider, useCallTool } from '@frontmcp/react';

const server = await create({
  info: { name: 'my-app', version: '1.0.0' },
  tools: [GreetTool],
});

function App() {
  return (
    <FrontMcpProvider server={server}>
      <GreetButton />
    </FrontMcpProvider>
  );
}

function GreetButton() {
  const [callTool, { data, loading }] = useCallTool('greet');
  return (
    <button onClick={() => callTool({ name: 'World' })} disabled={loading}>
      {data ? String(data) : 'Greet'}
    </button>
  );
}

No need to install @frontmcp/sdk separately — @frontmcp/react re-exports create, connect, decorators, and context classes.

What’s Next

Getting Started

Install, wrap your app, and make your first tool call

Hooks Reference

Complete API reference for all hooks

Components

Pre-built headless form and display components

Dynamic Tools

Register tools and resources from React components

Agent Components

Type-safe agent-driven UI with mcpComponent

State Management

Expose Redux, Valtio, or any store as MCP resources

API Client

Register OpenAPI operations as MCP tools with custom HTTP clients

AI Integration

Bridge MCP tools to OpenAI, Claude, and Vercel AI SDK