MCP App with React Widgets

npx create-xmcp-app --example mcp-app

pnpm install
pnpm dev

├── src/
│   └── tools/
│       └── weather.tsx           # Weather widget with Tailwind
├── globals.css                   # Tailwind global styles
├── postcss.config.mjs            # PostCSS configuration
├── xmcp.config.ts                # Server configuration
├── package.json
└── tsconfig.json

import { z } from "zod";
import { type InferSchema, type ToolMetadata } from "xmcp";

export const schema = {
  city: z.string().describe("The city to look up"),
};

export const metadata: ToolMetadata = {
  name: "my-widget",
  description: "Display a styled widget",
  _meta: {
    ui: {
      csp: {
        connectDomains: ["https://api.example.com"],
        resourceDomains: ["https://cdn.example.com"],
      },
      domain: "https://widget.example.com",
      prefersBorder: true,
    },
  },
};

export default function MyWidget({ city }: InferSchema<typeof schema>) {
  return (
    <div className="rounded-lg bg-white p-4 shadow">
      <h2 className="text-lg font-bold">{city}</h2>
    </div>
  );
}

pnpm build
node dist/http.js