Overview

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)

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