MCP Messenger

Como n8n para desenvolvedores

GitHub
3
Experimente este MCPPatrocinado

Documentação

SlashMCP

License: MIT TypeScript React Vite

Espaço de trabalho de IA com tecnologia MCP para inteligência documental, orquestração multiagente e gerenciamento dinâmico de servidores MCP.

Demonstração ao vivo: slashmcp.vercel.app | Repositório: github.com/mcpmessenger/slashmcp

  • 🚀 Registro Dinâmico de Servidores MCP - Gerencie e invoque servidores Model Context Protocol a partir da interface de chat
  • 📄 Inteligência Documental - Uploads por arrastar e soltar com OCR via AWS Textract e análise de visão via GPT‑4o
  • 📊 Dados Financeiros - Cotações de ações, gráficos e dados de mercados de previsão por meio de servidores MCP integrados
  • 🤖 Framework Multiagente - Orquestre múltiplos agentes de IA com acesso padronizado a ferramentas MCP
  • 🔄 Troca de LLM - Alterne facilmente entre provedores OpenAI, Anthropic e Gemini em tempo de execução

Repositório do projeto: https://github.com/mcpmessenger/slashmcp

Resumo

  • Frontend: Vite + React + TypeScript + Tailwind + shadcn/ui
  • Estado e Dados: TanStack Query, Supabase client
  • Workers / Integrações: Supabase Edge Functions (uploads, vision-worker, textract-worker, chat, job-status)
  • Serviços em Nuvem: AWS S3 + Textract, OpenAI GPT‑4o, Google Gemini (fallback), Supabase Postgres
  • Armazenamento: bucket S3 arn:aws:s3:::tubbyai-products-catalog
  • Gerenciamento de ambiente: .env para Vite, segredos de função Supabase para chaves de serviço

Começando

Pré-requisitos

  • Node.js ≥ 18.18 (recomenda-se usar nvm)
  • npm ≥ 9 ou pnpm/bun se preferir (o projeto está atualmente travado no npm)
  • Supabase CLI (npm install -g supabase ou npx supabase)
  • Credenciais AWS com acesso ao Textract + bucket S3 acima
  • Chave de API OpenAI (visão GPT‑4o)
  • Opcional: chave Google Generative AI (para fallback do Gemini), chaves Whisper / Google Cloud TTS para recursos futuros

Configuração

git clone https://github.com/mcpmessenger/slashmcp.git
cd slashmcp
npm install

Crie .env.local (o Vite carrega automaticamente as variáveis VITE_*):

Configuração rápida: Copie .env.local.example para .env.local e preencha seus valores.

Configuração manual: Crie .env.local com:

VITE_SUPABASE_URL=https://<your-supabase-ref>.supabase.co
VITE_SUPABASE_FUNCTIONS_URL=https://<your-supabase-ref>.supabase.co/functions/v1
VITE_SUPABASE_PUBLISHABLE_KEY=<supabase-anon-key>
VITE_ALPHA_VANTAGE_API_KEY=<alpha-vantage-key>
VITE_MCP_GATEWAY_URL=http://localhost:8989/invoke # MCP gateway proxy endpoint
VITE_SUPABASE_REDIRECT_URL=http://localhost:8080          # OAuth redirect URL (local dev)
# For production: Set VITE_SUPABASE_REDIRECT_URL to your production domain in Vercel env vars
TWELVEDATA_API_KEY=<twelve-data-key>                # optional fallback provider
ALPHAVANTAGE_CACHE_TTL_MS=300000 # optional Supabase function cache TTL (5 min)
POLYMARKET_CACHE_TTL_MS=120000   # optional cache window for Polymarket lookups

Nota: Consulte LOCAL_SETUP.md para configuração detalhada de desenvolvimento local, incluindo configuração de CORS do S3 para uploads de arquivos.

Configure os segredos da Supabase Edge Function (uma vez por projeto):

