Executando verificação de segurança...
0
felipebarcelospro
7 min de leitura ·

🚀 Igniter.js + MCP Server: A Busca Por Resolver o Problema Real do Vibe Coding

Fala, Dev! 👋 Felipe Barcelos aqui.

Já tentou pedir para o Cursor criar um controller e ele gerou código que não segue a arquitetura do seu projeto? Ou quando você pede para implementar uma feature e ele não entende suas convenções de nomenclatura?

Eu passei por isso várias vezes. E foi essa frustração diária que me fez criar uma solução que resolve o problema de verdade.

🎯 O Problema Real

Code Agents como Cursor, Claude Code e VS Code Copilot são ferramentas incríveis, mas têm uma limitação prática:

Eles não conhecem seu projeto.

Quando você pede para o AI criar algo, ele gera código genérico que:

  • Não segue sua estrutura de pastas
  • Não usa suas convenções de nomenclatura
  • Não integra com seu banco de dados
  • Não segue seu fluxo de validação

Resultado: Você passa mais tempo corrigindo código do que desenvolvendo.

💡 A Solução Prática

Depois de meses testando e iterando, criei algo que resolve esse problema:

O Igniter.js agora vem com um MCP Server built-in que dá contexto real para os Code Agents.

O que é Igniter.js?

Para quem não conhece, o Igniter.js é um framework TypeScript que criei para resolver os problemas reais de desenvolvimento de APIs. Se você acompanha meus artigos aqui no TabNews, já deve ter visto:

A ideia é simples: um framework que já vem com as melhores práticas implementadas, eliminando a necessidade de você configurar tudo do zero a cada projeto.

O que é MCP Server?

MCP (Model Context Protocol) é um padrão que permite que LLMs acessem sistemas externos. Em termos práticos, é como um pendrive que amplia as capacidades do agente de AI com novas ferramentas para ele usar.

O diferencial do Igniter.js é que cada starter template já vem configurado para funcionar com qualquer Code Agent.

🔧 Como Funciona na Prática

Vou mostrar a diferença real:

Antes (Code Agent Genérico):

Você: "Cria um endpoint para listar usuários"
AI: "Claro! Aqui está um endpoint básico..."

// Gera código genérico que não segue suas convenções
// Não sabe sobre sua estrutura de pastas
// Não conhece suas validações
// Não entende sua arquitetura

Agora (Code Agent + Igniter.js MCP Server):

Você: "Cria um endpoint para listar usuários"
Lia (nossa AI especializada): "Perfeito! Vou criar seguindo a arquitetura Igniter.js..."

// Analisa automaticamente a estrutura do projeto
// Utiliza a tool de generateFeature
// Implementa validações consistentes
// Integra com seu banco de dados
// Segue o padrão de nomenclatura do projeto

🎯 Casos de Uso Reais

Cenário 1: Criando uma Nova Feature

Você: "Preciso de um sistema de notificações para usuários"
Lia: "Vou analisar o projeto e criar tudo seguindo a arquitetura Igniter.js..."

// Resultado: Sistema completo com controllers, procedures, validações
// Tudo seguindo as convenções do seu projeto
// Integrado com o banco de dados existente

Cenário 2: Refatorando Código

Você: "Refatora esse controller para usar as novas convenções"
Lia: "Analisando o código atual e aplicando as novas convenções..."

// Resultado: Código refatorado mantendo funcionalidade
// Seguindo as melhores práticas do Igniter.js
// Com validações e tratamento de erros atualizados

🛠️ O que o MCP Server Faz

O MCP Server do Igniter.js fornece ferramentas específicas para:

1. Análise de Projeto

  • Entende a estrutura de pastas
  • Conhece as convenções de nomenclatura
  • Identifica padrões arquiteturais

2. Geração Inteligente

  • Cria controllers seguindo suas convenções
  • Implementa validações consistentes
  • Gera procedures para o banco de dados
  • Mantém a consistência do código

3. Execução de Comandos

  • Inicia servidores de desenvolvimento
  • Executa builds e testes
  • Gerencia dependências
  • Monitora logs em tempo real

