> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentfront.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```bash npm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  npm install @frontmcp/react react react-dom
  ```

  ```bash pnpm theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  pnpm add @frontmcp/react react react-dom
  ```

  ```bash yarn theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
  yarn add @frontmcp/react react react-dom
  ```
</CodeGroup>

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

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
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?.content?.[0]?.type === 'text' ? data.content[0].text : 'Greet'}
    </button>
  );
}
```

You do not need to install `@frontmcp/sdk` separately. `@frontmcp/react` re-exports `create`, `connect`, decorators, context classes, and `z` for tool schemas. `zod` remains a required peer dependency of `@frontmcp/lazy-zod` and must be available in the consuming project.

`data` is the complete MCP `CallToolResult` (`{ content, structuredContent?, isError? }`), not the tool's return value. A tool that fails resolves with `data.isError === true`; the `error` field is only set when the call itself throws (for example when the client is not connected).

## What's Next

<CardGroup cols={2}>
  <Card title="Getting Started" icon="play" href="/frontmcp/react/getting-started">
    Install, wrap your app, and make your first tool call
  </Card>

  <Card title="Hooks Reference" icon="hook" href="/frontmcp/react/hooks">
    Complete API reference for all hooks
  </Card>

  <Card title="Components" icon="puzzle-piece" href="/frontmcp/react/components">
    Pre-built headless form and display components
  </Card>

  <Card title="Dynamic Tools" icon="bolt" href="/frontmcp/react/dynamic-tools">
    Register tools and resources from React components
  </Card>

  <Card title="Agent Components" icon="robot" href="/frontmcp/react/agent-components">
    Type-safe agent-driven UI with mcpComponent
  </Card>

  <Card title="State Management" icon="database" href="/frontmcp/react/state-management">
    Expose Redux, Valtio, or any store as MCP resources
  </Card>

  <Card title="API Client" icon="plug" href="/frontmcp/react/api-client">
    Register OpenAPI operations as MCP tools with custom HTTP clients
  </Card>

  <Card title="AI Integration" icon="microchip" href="/frontmcp/react/ai-integration">
    Bridge MCP tools to OpenAI, Claude, and Vercel AI SDK
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.