Provider & Context

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>

interface FrontMcpContextValue {
  name: string;                    // Server name for this provider
  registry: ComponentRegistry;     // Component registry for DynamicRenderer
  connect: () => Promise<void>;    // Manual connect trigger
}

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');
});

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();
}

const analytics = useFrontMcp('analytics');