Power your agent
คำสั่งของผู้เผยแพร่เอง ไม่ใช่เอนด์พอยต์ของ PlugMCP
Host a copy with our keys and logs.
npx -y [email protected]Claude Code ไม่มีลิงก์ติดตั้งสำหรับคำสั่งแบบโลคัล ให้คัดลอกคำสั่งด้านล่างแล้วรันในเทอร์มินัล
claude mcp add create-mcp-use-app -- npx -y create-mcp-use-app@2.1.1รันในเทอร์มินัล
{ "mcpServers": { "create-mcp-use-app": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}claude_desktop_config.json
URL แบบรีโมตหรือคำสั่งบนเครื่องของคุณ? การติดตั้งสองแบบต่างกันอย่างไร
รันบน PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
เปิดจากผู้เผยแพร่
</a>
<a href="https://www.npmjs.com/package/mcp-use">
</a>
<a href="https://manufact.com">
</a>
<a href="https://github.com/mcp-use/mcp-use/blob/main/LICENSE">
</a>
<a href="https://discord.gg/XkNkSkMz3V">
</a>
[!NOTE] Migrating from v1? Give it to your agent:
Migrate this mcp-use project to v2 following https://docs.mcp-use.com/v2/typescript/server/migration
Create MCP-Use apps with one command
Build an MCP server: https://mcp-use.com/prompt.md
npx -y create-mcp-use-app@latest
Run npm run dev in the generated project · open http://localhost:3000/mcp/inspector
The scaffold gives you the server, TypeScript configuration, development scripts, Inspector, and a React view pipeline. Start it once and the MCP endpoint also serves a client-ready landing page with its connection URL and setup instructions.
Replace its index.ts with a view-bound tool like this:
import { MCPServer } from "mcp-use";
import { z } from "zod";
const server = new MCPServer({
name: "weather-app",
title: "Weather App",
version: "1.0.0",
});
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(),
});
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;
Create views/weather-card/view.tsx. The directory name matches view.name on the tool:
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>
);
}
Build ChatGPT Plugin Extensions with interactive Views that users can open alongside their conversation. Use useModelContext to let them add content from a View to the conversation, such as a book to discuss or analytics to explore.
import { useModelContext } from "mcp-use/react";
export default function AddBook() {
const { add, pending, error } = useModelContext();
async function shareBook() {
try {
await add("selected-book", {
type: "text",
title: "The Great Gatsby",
text: "Selected book: The Great Gatsby by F. Scott Fitzgerald",
});
} catch (error) {
console.error("Could not share the book", error);
}
}
return (
<>
<button disabled={pending} onClick={shareBook}>
{pending ? "Adding…" : "Add book to chat"}
</button>
{error && <p role="alert">{error.message}</p>}
</>
);
}
Little Bookshop
Manufact Analytics
Create the production build:
npm run build
Start development mode to serve the MCP endpoint at http://localhost:3000/mcp. The Inspector is automatically available at http://localhost:3000/mcp/inspector:
npm run dev
Start a tunnel from the Inspector UI or run mcp-use dev --tunnel to get a public URL for your local MCP server and test it with ChatGPT and Claude before deployment. Learn more about tunneling →
Inspect the same server headlessly from the terminal, invoke representative tools, and capture a View screenshot:
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
Ship to Manufact and get observability, analytics, evals, submission readiness, and Git-based preview environments for free.
npm run deploy
Prefer to run it yourself? Follow the self-hosting guide →.
mcp-use builds on the official TypeScript SDK v2 and adds first-class Views, typed tool-to-UI contracts, an optimized stateless runtime, the Inspector, screenshot verification, agent-first CLI workflows, and deployment.
block-beta
columns 7
metric["Metric"] mcp["mcp-use v2"] fastmcp["FastMCP TS"] official["Official SDK v2*"] xmcp["xmcp"] skybridge["Skybridge"] handler["mcp-handler"]
speed["Speed"] speedMcp["10,982 ops/s"] speedFast["6,628 ops/s"] speedOfficial["8,050 ops/s"] speedXmcp["6,585 ops/s"] speedSkybridge["8,116 ops/s"] speedHandler["6,324 ops/s"]
install["MCP App<br/>dev stack"] installMcp["74.4 MiB"] installFast["122.5 MiB"] installOfficial["99.0 MiB"] installXmcp["121.9 MiB"] installSkybridge["137.5 MiB"] installHandler["388.0 MiB"]
packages["Installed<br/>packages"] packagesMcp["51"] packagesFast["180"] packagesOfficial["119"] packagesXmcp["171"] packagesSkybridge["300"] packagesHandler["130"]
views["Views"] viewsMcp["✅"] viewsFast["✅"] viewsOfficial["◐ Extension"] viewsXmcp["✅"] viewsSkybridge["✅"] viewsHandler["❌"]
nativeViews["Native Views<br/>on MCP 2026"] nativeViewsMcp["✅"] nativeViewsFast["✅"] nativeViewsOfficial["❌"] nativeViewsXmcp["❌"] nativeViewsSkybridge["❌"] nativeViewsHandler["❌"]
oauth["One-line<br/>OAuth adapters"] oauthMcp["✅"] oauthFast["◐ Provider/proxy"] oauthOfficial["◐ Primitives"] oauthXmcp["✅"] oauthSkybridge["✅"] oauthHandler["❌"]
protocol["MCP 2026<br/>protocol"] protocolMcp["✅"] protocolFast["✅"] protocolOfficial["✅"] protocolXmcp["❌"] protocolSkybridge["❌"] protocolHandler["❌"]
screenshot["Built-in View<br/>screenshot CLI"] screenshotMcp["✅"] screenshotFast["❌"] screenshotOfficial["❌"] screenshotXmcp["❌"] screenshotSkybridge["❌"] screenshotHandler["❌"]
tunnel["Built-in<br/>tunneling"] tunnelMcp["✅"] tunnelFast["❌"] tunnelOfficial["❌"] tunnelXmcp["❌"] tunnelSkybridge["✅"] tunnelHandler["❌"]
inspector["Built-in<br/>Inspector"] inspectorMcp["✅"] inspectorFast["✅"] inspectorOfficial["❌"] inspectorXmcp["❌"] inspectorSkybridge["◐ Limited"] inspectorHandler["❌"]
classDef metricLabel fill:#6e76811a,font-weight:bold
classDef brand fill:#2ea04333,stroke:#2da44e,stroke-width:3px,font-weight:bold
classDef header fill:#6e76811a,font-weight:bold
classDef value fill:#6e76810f,stroke-width:1px
classDef leader fill:#2ea0432e,stroke:#2da44e,stroke-width:2px,font-weight:bold
classDef partial fill:#bb80092e,stroke:#bf8700,stroke-width:2px,font-weight:bold
classDef unavailable fill:#6e76810f,opacity:0.72
class metric,speed,install,packages,views,nativeViews,oauth,protocol,screenshot,tunnel,inspector metricLabel
class mcp brand
class fastmcp,official,xmcp,skybridge,handler header
class speedFast,speedOfficial,speedXmcp,speedSkybridge,speedHandler,installFast,installOfficial,installXmcp,installSkybridge,installHandler,packagesFast,packagesOfficial,packagesXmcp,packagesSkybridge,packagesHandler value
class speedMcp,installMcp,packagesMcp,viewsMcp,viewsFast,viewsXmcp,viewsSkybridge,nativeViewsMcp,nativeViewsFast,oauthMcp,oauthXmcp,oauthSkybridge,protocolMcp,protocolFast,protocolOfficial,screenshotMcp,tunnelMcp,tunnelSkybridge,inspectorMcp,inspectorFast leader
class oauthFast,viewsOfficial,oauthOfficial,inspectorSkybridge partial
class viewsHandler,nativeViewsOfficial,nativeViewsXmcp,nativeViewsSkybridge,nativeViewsHandler,oauthHandler,protocolXmcp,protocolSkybridge,protocolHandler,screenshotFast,screenshotOfficial,screenshotXmcp,screenshotSkybridge,screenshotHandler,tunnelFast,tunnelOfficial,tunnelXmcp,tunnelHandler,inspectorOfficial,inspectorXmcp,inspectorHandler unavailable
* Includes @modelcontextprotocol/ext-apps, Vite, and zod for an MCP Apps-capable stack.
Install rows compare custom React MCP App development stacks. FastMCP therefore includes the Apps extension, React, Vite React plugin, Vite, TypeScript, and zod rather than only its narrower server-side component workflow. Size is actual node_modules disk usage after a normal npm install, including required peer dependencies.
Remix a complete MCP App, inspect the source, or deploy it as a starting point:
{ "mcpServers": { "create-mcp-use-app": { "command": "npx", "args": [ "-y", "[email protected]" ] } }}เครื่องมือ
ยังไม่มีรายการเครื่องมือ เซิร์ฟเวอร์แบบรีโมตจะได้รายการหลังการตรวจสอบสถานะครั้งแรก
FAQ
คัดลอกคอนฟิก stdio สำหรับ Cursor, Claude Desktop, Claude Code หรือ VS Code ได้ในหน้านี้ คอนฟิกนี้ใช้การติดตั้งของผู้เผยแพร่ ไม่ใช่พร็อกซีของ PlugMCP
ระเบียนนี้ไม่ได้ระบุตัวแปรสภาพแวดล้อมที่จำเป็น
Create MCP Use App ทำงานแบบโลคัลผ่าน stdio
ตรวจสอบล่าสุดเมื่อ 2026-11-14 Create MCP-Use apps with one command