mcp-use

MCP를 위한 TypeScript 프레임워크
MCP 서버, ChatGPT 플러그인, Claude 커넥터를 빌드하고, 테스트하고, 배포하세요

완전한 타입 지원, 네이티브 Views 및 MCP Apps 지원, 내장 Inspector와 일급 Agent 경험.

문서
· Inspector
· 예제
· 배포

참고

v1에서 마이그레이션하시나요? 에이전트에게 맡기세요:

이 mcp-use 프로젝트를 다음 문서에 따라 v2로 마이그레이션하세요
https://docs.mcp-use.com/v2/typescript/server/migration

마이그레이션 가이드 읽기 →

시작하기
에이전트와 함께 시작하기
MCP 서버 빌드: https://mcp-use.com/prompt.md

프롬프트 읽기 →

코드로 시작하기
npx -y create-mcp-use-app@latest
생성된 프로젝트에서 npm run dev 실행 · http://localhost:3000/mcp/inspector 열기

TS 문서

MCP 배포에 필요한 모든 것

완전한 타입 지원
Zod 스키마가 도구에서 구조화된 결과, View props, 도구 호출까지 이어집니다.

네이티브 Views
React Views를 도구에 직접 바인딩하고 커스텀 확장 연결 없이 인터랙티브 앱을 배포하세요.

Agent 우선 및 헤드리스
에이전트를 통해 스캐폴드, 호출, 검사, 스크린샷, 배포를 수행하세요.

내장 디버깅 도구
브라우저 또는 CLI를 통해 헤드리스로 도구와 Views를 검사하세요.

빠른 시작
스캐폴드는 서버, TypeScript 설정, 개발 스크립트, Inspector, React view 파이프라인을 제공합니다. 한 번 시작하면 MCP 엔드포인트가 연결 URL과 설정 안내가 포함된 클라이언트 준비 완료 랜딩 페이지도 함께 제공합니다.

index.ts를 다음과 같이 view에 바인딩된 도구로 교체하세요:

index.ts — 도구 정의 및 메타데이터를 위한 서버 진입 파일
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 ;

MCP 서버 도구 살펴보기 →

도구에 Views 추가하기
views/weather-card/view.tsx를 생성하세요. 디렉터리 이름은 도구의 view.name과 일치합니다:

view.tsx — 도구에서 view 반환: React 날씨 카드
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 >
) ;
}

mcp-use로 ChatGPT 내에서 인터랙티브 UI 경험을 빌드하세요.

첫 MCP App 빌드하기 →

ChatGPT 플러그인 확장 빌드하기
사용자가 대화와 함께 열 수 있는 인터랙티브 Views로 ChatGPT 플러그인 확장을 빌드하세요. useModelContext를 사용하면 사용자가 View에서 콘텐츠를 대화에 추가할 수 있습니다. 예를 들어 토론할 책이나 탐색할 분석 데이터를 추가할 수 있습니다.

add-book.tsx — 선택한 책을 모델과 공유하기
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

little-bookshop-quick-demo.mp4

Manufact Analytics

chatgpt-better-manufact-analytics-demo.mp4

ChatGPT 플러그인 확장 살펴보기 →

빌드
프로덕션 빌드 생성:

npm run build
검사
개발 모드를 시작하여 http://localhost:3000/mcp에서 MCP 엔드포인트를 제공합니다. Inspector는 http://localhost:3000/mcp/inspector에서 자동으로 사용할 수 있습니다:

npm run dev

동일한 개발 루프에서 도구를 호출하고, 입력을 검증하고, 인터랙티브 Views를 검사하세요.

Inspector UI에서 터널을 시작하거나 mcp-use dev --tunnel을 실행하여 로컬 MCP 서버의 공개 URL을 얻고 배포 전에 ChatGPT와 Claude로 테스트하세요. 터널링에 대해 더 알아보기 →

터미널에서 동일한 서버를 헤드리스로 검사하고, 대표 도구를 호출하고, View 스크린샷을 캡처하세요:

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
배포
Manufact에 배포하고 관측성, 분석, 평가, 제출 준비 상태, Git 기반 프리뷰 환경을 무료로 받으세요.

npm run deploy
직접 실행하는 것을 선호하시나요? 셀프 호스팅 가이드 따르기 → .

mcp-use 비교
mcp-use는 공식 TypeScript SDK v2를 기반으로 구축되며 일급 Views, 타입이 지정된 도구-UI 계약, 최적화된 무상태 런타임, Inspector, 스크린샷 검증, 에이전트 우선 CLI 워크플로, 배포를 추가합니다.

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

로딩 중

* MCP Apps 지원 스택을 위해 @modelcontextprotocol/ext-apps, Vite, zod를 포함합니다.

설치 행은 커스텀 React MCP App 개발 스택을 비교합니다. 따라서 FastMCP는 좁은 범위의 서버 측 컴포넌트 워크플로만이 아니라 Apps 확장, React, Vite React 플러그인, Vite, TypeScript, zod를 포함합니다. 크기는 필수 peer 의존성을 포함하여 일반 npm install 후 실제 node_modules 디스크 사용량입니다.

상세 벤치마크 보고서 읽기 →

예제
완성된 MCP App을 리믹스하고, 소스를 검사하거나, 시작점으로 배포하세요:

미리보기
앱
보여주는 내용

Chart Builder
인터랙티브 차트로 렌더링된 구조화된 데이터 · 데모 열기

Diagram Builder
MCP 도구를 통해 다이어그램 생성 및 편집 · 데모 열기

Maps Explorer
검색, 상세 도구, 인터랙티브 지도 view · 데모 열기

모든 TypeScript 예제 살펴보기 →

생태계

패키지
용도

mcp-use
TypeScript v2 서버 프레임워크, React views, CLI

@mcp-use/client
Node.js, 브라우저, React, 샌드박스에서 MCP 서버에 연결

@mcp-use/agent
MCP 클라이언트 위에 모델 기반 에이전트 구축

@mcp-use/inspector
MCP 서버와 앱 검사 및 디버깅

@mcp-use/tunnel
관리형 릴레이를 통해 로컬 HTTP, WebSocket, MCP 서버 노출

create-mcp-use-app
서버와 인터랙티브 앱 스캐폴드

mcp-use for Python
Python MCP 서버, 클라이언트, 에이전트 구축

TypeScript 문서
Python 문서
Inspector 문서
Agent 문서
Client 문서

프로토콜 준수

보안 및 커뮤니티

보안 정책
기여 가이드
GitHub 이슈
Discord 커뮤니티
Manufact
MIT 라이선스

기여자
Pietro, Luigi, Enrico, 그리고 mcp-use 커뮤니티가 만들었습니다.