본문으로 건너뛰기
cccskills
무료GitHub에 공개

chatgpt-app-builder

Guides development of ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK, covering server tools, React interfaces, and shared state. This skill is deprecated and directs users to mcp-app-builder.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

DEPRECATED: This skill has been replaced by `mcp-app-builder`. Check if `mcp-app-builder` is available in the skills folder. If not, install it: `npx skills install mcp-use/mcp-use --skill mcp-app-builder` Use `mcp-app-builder` instead of this skill. Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.

연동 도구OpenAI
설치 방법 보기

이럴 때 유용합니다

  • Plan a ChatGPT app with interactive widgets
  • Implement MCP server tools and React widgets
  • Manage widget state and context shared with ChatGPT
  • Check the successor skill before starting development

포함된 파일(18)

  • SKILL.md3.1 KB
  • evals/architecture.json2.3 KB
  • evals/discover.json1.7 KB
  • evals/README.md476 B
  • evals/skill.json2.1 KB
  • evals/state-and-context.json1.4 KB
  • evals/ui-guidelines.json1.6 KB
  • evals/widgets.json1.6 KB
  • LICENSE.txt8.9 KB
  • references/architecture.md5.2 KB
  • references/components-api.md9.8 KB
  • references/csp-and-metadata.md5.4 KB
  • references/discover.md2.1 KB
  • references/server-and-widgets.md6.9 KB
  • references/setup.md2.1 KB
  • references/state-and-context.md7.4 KB
  • references/ui-guidelines.md5.7 KB
  • references/widget-patterns.md6.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

ChatGPT App Builder

Build ChatGPT apps with interactive widgets using mcp-use. Zero-config widget development with automatic registration and built-in React hooks.

The app is consumed by two users at once: the human and the ChatGPT LLM. They collaborate through the widget -- the human interacts with it, the LLM sees its state. The widget is your shared surface.

Before You Code

  • Clarify what to build → discover.md: when starting a new app, validating an idea, or scoping features
  • Design tools and widgets → architecture.md: when deciding what needs UI vs tools-only, designing UX flows

Setup

  • Scaffold and run → setup.md: when creating a new project, starting dev server, connecting to ChatGPT/Claude

Implementation

  • Server handlers + widget creation → server-and-widgets.md: when writing server.tool() with widgets, widget() helper, React widget files
  • Widget state and LLM context → state-and-context.md: when persisting state, triggering LLM from widget, managing ephemeral vs persistent data
  • Display modes, theme, layout → ui-guidelines.md: when adapting to inline/fullscreen/PiP, handling theme, device, locale
  • Component API → components-api.md: when using McpUseProvider, Image, ErrorBoundary, useWidget
  • CSP and metadata → csp-and-metadata.md: when configuring external domains, dual-protocol metadata
  • Advanced patterns → widget-patterns.md: when building complex widgets with tool calls, state, theming

Quick Reference

// Server
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("...") })
);

// Widget (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>Loading...</div></McpUseProvider>;
  return <McpUseProvider autoSize><div>{/* UI */}</div></McpUseProvider>;
}

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Set up an agent that replies in Slack or Microsoft Teams using CopilotKit's guided CLI workflow. It covers project preparation, agent creation, channel configuration, a persistent host process, and verification with a real message.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building a first agent that replies in Slack
  • Connecting an agent to Microsoft Teams
  • Checking channel setup through a real reply
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

Helps integrate CopilotKit into an app by consulting current documentation and source code. Covers chat interfaces, agent connections, shared state, and troubleshooting, with guidance on checking configuration and avoiding incompatible API versions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding a CopilotKit chat interface to an app
  • Connecting an agent framework
  • Diagnosing runtime connection problems
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

Implement and customize managed CopilotKit Channels so agents can reply in Slack or Microsoft Teams. It covers channel handlers, persistent runtime connections, Teams setup, and checks for silent failures such as missing permissions or incompatible package versions.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Customizing mention and reaction handlers
  • Adding a managed Channel to an existing project
  • Setting up a Microsoft Teams connection
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

Use the CopilotKit CLI to check app connections, credentials, and agent responses before investigating code. It also guides project creation, integration into existing apps, hosted project selection, typed agent identifier generation, and thread history imports.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Diagnosing CopilotKit connection and authentication failures
  • Creating a new CopilotKit project
  • Adding CopilotKit to an existing app
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

Keeps CopilotKit documentation aligned with released Inspector panels, the views shown in its local web overlay. It updates reader guidance and panel mappings when panels change, and checks quickstart instructions against supported platforms.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Add documentation guidance for a released Inspector panel
  • Update documentation after renaming or removing a panel
  • Check Inspector instructions in web quickstarts
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

Develop and debug CopilotKit Inspector interfaces in a dedicated local workbench. It guides baseline screenshots, visual checks after each change, and additional narrow-screen or theme checks when layout or contrast is involved.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Fixing Inspector panes and overlay controls
  • Checking narrow-screen layouts and the collapsed rail
  • Comparing light and dark theme appearance
CopilotKit/CopilotKit3.8만2026년 10월 17일 업데이트

CopilotKit의 스킬 모두 보기

이 스킬의 문제 신고