NALU/src/Nalu.Web/Pages/Docs/Mcp.cshtml

@page "/docs/mcp"
@model Nalu.Web.Pages.Docs.McpModel
@{
    ViewData["Title"] = "MCP Server — NaLU AI Docs";
    ViewData["Description"] = "Integre NaLU AI com Claude Desktop, Claude Code e qualquer cliente MCP via stdio.";
}

<section class="bg-gradient-to-b from-slate-50 to-white pt-16 pb-8">
    <div class="max-w-3xl mx-auto px-4 sm:px-6">
        <div class="text-xs font-semibold text-nalu-600 uppercase tracking-wide mb-3">
            <a href="/docs" class="hover:underline">Docs</a> / MCP Server
        </div>
        <h1 class="text-3xl font-extrabold text-gray-900 mb-2">MCP Server</h1>
        <p class="text-gray-500">Use os validadores NaLU como ferramentas nativas no Claude Desktop, Claude Code e qualquer cliente MCP.</p>
    </div>
</section>

<section class="py-10 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 space-y-10">

        <!-- O que é MCP -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-2">O que é MCP?</h2>
            <p class="text-sm text-gray-600">
                Model Context Protocol (MCP) é um protocolo aberto que permite agentes de IA chamarem ferramentas externas de forma padronizada.
                O servidor MCP da NaLU AI roda localmente via <code class="bg-slate-100 px-1 rounded text-xs">stdio</code> e chama a API REST da NaLU — sem expor sua chave via rede.
            </p>
        </div>

        <!-- Pré-requisitos -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Pré-requisitos</h2>
            <ul class="text-sm text-gray-600 list-disc list-inside space-y-1">
                <li><a href="https://nodejs.org" class="text-nalu-600 hover:underline">Node.js 18+</a></li>
                <li>Uma API key NaLU — obtenha em <a href="/dashboard" class="text-nalu-600 hover:underline">Dashboard → API Keys</a></li>
            </ul>
        </div>

        <!-- Instalação -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Instalação</h2>
            <p class="text-sm text-gray-600 mb-3">Clone ou baixe o servidor MCP e instale as dependências:</p>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300 overflow-x-auto">
<pre># Baixar o servidor
git clone https://git.naluai.dev/nalu-mcp.git
cd nalu-mcp

# Instalar dependências
npm install</pre>
            </div>
        </div>

        <!-- Claude Desktop -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configurar no Claude Desktop</h2>
            <p class="text-sm text-gray-600 mb-3">
                Edite <code class="bg-slate-100 px-1 rounded text-xs">%APPDATA%\Claude\claude_desktop_config.json</code> (Windows)
                ou <code class="bg-slate-100 px-1 rounded text-xs">~/Library/Application Support/Claude/claude_desktop_config.json</code> (macOS):
            </p>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>{
  "mcpServers": {
    "nalu": {
      "command": "node",
      "args": ["/caminho/para/nalu-mcp/index.mjs"],
      "env": {
        "NALU_API_KEY": "SUA_API_KEY"
      }
    }
  }
}</pre>
            </div>
            <p class="text-xs text-gray-500 mt-2">Reinicie o Claude Desktop após salvar. Os validadores aparecem automaticamente como ferramentas disponíveis.</p>
        </div>

        <!-- Claude Code -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configurar no Claude Code (CLI)</h2>
            <div class="bg-slate-900 rounded-xl p-5 font-mono text-sm text-slate-300 overflow-x-auto leading-relaxed">
