npx create-mcp-use-app my-mcp-server
cd my-mcp-server
npm install && npm run dev

npx create-mcp-use-app my-server --template starter

my-mcp-server/
├── resources/           # React widgets (auto-registered)
├── public/             # Static assets
├── index.ts            # Server entry point
└── package.json

import { MCPServer, text, object } from "mcp-use/server";
import { z } from "zod";

const server = new MCPServer({
  name: "my-server",
  version: "1.0.0",
});

server.tool(
  {
    name: "greet-user",
    description: "Greet a user by name",
    schema: z.object({
      name: z.string().describe("The user's name"),
      formal: z.boolean().optional().describe("Use formal greeting"),
    }),
  },
  async ({ name, formal }) => {
    const greeting = formal ? `Good day, ${name}` : `Hey ${name}!`;
    return text(greeting);
  }
);

server.listen();

import { object, text, markdown } from "mcp-use/server";

// Static resource
server.resource(
  {
    uri: "config://settings",
    name: "Application Settings",
    description: "Current configuration",
    mimeType: "application/json",
  },
  async () => object({ theme: "dark", version: "1.0.0" })
);

// Dynamic resource
server.resource(
  {
    uri: "stats://current",
    name: "Current Stats",
    mimeType: "application/json",
  },
  async () => {
    const stats = await getStats();
    return object(stats);
  }
);

// Markdown documentation
server.resource(
  {
    uri: "docs://guide",
    name: "User Guide",
    mimeType: "text/markdown",
  },
  async () => markdown("# Guide\n\nWelcome!")
);

server.resourceTemplate(
  {
    uriTemplate: "user://{userId}/profile",
    name: "User Profile",
    description: "Get user by ID",
    mimeType: "application/json",
  },
  async ({ userId }) => {
    const user = await fetchUser(userId);
    return object(user);
  }
);

server.prompt(
  {
    name: "code-review",
    description: "Generate a code review template",
    schema: z.object({
      language: z.string().describe("Programming language"),
      focusArea: z.string().optional().describe("Specific focus area"),
    }),
  },
  async ({ language, focusArea }) => {
    const focus = focusArea ? ` with focus on ${focusArea}` : "";
    return {
      messages: [
        {
          role: "user",
          content: {
            type: "text",
            text: `Please review this ${language} code${focus}.`,
          },
        },
      ],
    };
  }
);

npm run dev

# Auto-tunnel
mcp-use start --port 3000 --tunnel

# Or separate tunnel
npm start              # Terminal 1
npx @mcp-use/tunnel 3000  # Terminal 2

npx mcp-use login
npm run deploy

// resources/weather-display.tsx
import { useWidget, McpUseProvider, type WidgetMetadata } from 'mcp-use/react';
import { z } from 'zod';

export const widgetMetadata: WidgetMetadata = {
  description: "Display weather",
  props: z.object({ city: z.string(), temp: z.number() }),
};

export default function WeatherDisplay() {
  const { props, isPending } = useWidget();
  if (isPending) return <div>Loading...</div>;

  return (
    <McpUseProvider autoSize>
      <div>{props.city}: {props.temp}°C</div>
    </McpUseProvider>
  );
}

import { widget, text } from "mcp-use/server";

server.tool(
  {
    name: "show-weather",
    schema: z.object({ city: z.string() }),
    widget: {
      name: "weather-display", // Must exist in resources/
      invoking: "Loading...",
      invoked: "Ready",
    },
  },
  async ({ city }) => {
    const data = await fetchWeather(city);
    return widget({
      props: { city, temp: data.temp },
      output: text(`${city}: ${data.temp}°C`),
    });
  }
);