🧠 RAG vs MCP — Playground Interativo

Aprenda a diferença entre RAG e MCP na prática, com um playground funcional que usa a API real do Claude, ferramentas MCP executáveis e uma base de conhecimento editável.

---

✨ O que é este projeto?

Este é um playground educativo e funcional que demonstra, lado a lado, dois dos conceitos mais importantes da IA moderna:

	RAG	MCP
Sigla	Retrieval-Augmented Generation	Model Context Protocol
O que faz	Busca documentos antes de responder	Executa ferramentas externas em tempo real
Analogia	Memória externa	Mãos no mundo real
Quando usar	Bases de conhecimento privadas	Automação e agentes de IA

---

📚 Documentação Completa

Documento	Descrição
📖 Visão Geral e Arquitetura	Contexto, objetivos e diagrama de arquitetura
🔍 RAG — Deep Dive	Como funciona RAG linha a linha, fluxo e exemplos
🔌 MCP — Deep Dive	Como funciona MCP, ferramentas, ciclo de vida
📄 Walkthrough do Código	Explicação linha a linha do rag-mcp-playground.jsx
🚀 Como Usar	Passo a passo de instalação e uso
🛠 Troubleshooting	Problemas comuns e soluções
📈 Como Escalar	Evoluindo o projeto para produção
💡 Exemplos de Prompts	Prompts prontos para testar cada modo

---

⚡ Início Rápido

1. Clone o repositório

git clone https://github.com/OsmarZM/Rag-Mcp.git
cd Rag-Mcp

2. Use no Claude.ai

O arquivo rag-mcp-playground.jsx é um React Artifact pronto para rodar diretamente no Claude.ai:

1. Acesse claude.ai
2. Abra uma nova conversa
3. Cole o conteúdo de rag-mcp-playground.jsx e peça ao Claude para renderizar

3. Ou integre em seu projeto React

npm create vite@latest meu-playground -- --template react
cd meu-playground
npm install
# Substitua src/App.jsx pelo conteúdo de rag-mcp-playground.jsx
npm run dev

---

🏗 Estrutura do Projeto

Rag-Mcp/
├── README.md                     # Este arquivo
├── rag-mcp-playground.jsx        # Aplicação React principal
├── docs/
│   ├── rag_vs_mcp_v2.png        # Imagem do LinkedIn
│   ├── 01-overview.md           # Arquitetura e visão geral
│   ├── 02-rag-deep-dive.md      # RAG em profundidade
│   ├── 03-mcp-deep-dive.md      # MCP em profundidade
│   ├── 04-code-walkthrough.md   # Código linha a linha
│   ├── 05-how-to-use.md         # Como usar
│   ├── 06-troubleshooting.md    # Resolução de problemas
│   └── 07-scaling.md            # Como escalar
└── examples/
    └── prompts.md               # Exemplos de prompts

---

🧩 Tecnologias

• React — Interface do playground
• Anthropic Claude API — Modelo de linguagem (claude-sonnet-4-20250514)
• RAG customizado — Tokenização + scoring TF sem dependências externas
• MCP simulado — 5 ferramentas: datetime, calculadora, clima, busca, filesystem

---

📖 Conceitos Demonstrados

RAG em ação

Pergunta do usuário
       ↓
 Tokenização + Scoring
       ↓
 Recupera docs relevantes da KB
       ↓
 Injeta contexto no prompt do Claude
       ↓
 Resposta fundamentada nos documentos

MCP em ação

Pergunta do usuário
       ↓
 Claude decide quais tools usar
       ↓
 Executa tool_use → recebe tool_result
       ↓
 Repete se necessário (multi-turn)
       ↓
 Resposta final sintetizada

---

🤝 Contribuindo

Pull requests são bem-vindos! Veja Como Escalar para ideias de features.

---

📝 Licença

MIT — use, modifique e compartilhe livremente.

---

Criado para demonstrar RAG e MCP de forma prática e educativa.
LinkedIn: Osmar ZM