npx supabase secrets set \
  --project-ref <supabase-ref> \
  PROJECT_URL=https://<your-supabase-ref>.supabase.co \
  SERVICE_ROLE_KEY=<supabase-service-role-key> \
  OPENAI_API_KEY=<openai-key> \
  GEMINI_API_KEY=<optional-gemini-key> \
  GEMINI_IMAGE_MODEL=gemini-2.5-flash-image \
  ALPHAVANTAGE_API_KEY=<alpha-vantage-key> \
  TWELVEDATA_API_KEY=<twelve-data-key> \
  ALPHAVANTAGE_CACHE_TTL_MS=300000 \
  POLYMARKET_CACHE_TTL_MS=120000 \
  GOOGLE_CLIENT_ID=<google-oauth-client-id> \
  GOOGLE_CLIENT_SECRET=<google-oauth-client-secret> \
  AWS_REGION=<aws-region> \
  AWS_ACCESS_KEY_ID=<aws-access-key> \
  AWS_SECRET_ACCESS_KEY=<aws-secret> \
  AWS_SESSION_TOKEN=<optional-session-token> \
  AWS_S3_BUCKET=tubbyai-products-catalog

Sirva o aplicativo de desenvolvimento junto com as funções Supabase:

npm run dev             # Vite dev server
npx supabase functions serve --env-file supabase/.env # optional local function emulation

Principais Recursos e Fluxo

  1. Upload e Acompanhamento de Trabalhos

    • src/components/ui/chat-input.tsx controla as ações do menu (Upload de Arquivos, Análise de Documentos, OCR de Imagens, Assistente de Voz).
    • O frontend chama supabase/functions/uploads para criar uma linha processing_jobs e receber uma URL PUT pré-assinada do S3.
    • O progresso do upload é exibido na interface; as transições de status processing_jobs são verificadas via função job-status.

  2. Análise de Visão

    • vision-worker busca o ativo enviado do S3 via GET pré-assinado, envia para GPT‑4o (com prompt estruturado em JSON) e persiste os resultados em analysis_results.
    • Existem auxiliares de fallback do Gemini que podem ser reativados se desejado.

  3. Textract OCR

    • textract-worker usa AWS Textract (síncrono para imagens, assíncrono para PDFs) e armazena o texto do OCR + resposta bruta.
    • O frontend lida com erros do Textract de forma graciosa (ex.: "Nenhum texto detectado") e recorre ao resumo de visão.

  4. Esquema Supabase

    • A migração supabase/migrations/20250108120000_create_processing_jobs.sql provisiona:
      • processing_jobs: metadados para cada upload
      • analysis_results: saídas de OCR + visão (garanta que a migração seja executada no projeto Supabase)
      • O índice único analysis_results_job_id_unique é necessário para upserts onConflict: "job_id"

  5. Estrutura Futura

    • Existem hooks e opções de menu para pipelines de Whisper ASR e Google TTS.
    • Prompts em linguagem natural (ou /imagine <prompt>) passam por supabase/functions/image-generator, que agora visa o modelo Gemini 2.5 Flash Image ("Nano Banana") para geração.

  6. Cotações e Gráficos de Ações

    • Digite /quote AAPL, /stock MSFT 3m ou /ticker NVDA 1y no campo de chat para buscar dados da Alpha Vantage.
    • O assistente renderiza um cartão de preço com gráfico de tendência diária, métricas de variação e estatísticas principais.
    • O suporte a endpoint MCP está estruturado para que /alphavantage-mcp get_stock_chart symbol=NVDA use o mesmo pipeline de renderização (função edge Supabase mcp).
    • As cotações são armazenadas em cache por 5 minutos e automaticamente recorrem ao Twelve Data (se TWELVEDATA_API_KEY estiver definido) quando a Alpha Vantage atinge limites premium/rate.

  7. Mercados de Previsão

    • Use /polymarket-mcp get_market_price market_id=us_election_2024 para obter odds ao vivo da Polymarket via função Supabase mcp.
    • As respostas incluem melhor bid/ask, probabilidade implícita, liquidez e são armazenadas em cache por 2 minutos (configurável via POLYMARKET_CACHE_TTL_MS).

  8. Troca de Provedor

    • Use /model openai, /model anthropic ou /model gemini para alternar o LLM de suporte em tempo de execução (padrão: OpenAI).
    • Variáveis de ambiente e segredos de função Supabase (OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY) devem ser configurados para cada provedor que você planeja usar.

  9. Comandos Slash MCP e Registro

    • Autentique-se via botão de login no cabeçalho (Google OAuth) ou pelo comando de chat alternativo /slashmcp login email=user@example.com password=secret.
    • Depois de autenticado, gerencie servidores com /slashmcp list, /slashmcp add <name> <https://gateway> (mais parâmetros opcionais auth=/key=) e /slashmcp remove <name|serverId>.
    • Atalhos de provedor como /gemini ou /playwright mapeiam para predefinições e solicitam quaisquer segredos necessários.
    • Detectores de linguagem natural roteiam perguntas comuns sobre ações e Polymarket para o servidor MCP apropriado automaticamente quando disponível.
    • Registros dinâmicos são armazenados por usuário no Supabase (tabela mcp_servers) e proxy através de novas edge functions (mcp-register, mcp-get-registry, mcp-remove, mcp-proxy).

