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

# Provider & Context

> FrontMcpProvider props, FrontMcpContext, and ServerRegistry

## FrontMcpProvider

The provider manages the MCP client lifecycle and populates the shared `ServerRegistry`.

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { FrontMcpProvider } from '@frontmcp/react';

<FrontMcpProvider
  server={server}
  name="main"
  servers={{ analytics: analyticsServer }}
  components={{ 'component://Chart': ChartComponent }}
  autoConnect={true}
  onConnected={(client) => console.log('Connected', client)}
  onError={(err) => console.error('Failed', err)}
>
  {children}
</FrontMcpProvider>
```

### Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `server` | `DirectMcpServer` | — | **Required.** Primary MCP server instance |
| `name` | `string` | `'default'` | Logical name for the primary server in the registry |
| `servers` | `Record<string, DirectMcpServer>` | — | Additional named servers |
| `components` | `Record<string, ComponentType>` | — | Components for `DynamicRenderer` and `ComponentRegistry` |
| `autoConnect` | `boolean` | `true` | Connect on mount |
| `children` | `ReactNode` | — | **Required.** Child elements |
| `onConnected` | `(client: DirectClient) => void` | — | Called after successful connection |
| `onError` | `(error: Error) => void` | — | Called if connection fails |

### Lifecycle

1. On mount, registers the primary server (and any `servers`) in `ServerRegistry`
2. If `autoConnect` is true, calls `server.connect()` and discovers tools/resources/prompts
3. Updates registry entry with `status: 'connected'` and populates tool/resource/prompt lists
4. Also auto-connects additional servers from `servers` prop
5. On unmount, unregisters all servers from the registry

## FrontMcpContext

The React context carries a slim value — no state, just pointers:

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
interface FrontMcpContextValue {
  name: string;                    // Server name for this provider
  registry: ComponentRegistry;     // Component registry for DynamicRenderer
  connect: () => Promise<void>;    // Manual connect trigger
}
```

All state (status, tools, etc.) lives in `ServerRegistry` and is accessed via hooks.

## ServerRegistry

A singleton that stores all server entries and notifies subscribers on change.

```ts theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { serverRegistry } from '@frontmcp/react';

// Check if a server exists
serverRegistry.has('analytics'); // boolean

// Get a server entry
const entry = serverRegistry.get('analytics');
// entry.status, entry.client, entry.tools, etc.

// Subscribe to changes
const unsub = serverRegistry.subscribe(() => {
  console.log('Registry changed');
});
```

### ServerEntry

| Field | Type | Description |
| - | - | - |
| `server` | `DirectMcpServer` | The server instance |
| `client` | `DirectClient \| null` | Connected client (null until connected) |
| `status` | `FrontMcpStatus` | `'idle' \| 'connecting' \| 'connected' \| 'error'` |
| `error` | `Error \| null` | Connection error |
| `tools` | `ToolInfo[]` | Discovered tools |
| `resources` | `ResourceInfo[]` | Discovered resources |
| `resourceTemplates` | `ResourceTemplateInfo[]` | Discovered resource templates |
| `prompts` | `PromptInfo[]` | Discovered prompts |

## useFrontMcp

The primary hook for reading the resolved server state:

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
import { useFrontMcp } from '@frontmcp/react';

function MyComponent() {
  const {
    name,            // 'default'
    server,          // DirectMcpServer | null
    client,          // DirectClient | null
    status,          // 'idle' | 'connecting' | 'connected' | 'error'
    error,           // Error | null
    tools,           // ToolInfo[]
    resources,       // ResourceInfo[]
    resourceTemplates, // ResourceTemplateInfo[]
    prompts,         // PromptInfo[]
    registry,        // ComponentRegistry
    connect,         // () => Promise<void>
  } = useFrontMcp();
}
```

Pass a server name to target a specific server:

```tsx theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
const analytics = useFrontMcp('analytics');
```


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