🚀 Capacidades Reais do MCP Server

Desenvolvimento e Scaffolding:

  • Gerar Feature Completa - Cria módulos completos (ex: sistema de usuários, produtos, billing)
  • Gerar Controller - Scaffold de controllers específicos (ex: profile, settings, admin)
  • Gerar Procedure - Middleware reutilizável (ex: autenticação, validação de roles)
  • Gerar Schema - Geração automática de clientes type-safe e documentação OpenAPI

Gestão de Projeto:

  • Iniciar Servidor Dev - Inicia servidor com live reload e geração automática de clientes
  • Build do Projeto - Build de produção com otimizações
  • Executar Testes - Execução de testes com filtros específicos por pacote

Análise de Código:

  • Analisar Arquivo - Análise completa de estrutura, imports, exports e erros TypeScript
  • Analisar Feature - Análise abrangente de implementação incluindo arquivos, estrutura e endpoints
  • Explorar Código Fonte - Análise detalhada de símbolos específicos e contexto
  • Encontrar Implementação - Localiza onde símbolos (funções, classes, tipos) estão implementados
  • Rastrear Dependências - Mapeia cadeia de dependências entre módulos

Validação e Testes de API:

  • Obter Especificação OpenAPI - Recupera especificação OpenAPI em tempo real
  • Fazer Requisição API - Testa endpoints HTTP com diferentes métodos e payloads
  • Validar Resposta API - Valida respostas contra schemas definidos

Sistema de Memória Inteligente:

  • Armazenar Memória - Armazena conhecimento em arquivos MDX organizados
  • Buscar Memórias - Busca por tags, tipo ou conteúdo específico
  • Relacionar Memórias - Cria relacionamentos entre diferentes conhecimentos
  • Obter Memória por ID - Recupera memória específica por identificador
  • Atualizar Memória - Modifica memórias existentes com novos dados

Gestão de Tarefas:

  • Listar Tarefas - Lista e filtra tarefas por status, prioridade ou responsável
  • Criar Tarefa - Cria novas tarefas com prioridade, estimativas e dependências
  • Atualizar Status da Tarefa - Atualiza progresso e rastreia tempo de conclusão
  • Obter Tarefa por ID - Recupera detalhes específicos de uma tarefa
  • Deletar Tarefa - Remove tarefas concluídas ou canceladas

Integração com GitHub:

  • Buscar Issues GitHub - Busca issues por labels, estado ou texto
  • Criar Issue GitHub - Cria issues automaticamente com labels e assignees
  • Obter Informações do Repositório - Informações sobre repositórios e branches

Acesso a Documentação:

  • Obter Documentação - Busca documentação de Igniter.js, Next.js, React, TypeScript
  • Documentação Customizada - Acesso a URLs personalizadas de documentação

Delegação para Agentes Especializados:

  • Delegar para Agente - Delega tarefas complexas para agentes especializados
  • Verificar Status da Delegação - Monitora progresso de tarefas em background
  • Listar Delegações Ativas - Lista todas as delegações ativas
  • Cancelar Delegação - Interrompe tarefas em execução
  • Obter Logs de Execução - Acessa logs detalhados de execução

Ferramentas de Execução:

  • Verificar Ambiente do Agente - Valida configuração e dependências
  • Gerar Comandos de Setup - Cria comandos para configurar ambiente de execução

🚀 Como Configurar

Passo 1: Criar um Novo Projeto

npx @igniter-js/cli init
cd my-ai-project

Passo 2: Configurar o MCP Server

O projeto já vem com tudo configurado! Apenas adicione no seu Cursor:

// .cursor/mcp.json
{
  "mcpServers": {
    "igniter": {
      "command": "npx",
      "args": ["@igniter-js/mcp-server"]
    }
  }
}

Passo 3: Pronto!

Agora o Cursor (ou qualquer Code Agent) já conhece seu projeto.

💡 Benefícios Reais

Imediatos:

  • Desenvolvimento mais rápido com AI que entende seu projeto
  • Código consistente seguindo suas convenções
  • Menos refatoração e mais desenvolvimento
  • Integração perfeita entre AI e seu workflow

