Connect a React component to a server result

import { McpServer } from '@modelcontextprotocol/server';
import {
  operationViewFromHtml,
  registerPublicOperation,
  type OperationView,
  type RequestLifetime,
} from '@saga-a2ui/react-mcp-stack/server';
import { z } from 'zod';

export function prepareBoardViews(html: string): OperationView {
  if (!html.includes('<div id="root"'))
    throw new Error('Build the view before starting the server.');
  return operationViewFromHtml({
    html,
    filename: 'welcome.html',
    title: 'Tic-tac-toe',
  });
}

export function createGameServer({
  views,
  lifetime,
}: {
  views: OperationView;
  lifetime: RequestLifetime;
}): McpServer {
  const server = new McpServer({ name: 'saga-tic-tac-toe', version: '0.0.0' });
  registerPublicOperation(
    server,
    {
      name: 'new_game',
      title: 'Open tic-tac-toe',
      description:
        'Opens the tic-tac-toe welcome card. The game is not implemented yet.',
      annotations: {
        readOnlyHint: true,
        destructiveHint: false,
        idempotentHint: true,
        openWorldHint: false,
      },
      input: z.strictObject({}),
      output: z.strictObject({ message: z.string() }),
      view: views,
      failures: {
        absent: 'No welcome message was found.',
        unavailable: 'The welcome card is unavailable.',
        invalidOutput: 'The welcome message is invalid.',
      },
      handle: async () => ({
        kind: 'record',
        record: 'Your React app is connected. Next, build the board.',
      }),
      project: (message) => ({ text: message, data: { message } }),
    },
    { lifetime },
  );
  return server;
}

import {
  Catalog,
  CommonSchemas,
  createComponentImplementation,
  defineSurface,
  startA2uiView,
  z,
  type ReactCatalogComponent,
} from '@saga-a2ui/react-mcp-stack';

const catalogId = 'https://tic-tac-toe.example/catalogs/welcome/v1';
const Message = createComponentImplementation(
  {
    name: 'Message',
    schema: z.object({ text: CommonSchemas.DynamicString }).strict(),
  },
  ({ props }) => <p role="status">{String(props.text ?? '')}</p>,
);
const catalog = new Catalog<ReactCatalogComponent>(catalogId, 'v0.9', [
  Message,
]);
const layout = defineSurface({
  surfaceId: 'welcome',
  catalogId,
  data: z.object({ message: z.string() }),
  initial: { message: 'Connecting…' },
  root: { component: 'Message', bind: { text: 'message' }, props: {} },
  components: [],
});

export async function startView(): Promise<void> {
  const container = document.getElementById('root');
  if (container === null) throw new Error('The page has no #root.');
  const view = startA2uiView({
    container,
    catalog,
    layout,
    onToolResult: (result, running) => {
      const parsed = z
        .object({ message: z.string() })
        .safeParse(result.structuredContent);
      running.surface.update({
        message: parsed.success
          ? parsed.data.message
          : 'The server did not return a welcome message.',
      });
    },
  });
  await view.ready;
}

import './index.css';
import { startView } from './view.js';

await startView();

:root { font-family: system-ui, sans-serif; color-scheme: light dark; }
body { margin: 0; padding: 1rem; }

import { readFile } from 'node:fs/promises';
import { startLocalMcpServer } from '@saga-a2ui/react-mcp-stack/server/node';
import { createGameServer, prepareBoardViews } from './operations.js';

const html = await readFile(new URL('./index.html', import.meta.url), 'utf8');
const views = prepareBoardViews(html);
const listener = await startLocalMcpServer({
  port: Number(process.env.PORT ?? 3000),
  createServer: (lifetime) => createGameServer({ views, lifetime }),
});

console.log(`Tic-tac-toe MCP endpoint: ${listener.url}`);
for (const signal of ['SIGINT', 'SIGTERM'] as const) {
  process.once(signal, () => {
    void listener.close().catch(() => {
      process.exitCode = 1;
    });
  });
}

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { viteSingleFile } from 'vite-plugin-singlefile';

export default defineConfig({
  base: './',
  plugins: [react(), viteSingleFile()],
  build: { target: 'es2022' },
});

import { defineConfig } from 'vite';

export default defineConfig({
  ssr: { noExternal: true },
  build: {
    ssr: 'server/main.ts',
    outDir: 'dist',
    emptyOutDir: false,
    target: 'es2022',
    rollupOptions: { output: { entryFileNames: 'server.mjs', format: 'es' } },
  },
});