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.
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
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.
// 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>;
}
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents communicate with frontends. Covers event types, SSE transport, AbstractAgent/HttpAgent patterns, state synchronization, tool calls, and human-in-the-loop flows.
The English summary is being prepared. Showing the original description.
Use when contributing to the CopilotKit open-source project — forking, cloning, setting up the monorepo, creating branches, running tests, and submitting pull requests against CopilotKit/CopilotKit.
The English summary is being prepared. Showing the original description.
Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription failures, version mismatches, and AG-UI event tracing.
The English summary is being prepared. Showing the original description.
Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents, handling agent interrupts, and working with the CopilotKit runtime.
The English summary is being prepared. Showing the original description.
Use when wiring an external agent framework (LangGraph, CrewAI, PydanticAI, Mastra, ADK, LlamaIndex, Agno, Strands, Microsoft Agent Framework, or others) into a CopilotKit application via the AG-UI protocol.
The English summary is being prepared. Showing the original description.
Use when the user wants to update, refresh, or reinstall the CopilotKit agent SKILLS (the SKILL.md files that teach this agent about CopilotKit). NOT for updating the CopilotKit codebase or project — this is specifically about refreshing the skills/knowledge this agent has loaded. Triggers on "update copilotkit skills", "update skills", "refresh skills", "skills are stale", "skills are outdated", "get latest skills", "my copilotkit knowledge is wrong", "copilotkit APIs changed", "skills seem old", "wrong API names", "reinstall skills", "skills not working right", "update your copilotkit knowledge".
The English summary is being prepared. Showing the original description.