Scripts Disponíveis

ComandoDescrição
npm run devIniciar servidor de desenvolvimento Vite
npm run buildBuild de produção
npm run build:devBuild em modo de desenvolvimento (útil para staging)
npm run previewPré-visualizar assets compilados
npm run lintESLint em todo o projeto

As Supabase Edge Functions podem ser implantadas com:

npx supabase functions deploy <function-name> --project-ref <ref>

Destaques do Diretório

  • src/components — Página inicial e componentes de UI (Hero, Features, Architecture, CTA).
  • src/components/ui — Wrappers shadcn/ui.
  • src/lib/api.ts — Cliente de API do frontend (uploads, Textract, visão).
  • supabase/functions/* — Edge functions para uploads, status de trabalho, Textract, visão GPT e chat.
  • supabase/functions/_shared/database.types.ts — Tipagens Supabase geradas compartilhadas entre funções.
  • supabase/migrations — Esquema de banco de dados para rastreamento de trabalhos + resultados de análise.

Notas de Implantação

  • Garanta que as migrações Supabase tenham sido aplicadas (colunas de visão analysis_results e índice único).
  • Configure o CORS do S3 para permitir suas origens e métodos de dev/prod (GET,PUT,POST,HEAD).
  • Ao implantar em novos ambientes, rotacione e preencha os segredos das funções Supabase antes de invocar workers de upload/visão.
  • Síntese de voz (Whisper, Google TTS) ainda requer segredos adicionais; a geração de imagens Gemini espera GEMINI_API_KEY (e opcionalmente GEMINI_IMAGE_MODEL se você substituir o gemini-2.5-flash-image padrão). Os assets de favicon e logo agora ficam em public/Untitled design.svg e public/Untitled design (12/14).png.
  • O gateway MCP deve expor um único endpoint /invoke compatível com o payload JSON emitido por src/lib/mcp/client.ts.

Segurança e Manutenção

  • Execute npm audit (ou npm audit --omit=dev) regularmente; veja a seção "Security Scan" abaixo.
  • Restrinja o uso da chave de função de serviço Supabase apenas a contextos do lado do servidor; nunca a exponha ao navegador.
  • Use funções IAM da AWS com acesso de privilégio mínimo ao Textract e ao bucket S3 específico.
  • Considere configurar políticas de Row Level Security do Supabase se o suporte multi-tenant for necessário.

Roadmap / TODO

  • Conectar o pipeline de transcrição Whisper com edge worker Supabase + atualizações de status de fila.
  • Integrar Google Cloud Text-to-Speech para respostas de voz.
  • Reativar o fallback do Gemini com seleção de provedor configurável e rastreamento de custos.
  • Adicionar testes automatizados (Cypress/Playwright) para o fluxo de upload + análise.
  • Reforçar o RLS do Supabase e adicionar autenticação quando contas de usuário forem introduzidas.

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para enviar um Pull Request. Para mudanças significativas, abra uma issue primeiro para discutir o que você gostaria de alterar.

  1. Faça um fork do repositório
  2. Crie sua branch de feature (git checkout -b feature/AmazingFeature)
  3. Faça commit das suas alterações (git commit -m 'Add some AmazingFeature')
  4. Envie para a branch (git push origin feature/AmazingFeature)
  5. Abra um Pull Request

Licença

Este projeto é licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

Feito com ❤️ pela equipe SlashMCP