ChatGPT App Builder
Construa aplicativos ChatGPT com widgets interativos usando mcp-use. Desenvolvimento de widgets com configuração zero, registro automático e hooks React integrados.
O aplicativo é consumido por dois usuários ao mesmo tempo: o humano e o LLM do ChatGPT. Eles colaboram através do widget — o humano interage com ele, o LLM vê seu estado. O widget é sua superfície compartilhada.
Antes de Codificar
- Esclareça o que construir → discover.md: ao iniciar um novo aplicativo, validar uma ideia ou escopar funcionalidades
- Projete ferramentas e widgets → architecture.md: ao decidir o que precisa de IU vs. apenas ferramentas, projetar fluxos de UX
Configuração
- Estrutura e execução → setup.md: ao criar um novo projeto, iniciar servidor de desenvolvimento, conectar-se ao ChatGPT/Claude
Implementação
- Handlers do servidor + criação de widgets → server-and-widgets.md: ao escrever server.tool() com widgets, helper widget(), arquivos de widget React
- Estado do widget e contexto do LLM → state-and-context.md: ao persistir estado, acionar LLM a partir do widget, gerenciar dados efêmeros vs. persistentes
- Modos de exibição, tema, layout → ui-guidelines.md: ao adaptar para inline/tela cheia/PiP, lidar com tema, dispositivo, localidade
- API de componentes → components-api.md: ao usar McpUseProvider, Image, ErrorBoundary, useWidget
- CSP e metadados → csp-and-metadata.md: ao configurar domínios externos, metadados de protocolo duplo
- Padrões avançados → widget-patterns.md: ao construir widgets complexos com chamadas de ferramenta, estado, temas
Referência Rápida
// Servidor
import { MCPServer, widget, text, object } from "mcp-use/server";
server.tool({ name: "...", schema: z.object({...}), widget: { name: "nome-do-widget" } },
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>Carregando...</div></McpUseProvider>;
return <McpUseProvider autoSize><div>{/* IU */}</div></McpUseProvider>;
}