Chapter Frontend MCP

Servidor MCP (Model Context Protocol) usado no Chapter de Frontend como exemplo. Duas tools: hello-world (saudação) e frontend-validate-code (valida código frontend, por enquanto só checa se <img> tem alt).

Requisitos: Node.js 20+, yarn ou npm.

yarn install

O gancho: simple-mcp.js

O capítulo começa com o simple-mcp.js: sem plugin, “Que horas são?” não vira hora real, com a tool getCurrentTime, a LLM chama a função e responde certo. É o gancho para falar que MCP é tipo uma extensão, a IA deixa de depender só do texto e ganha acesso a dados, APIs, validação, etc.

Para rodar: .env com OPENAI_API_KEY, depois yarn simple (ou node src/simple-mcp.js).

Rodar com MCP Inspector

Para testar as tools sem configurar o Cursor:

yarn dev

Isso abre o MCP Inspector — você pode chamar hello-world e frontend-validate-code e ver as respostas.

Configurar no Cursor / VS Code

Adicione o servidor na configuração de MCP (Settings → MCP ou arquivo de config). Ajuste os caminhos para o seu clone:

{
  "mcpServers": {
    "chapter-frontend": {
      "command": "/caminho/para/chapter-frontend-mcp/node_modules/.bin/tsx",
      "args": ["/caminho/para/chapter-frontend-mcp/src/main.ts"]
    }
  }
}

Reinicie ou recarregue a config, o assistente passa a usar as tools no chat.