> ## 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 ? String(data) : 'Greet'}
    </button>
  );
}
```

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

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