Official skills for mcp-use framework - build production-ready MCP servers and ChatGPT apps
npx claudepluginhub mcp-use/mcp-useComplete framework for building MCP applications and servers for Claude, ChatGPT, and AI agents with integrated tooling.
mcp-use is the fullstack MCP framework to build MCP Apps for ChatGPT / Claude & MCP Servers for AI Agents.
Visit our docs or jump to a quickstart (TypeScript | Python)
Using Claude Code, Codex, Cursor or other AI coding agents?
Build your first MCP Server or MPC App:
npx create-mcp-use-app@latest
Or create a server manually:
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
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:
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:
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(),
});