用 mcp-use v2 把 MCP 服务器和交互界面一次写完：工具契约、Views 与 Inspector 实操

# 创建项目（交互式脚手架）
npx -y create-mcp-use-app@latest

# 进入项目并启动开发模式
cd my-mcp-project
npm install
npm run dev

# 开发模式默认提供
#   MCP 端点      http://localhost:3000/mcp
#   内置 Inspector http://localhost:3000/mcp/inspector

# 线上 Inspector（不想本地起也能用）
https://inspector.mcp-use.com/inspector

import { MCPServer } from "mcp-use";
import { z } from "zod";

// 1) 服务端实例
const server = new MCPServer({
  name: "weather-app",
  title: "Weather App",
  version: "1.0.0",
});

// 2) 输入 / 输出契约（Zod）
const weatherInput = z.object({
  city: z.string().describe("City to look up"),
});

const weatherOutput = z.object({
  city: z.string(),
  temperature: z.number(),
  conditions: z.string(),
});

// 3) 注册工具：文本输出 + 结构化结果 + 视图绑定 + 注解
export const getWeather = server.tool(
  {
    name: "get-weather",
    title: "Get weather",
    description: "Get the current weather for a city",
    inputSchema: weatherInput,
    outputSchema: weatherOutput,
    view: { name: "weather-card" },
    annotations: {
      readOnlyHint: true,     // 只读：客户端更愿意自动执行
      destructiveHint: false, // 不是破坏性操作
      openWorldHint: true,    // 会访问外部世界（网络）
    },
  },
  async ({ city }) => {
    const weather = { city, temperature: 22, conditions: "Sunny" };
    return {
      content: [
        // 文本用普通字符串拼接，避免模板字符串与示例混淆
        { type: "text", text: "Weather in " + city + ": " + weather.conditions + ", " + weather.temperature + "°C" },
      ],
      structuredContent: weather,
    };
  },
);

export default server;

// views/weather-card/view.tsx
import { useCallTool, useToolContext } from "mcp-use/react";

export default function WeatherCard() {
  // 读当前工具调用的输入、状态与输出
  const { status, toolOutput, toolInput } = useToolContext<"get-weather">();
  // 在界面里再次调用工具（刷新）
  const refresh = useCallTool("get-weather");

  if (status === "pending") {
    return <p>Checking the weather in {toolInput?.city ?? "your city"}…</p>;
  }
  if (status === "error") return <p>Could not load the weather.</p>;

  const weather = refresh.data?.structuredContent ?? toolOutput;

  return (
    <main style={{ padding: 24 }}>
      <h2>{weather.city}</h2>
      <p>{weather.temperature}°C · {weather.conditions}</p>
      <button disabled={refresh.isPending} onClick={() => void refresh.callTool({ city: weather.city })}>
        {refresh.isPending ? "Refreshing…" : "Refresh"}
      </button>
      {refresh.error && <p>{refresh.error.message}</p>}
    </main>
  );
}

npm install --save-dev @mcp-use/client

# 连接本地服务器（起个别名，后续命令复用）
npx mcp-use client connect local http://localhost:3000/mcp

# 列出工具
npx mcp-use client local tools list

# 调用工具
npx mcp-use client local tools call get-weather city=Tokyo

# 把视图渲染成图片（做视觉回归很顺手）
npx mcp-use screenshot --server local --tool get-weather city=Tokyo --output weather-card.png

# 命令行起隧道，拿到公网 URL
mcp-use dev --tunnel

# 或在 Inspector 界面里点开隧道开关
# 把得到的公网 URL 填进 ChatGPT / Claude 的连接器配置

# 生产构建
npm run build

# 部署到官方托管平台
npm run deploy

# 自托管：按官方 runtime patterns 指引部署构建产物
https://docs.mcp-use.com/typescript/server/deployment/runtime-patterns