無料GitHub で公開

chatgpt-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.

CopilotKit/CopilotKit

インストール方法を見る

含まれるファイル（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>;
}

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

channels-setup

無料

Use when a developer wants to build their first CopilotKit Channels agent and get it answering in Slack or Microsoft Teams: "set up a channel", "connect my agent to Slack", "get my agent into Teams", or starting from nothing and wanting a working channel end to end. Covers the whole path: inspecting or scaffolding the project, building the AG-UI agent, creating and reconciling the managed Channel with the public CopilotKit CLI, running the long-running host, and proving a real provider mention gets a reply. The workflow is not in this file. Run `npx --yes copilotkit@latest onboard start` and follow the graph it prints.

日本語の概要は準備中です。原文の説明を表示しています。