Interfaces GenerativasAvançado
Agente Canvas do Painel de IA
- OpenAI
- Gemini
Interfaces Generativas ·Avançado
Construtor de Aplicações MCP de IA
Sobre esta app
Descreva uma aplicação MCP no chat e obtenha uma instância ao vivo e isolada de volta.
- Código aberto completo
- Explicado em português
Ficha técnica
- Categoria
- Interfaces Generativas
- Dificuldade
- Avançado
- Modelos
- OpenAI
- Frameworks
- -
- Corre local?
- Precisa de APIs cloud
- Chaves necessárias
E2B_API_KEYOPENAI_API_KEY
Licença Apache-2.0 · conteúdo curado, traduzido e mantido pelo Doutor AI.
Tutorial completo
Descreve uma app MCP no chat e obtém uma instância sandbox ao vivo. Construído com CopilotKit, AG-UI, Mastra e sandboxes E2B.
Conceito Gen UI - apps geradas por agentes. A maioria das interfaces de utilizador generativas escolhe a partir de um catálogo fixo de componentes. Isto vai um passo além: o agente cria uma nova app MCP em tempo de execução, o construtor provisiona um sandbox E2B para a alojar, e a app é renderizada inline com acesso total a ferramentas bidireccionais. O "componente" que o agente emite é uma app inteira.
Este monorepo liga a interface web do MCP App builder (apps/web) a um agente Mastra (/api/mastra-agent) que provisiona sandboxes E2B a correr o template mcp-use-server (apps/mcp-use-server). Um exemplo local opcional é o exemplo MCP Three.js em apps/threejs-server (usado para definições de barra lateral ao executar tudo localmente).
https://github.com/user-attachments/assets/4bb35806-5e42-43c0-a8fe-01c0d1e5b8b3
Pré-requisitos
- Node.js 20+
- pnpm (necessário para o workspace)
- Chave de API OpenAI (
OPENAI_API_KEY); opcionalOPENAI_MODELpara/api/mastra-agent(padrãogpt-5.5)
Começar
A partir da raiz do projeto (generative_ui_agents/ai-mcp-app-builder):
pnpm i
Copy-Item .env.example .env
# Edit .env: set OPENAI_API_KEY=sk-proj-... at minimum; add E2B_* for sandbox provisioning (see below)
pnpm devpnpm dev executa Turbo e inicia as tarefas de workspace dev (a aplicação Next.js e outras aplicações configuradas - vê o package.json / turbo.json na raiz).
Executar peças individualmente
| Objetivo | Comando |
|---|---|
| Apenas aplicação web | pnpm --filter web dev (a partir da raiz do repositório) ou cd apps/web && pnpm dev |
| Exemplo MCP Three.js (sidebar local por defeito) | cd apps/threejs-server && pnpm dev |
mcp-use-server (MCP local, não a imagem E2B) | cd apps/mcp-use-server && pnpm dev |
Abre a URL mostrada pelo Next (geralmente http://localhost:3000).
UI MCP Dinâmica (sidebar)
- Servidores MCP: adicionar/remover por URL (+
serverIdopcional); a lista é enviada comox-mcp-servers. Padrão embutido: Excalidraw (https://mcp.excalidraw.com). Substitui através deNEXT_PUBLIC_DEFAULT_MCP_SERVERS/DEFAULT_MCP_SERVERS. - Ferramentas: lista compacta; abre uma ferramenta para detalhe + pré-visualização num modal (não uma terceira aba móvel).
- Chat: Chat CopilotKit v2 com sugestões.
Layout móvel
- Aba: Chat e Ferramentas (servidores + lista de ferramentas). A pré-visualização / detalhe da ferramenta abre num modal.
- Escritorio: sidebar + coluna de chat (
md+). - UX do Chat: espaçamento e preenchimento inferior para que o compositor não cubra as mensagens mais recentes.
Variáveis de ambiente (E2B)
| Variável | Descrição |
|---|---|
E2B_API_KEY | A partir de e2b.dev/dashboard |
E2B_TEMPLATE | templateId da saída de Template.build após build.dev.ts / build.prod.ts |
E2B_REPO_URL | Usado quando E2B_TEMPLATE está vazio - clona o repositório para o sandbox (arranque a frio mais lento). Padrão no código: mcp-use-server-template URL do GitHub |
Documentação
Entrada da UI: apps/web/app/page.tsx (tema, layout, ligação do CopilotKit).
Externo
Da mesma categoria
Interfaces GenerativasAvançado
Agente de Investigação Profunda de IA
Um assistente de investigação profunda que planeia, pesquisa na web, escreve num sistema de ficheiros virtual e apresenta cada chamada de ferramenta c…
- OpenAI
Interfaces GenerativasAvançado
Agente de Coaching Financeiro de IA
Um coach financeiro multi-agente que analisa o seu orçamento, planeia as suas poupanças e constrói estratégias de pagamento de dívidas - apresentadas …
- Gemini
Precisa de uma solução à medida?
Não sabe por onde começar a usar IA no seu negócio? Receba uma avaliação gratuita e um plano à medida - sem compromisso.
Poupe horas todas as semanas com IA, sem complicações
O Doutor AI dá-lhe 1859 prompts de IA prontos a copiar, por indústria e em português simples - mais uma biblioteca técnica completa para quem quer ir mais longe.
Ver planos