Getting Started

import { create } from '@frontmcp/sdk';
import { FrontMcpProvider } from '@frontmcp/react';
import { GreetTool } from './tools/greet.tool';
import { Dashboard } from './Dashboard';

// Create an in-process MCP server
const server = await create({
  info: { name: 'my-app', version: '1.0.0' },
  tools: [GreetTool],
});

export function App() {
  return (
    <FrontMcpProvider server={server}>
      <Dashboard />
    </FrontMcpProvider>
  );
}

import { useCallTool } from '@frontmcp/react';

export function Dashboard() {
  const [callTool, { data, loading, error }] = useCallTool('greet');

  return (
    <div>
      <button onClick={() => callTool({ name: 'Alice' })} disabled={loading}>
        {loading ? 'Calling...' : 'Greet'}
      </button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
      {error && <p style={{ color: 'red' }}>{error.message}</p>}
    </div>
  );
}

import { create } from '@frontmcp/sdk';
import { FrontMcpProvider } from '@frontmcp/react';

const mainServer = await create({ info: { name: 'main', version: '1.0.0' }, tools: mainTools });
const analyticsServer = await create({ info: { name: 'analytics', version: '1.0.0' }, tools: analyticsTools });

export function App() {
  return (
    <FrontMcpProvider
      server={mainServer}
      servers={{ analytics: analyticsServer }}
    >
      <Dashboard />
    </FrontMcpProvider>
  );
}