ChatGPT App Builder
mcp-use를 사용하여 대화형 위젯이 포함된 ChatGPT 앱을 빌드하세요. 제로 설정 위젯 개발, 자동 등록, 내장 React 훅을 지원합니다.
이 앱은 두 명의 사용자(인간과 ChatGPT LLM)가 동시에 사용합니다. 두 사용자는 위젯을 통해 협업합니다. 인간은 위젯과 상호작용하고, LLM은 위젯의 상태를 확인합니다. 위젯은 공유 인터페이스 역할을 합니다.
코딩 전 준비 사항
- 빌드할 내용 명확히 하기 → discover.md: 새 앱을 시작하거나, 아이디어를 검증하거나, 기능 범위를 정할 때 참고
- 도구 및 위젯 설계 → architecture.md: UI가 필요한 부분과 도구만으로 충분한 부분을 결정하고 UX 흐름을 설계할 때 참고
설정
- 스캐폴딩 및 실행 → setup.md: 새 프로젝트를 만들거나, 개발 서버를 시작하거나, ChatGPT/Claude에 연결할 때 참고
구현
- 서버 핸들러 + 위젯 생성 → server-and-widgets.md:
server.tool()에 위젯을 정의하거나,widget()헬퍼, React 위젯 파일을 작성할 때 참고 - 위젯 상태 및 LLM 컨텍스트 → state-and-context.md: 상태를 유지하거나, 위젯에서 LLM을 트리거하거나, 일시적/영구 데이터를 관리할 때 참고
- 표시 모드, 테마, 레이아웃 → ui-guidelines.md: 인라인/전체화면/PiP 모드에 적용하거나, 테마, 기기, 로케일을 처리할 때 참고
- 컴포넌트 API → components-api.md:
McpUseProvider,Image,ErrorBoundary,useWidget을 사용할 때 참고 - CSP 및 메타데이터 → csp-and-metadata.md: 외부 도메인 설정, 이중 프로토콜 메타데이터를 구성할 때 참고
- 고급 패턴 → widget-patterns.md: 도구 호출, 상태, 테마를 사용한 복잡한 위젯을 빌드할 때 참고
빠른 참조
// 서버
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "widget-name" } },
async (input) => widget({ props: {...}, output: text("...") })
);
// 위젯 (resources/widget-name.tsx)
import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
export const widgetMetadata: WidgetMetadata = { description: "...", props: z.object({...}) };
export default function MyWidget() {
const { props, isPending, callTool, sendFollowUpMessage, state, setState, theme } = useWidget();
if (isPending) return <McpUseProvider autoSize><div>로딩 중...</div></McpUseProvider>;
return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}