# Construtor de Aplicações MCP de IA

> Descreva uma aplicação MCP no chat e obtenha uma instância ao vivo e isolada de volta.

- Fonte: https://doutorai.pt/apps/ai-mcp-app-builder
- Categoria: Interfaces Generativas
- Dificuldade: Avançado
- Modelos: OpenAI
- Frameworks: -
- Corre local?: Precisa de APIs cloud
- Chaves necessárias: E2B_API_KEY, OPENAI_API_KEY
- Licença: Apache-2.0
- Site: Doutor AI (https://doutorai.pt) - ferramentas de IA para pequenos negócios em português

## Tutorial completo

# AI MCP App Builder

Descreve uma app MCP no chat e obtém uma instância sandbox ao vivo. Construído com [CopilotKit](https://github.com/CopilotKit/CopilotKit), [AG-UI](https://github.com/ag-ui-protocol/ag-ui), [Mastra](https://mastra.ai/) 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](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/threejs-server) 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](https://pnpm.io/installation) (necessário para o workspace)
- Chave de API OpenAI (`OPENAI_API_KEY`); opcional **`OPENAI_MODEL`** para `/api/mastra-agent` (padrão **`gpt-5.5`**)

## Começar

A partir da raiz do projeto (`generative_ui_agents/ai-mcp-app-builder`):

```powershell
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 dev
```

**`pnpm 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 (+ `serverId` opcional); a lista é enviada como **`x-mcp-servers`**. Padrão embutido: **Excalidraw** (`https://mcp.excalidraw.com`). Substitui através de **`NEXT_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](https://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**

- [CopilotKit](https://docs.copilotkit.ai)
- [Next.js](https://nextjs.org/docs)
- [Aplicações MCP / UI](https://mcpui.dev/guide/introduction)

## 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 →](https://doutorai.pt/precos)

---
Conteúdo de Doutor AI (https://doutorai.pt). Ao citar, indique a fonte: https://doutorai.pt/apps/ai-mcp-app-builder