<pre>claude mcp add nalu \
  --command node \
  --args "/caminho/para/nalu-mcp/index.mjs" \
  --env NALU_API_KEY=SUA_API_KEY</pre>
            </div>
        </div>

        <!-- Ferramentas disponíveis -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Ferramentas disponíveis</h2>
            <p class="text-sm text-gray-600 mb-3">Após conectar, o agente enxerga estas ferramentas:</p>
            <div class="bg-white border border-gray-100 rounded-xl overflow-hidden">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Ferramenta</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Descrição</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Créditos</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50 text-xs">
                        @foreach (var t in new[] {
                            ("extract_name",          "Extrai nome completo do diálogo",                    "2"),
                            ("extract_email",         "Extrai email com correção de typos",                 "1"),
                            ("extract_yes_no",        "Detecta sim/não em linguagem natural",               "2"),
                            ("extract_birthdate",     "Extrai data de nascimento, calcula idade",           "2"),
                            ("extract_postal_code",   "Código postal internacional (exceto Brasil)",        "1"),
                            ("extract_company_name",  "Extrai nome de empresa (LTDA, S/A, LLC...)",         "2"),
                            ("detect_handoff",        "Detecta intenção de falar com humano",               "2"),
                            ("detect_cancel_intent",  "Classifica intenção de cancelamento",                "2"),
                            ("analyze_reply",         "Analisa contexto conversacional completo",           "5"),
                            ("extract_cpf",           "Extrai e valida CPF (mod 11)",                       "1"),
                            ("extract_cnpj",          "Extrai e valida CNPJ (mod 11)",                      "1"),
                            ("extract_cep",           "Extrai CEP e retorna endereço completo",             "3"),
                            ("extract_phone_br",      "Extrai telefone brasileiro com DDD",                 "1"),
                            ("extract_plate_br",      "Extrai placa Mercosul ou formato antigo",            "1"),
                        })
                        {
                            <tr class="hover:bg-gray-50">
                                <td class="px-4 py-2 font-mono text-nalu-600">@t.Item1</td>
                                <td class="px-4 py-2 text-gray-600">@t.Item2</td>
                                <td class="px-4 py-2 text-gray-500">@t.Item3 cr</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Parâmetros -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Parâmetros das ferramentas</h2>
            <p class="text-sm text-gray-600 mb-3">Todos os validadores (exceto <code class="bg-slate-100 px-1 rounded text-xs">analyze_reply</code>) recebem:</p>
            <div class="bg-white border border-gray-100 rounded-xl overflow-hidden mb-4">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 border-b border-gray-100">
                        <tr>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Parâmetro</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Tipo</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Descrição</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50 text-xs">
                        <tr><td class="px-4 py-2 font-mono text-nalu-600">agent_input</td><td class="px-4 py-2">string *</td><td class="px-4 py-2 text-gray-600">Mensagem do agente</td></tr>
                        <tr><td class="px-4 py-2 font-mono text-nalu-600">user_input</td><td class="px-4 py-2">string *</td><td class="px-4 py-2 text-gray-600">Resposta do usuário</td></tr>
                        <tr><td class="px-4 py-2 font-mono text-nalu-600">language</td><td class="px-4 py-2">string</td><td class="px-4 py-2 text-gray-600">Idioma (padrão: <code>pt-BR</code>)</td></tr>
                    </tbody>
                </table>
            </div>
            <p class="text-sm text-gray-600 mb-3"><code class="bg-slate-100 px-1 rounded text-xs">analyze_reply</code> usa <code class="bg-slate-100 px-1 rounded text-xs">agent_message</code> e <code class="bg-slate-100 px-1 rounded text-xs">user_reply</code> no lugar.</p>
        </div>

        <!-- Exemplo -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Exemplo de uso</h2>
            <div class="bg-slate-50 rounded-xl p-5 text-sm text-gray-700 leading-relaxed border border-gray-100">
                <p class="text-gray-500 text-xs mb-3">Prompt para o Claude:</p>
                <p class="italic">"O usuário disse 'meu cpf é 111.444.777-35'. Use extract_cpf para extrair e validar."</p>
                <p class="text-gray-500 text-xs mt-4 mb-1">Claude chama automaticamente:</p>
                <pre class="font-mono text-xs bg-white rounded p-3 border border-gray-100">extract_cpf({
  "agent_input": "Qual o seu CPF?",
  "user_input":  "meu cpf é 111.444.777-35"
})</pre>
                <p class="text-gray-500 text-xs mt-4 mb-1">Retorno:</p>
                <pre class="font-mono text-xs bg-white rounded p-3 border border-gray-100">{
  "obtained": true,
  "extracted_value": "111.444.777-35",
  "confidence": "high",
  "certain": true
}</pre>
            </div>
        </div>

        <div class="border-t border-gray-100 pt-6 flex gap-4">
            <a href="/docs" class="text-nalu-600 text-sm hover:underline">← Voltar para Docs</a>
            <a href="/docs/api-reference" class="text-nalu-600 text-sm hover:underline">API Reference →</a>
        </div>
    </div>
</section>