A Longo Prazo:

  • Onboarding mais rápido para novos devs da equipe
  • Manutenção simplificada com padrões consistentes
  • Escalabilidade sem perder qualidade
  • Documentação viva através do código gerado

🎯 Quem Deve Usar

Perfeito para:

  • Desenvolvedores solo que querem acelerar o desenvolvimento
  • Equipes pequenas que precisam de consistência
  • Startups que não podem perder tempo com configurações
  • Projetos open source que querem facilitar contribuições

Talvez não seja para:

  • Projetos muito simples (pode ser overkill)
  • Equipes que preferem fazer tudo manualmente
  • Projetos com arquiteturas muito específicas (ainda)

🚀 Como Testar

Opção 1: Projeto Novo

npx @igniter-js/cli init test-mcp
cd test-mcp
npm run dev

Opção 2: Projeto Existente

npm install @igniter-js/mcp-server
# Configure o mcp.json conforme mostrado acima

💭 Minha Jornada

Desenvolver essa integração não foi fácil. Passei meses:

  • Estudando o protocolo MCP
  • Testando com diferentes Code Agents
  • Criando regras personalizadas para cada tipo de projeto
  • Validando com a comunidade

Mas o resultado valeu cada minuto. Ver um Code Agent entender perfeitamente um projeto Igniter.js é mágico.

🔮 O Futuro

Esta é apenas a primeira versão. Já estou trabalhando em:

  • Mais ferramentas para o MCP Server
  • Integração com mais Code Agents
  • Templates especializados para diferentes tipos de projeto
  • Comunidade open source para expandir as capacidades

🎯 Call to Action

Quer experimentar o futuro do desenvolvimento com AI?

  1. Teste agora: npx @igniter-js/cli init my-project
  2. Configure o MCP Server (já vem pronto)
  3. Veja a mágica acontecer com qualquer Code Agent

Links Úteis:

💬 Sua Vez!

Já testou o Igniter.js com MCP Server? Me conta nos comentários como foi sua experiência!

Tem alguma dúvida sobre como configurar ou usar? Estou aqui para ajudar!

Quer ver alguma funcionalidade específica sendo implementada? Me fala que eu mostro em tempo real!

Felipe Barcelos
Criador do Igniter.js e apaixonado por desenvolvimento com AI
Building in Public desde 2022 🚀

PS: Se esse artigo te ajudou, compartilha com outros devs que também querem acelerar o desenvolvimento com AI! 🚀

Carregando publicação patrocinada...
2
eduardobier

Opa, boa noite. Você consegue resolver isso, instruindo ele no prompt as primeiras vezes, pedindo para ele analisar a estrutura do projeto. Tenho um app complexo, feito em sveltekit com parse server em backend, uma arquitetura bem legal. Eu praticamente não escrevo mais código, o cursor cria tudo pra mim, exatamente no padrão do meu projeto.

1
dealmeida

boa noite, sr.

o backend é do sveltekit?
eu tenho preferido o sveltekit para front-end (o que não abre mão das apis de ssr, server-side calls, e content loading) e nestjs para backend.

não encontrei uma comunidade ativa para o sveltekit, ainda. na ong em que eu trabalho, tenho trazido tópicos de TICs apresentando system design, software arch, computer arch, network, eng, outros fundamentos; e tópicos dev apresentando sveltekit e nestjs. é muito mais fácil para ensinar o sveltekit, pois sobra tempo para essas outros tópicos mais importantes do que dev, de fato. uma pena não existir uma comunidade dedicada, em meu conhecimento.

1
rogerc

Eu resolvo esse problema deixando baixo acoplamento e usando arquiteturas já conhecidas. A IA não precisa conhecer meu código, ela precisa conhecer minhas interfaces.

O problema é o código espaguete, a IA naturalmente cria código assim e se não forçar o desacoplamento, você terá sempre que trazer cada vez mais código para o contexto gerando cada vez mais alucinação. Esse é um dos motivos do vibe coding não resolver problemas complexos.