Use

安装配置

npx create-mcp-use-app@latest

README 摘要

  ## About mcp-use is the fullstack MCP framework to build MCP Apps for ChatGPT / Claude & MCP Servers for AI Agents. - **Build** with mcp-use SDK ([ts](https://www.npmjs.com/package/mcp-use) | [py](https://pypi.org/project/mcp_use/)): MCP Servers and MCP Apps - **Preview** on mcp-use MCP Inspector ([online](https://inspector.mcp-use.com/inspector) | [oss](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/inspector)): Test and debug your MCP Servers and Apps - **Deploy** on [Manufact MCP Cloud](https://manufact.com): Connect your GitHub repo and have your MCP Server and App up and running in production with observability, metrics, logs, branch-deployments, and more ## Documentation Visit our [docs](https://mcp-use.com/docs) or jump to a quickstart ([TypeScript](https://mcp-use.com/docs/typescript/getting-started/quickstart) | [Python](https://mcp-use.com/docs/python/getting-started/quickstart)) ### Skills for Coding Agents > **Using Claude Code, Codex, Cursor or other AI coding agents?** > > **[Install mcp-use skill for MCP Apps](https://skills.sh/mcp-use/mcp-use/mcp-apps-builder)** ## Quickstart: MCP Servers and MCP Apps ### TypeScript Build your first MCP Server or MPC App: ```bash npx create-mcp-use-app@latest ``` Or create a server manually: ```typescript import { MCPServer, text } from "mcp-use/server"; import { z } from "zod"; const server = new MCPServer({ name: "my-server", version: "1.0.0", }); server.tool({ name: "get_weather", description: "Get weather for a city", schema: z.object({ city: z.string() }), }, async ({ city }) => { return text(`Temperature: 72°F, Condition: sunny, City: ${city}`); }); await server.listen(3000); // Inspector at http://localhost:3000/inspector ``` [**→ Full TypeScript Server Documentation**](https://mcp-use.com/docs/typescript/server) ## MCP Apps MCP Apps let you build interactive widgets that work across Claude, ChatGPT, and other MCP clients — write once, run everywhere. **Server**: define a tool and point it to a widget: ```typescript import { MCPServer, widget } from "mcp-use/server"; import { z } from "zod"; const server = new MCPServer({ name: "weather-app", version: "1.0.0", }); server.tool({ name: "get-weather", description: "Get weather for a city", schema: z.object({ city: z.string() }), widget: "weather-display", // references resources/weather-display/widget.tsx }, async ({ city }) => { return widget({ props: { city, temperature: 22, conditions: "Sunny" }, message: `Weather in ${city}: Sunny, 22°C`, }); }); await server.listen(3000); ``` **Widget**: create a React component in `resources/weather-display/widget.tsx`: ```tsx import { useWidget, type WidgetMetadata } from "mcp-use/react"; import { z } from "zod"; const propSchema = z.object({ city: z.string(), temperature: z.number(), conditions: z.string(), }); export const widgetMetadata: WidgetMetadata = { description: "Display weather information", props: propSchema, }; const WeatherDisplay: React.FC = () => { const { props, isPending, theme } = useWidget(); const isDark = theme === "dark"; if (isPending) return Loading...; return ( {props.city} {props.temperature}° — {props.conditions} ); }; exp...