@page "/en/docs/mcp"
@model Nalu.Web.Pages.En.Docs.EnMcpModel
@{
    ViewData["LangPrefix"] = "/en";
    ViewData["PtUrl"] = "/docs/mcp";
    ViewData["Title"] = "MCP Server — NaLU AI Docs";
    ViewData["Description"] = "Integrate NaLU AI with Claude Desktop, Claude Code and any MCP client 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="/en/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 NaLU validators natively inside Claude Desktop, Claude Code and any MCP-compatible client.</p>
    </div>
</section>

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

        <!-- What is MCP -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-2">What is MCP?</h2>
            <p class="text-sm text-gray-600">
                Model Context Protocol (MCP) is an open standard that lets AI agents call external tools natively.
                The NaLU AI MCP server runs locally via <code class="bg-slate-100 px-1 rounded text-xs">stdio</code> and calls the NaLU REST API — your API key never leaves your machine.
            </p>
        </div>

        <!-- Prerequisites -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Prerequisites</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>A NaLU API key — get one at <a href="/en/dashboard" class="text-nalu-600 hover:underline">Dashboard → API Keys</a></li>
            </ul>
        </div>

        <!-- Installation -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Installation</h2>
            <p class="text-sm text-gray-600 mb-3">Clone the MCP server and install dependencies:</p>
            <div class="bg-slate-900 rounded-xl p-4 font-mono text-sm text-slate-300 overflow-x-auto">
<pre>git clone https://git.naluai.dev/nalu-mcp.git
cd nalu-mcp
npm install</pre>
            </div>
        </div>

        <!-- Claude Desktop -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configure in Claude Desktop</h2>
            <p class="text-sm text-gray-600 mb-3">
                Edit <code class="bg-slate-100 px-1 rounded text-xs">%APPDATA%\Claude\claude_desktop_config.json</code> (Windows)
                or <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": ["/path/to/nalu-mcp/index.mjs"],
      "env": {
        "NALU_API_KEY": "YOUR_API_KEY"
      }
    }
  }
}</pre>
            </div>
            <p class="text-xs text-gray-500 mt-2">Restart Claude Desktop after saving. Validators will appear automatically as available tools.</p>
        </div>

        <!-- Claude Code CLI -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Configure in 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 "/path/to/nalu-mcp/index.mjs" \
  --env NALU_API_KEY=YOUR_API_KEY</pre>
            </div>
        </div>

        <!-- Available tools -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Available tools</h2>
            <p class="text-sm text-gray-600 mb-3">After connecting, your AI agent sees these tools:</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">Tool</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Description</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Credits</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50 text-xs">
                        @foreach (var t in new[] {
                            ("extract_name",          "Extracts full person name from dialogue",                 "2"),
                            ("extract_email",         "Extracts email, corrects common typos",                  "1"),
                            ("extract_yes_no",        "Detects yes/no across phrasing styles",                  "2"),
                            ("extract_birthdate",     "Extracts birth date, calculates current age",            "2"),
                            ("extract_postal_code",   "International postal code (non-Brazil)",                 "1"),
                            ("extract_company_name",  "Extracts company name (LLC, Inc, GmbH...)",              "2"),
                            ("detect_handoff",        "Detects intent to speak with a human agent",            "2"),
                            ("detect_cancel_intent",  "Classifies cancellation intent type",                    "2"),
                            ("analyze_reply",         "Full conversational context analysis",                   "5"),
                            ("extract_cpf",           "Extracts and validates Brazilian CPF (mod 11)",          "1"),
                            ("extract_cnpj",          "Extracts and validates Brazilian CNPJ (mod 11)",         "1"),
                            ("extract_cep",           "Extracts Brazilian ZIP (CEP), returns full address",     "3"),
                            ("extract_phone_br",      "Extracts Brazilian phone with area code",                "1"),
                            ("extract_plate_br",      "Extracts Brazilian plate (Mercosul or old format)",      "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>

        <!-- Parameters -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Tool parameters</h2>
            <p class="text-sm text-gray-600 mb-3">All validators (except <code class="bg-slate-100 px-1 rounded text-xs">analyze_reply</code>) accept:</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">Parameter</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Type</th>
                            <th class="px-4 py-2 text-left font-semibold text-gray-700">Description</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">The agent's message or question</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">The user's reply</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">Conversation language (default: <code>pt-BR</code>)</td></tr>
                    </tbody>
                </table>
            </div>
            <p class="text-sm text-gray-600"><code class="bg-slate-100 px-1 rounded text-xs">analyze_reply</code> uses <code class="bg-slate-100 px-1 rounded text-xs">agent_message</code> and <code class="bg-slate-100 px-1 rounded text-xs">user_reply</code> instead.</p>
        </div>

        <!-- Example -->
        <div>
            <h2 class="text-lg font-bold text-gray-900 mb-3">Usage example</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 to Claude:</p>
                <p class="italic">"The user said 'my name is John Smith, can you confirm?'. Use extract_name to validate it."</p>
                <p class="text-gray-500 text-xs mt-4 mb-1">Claude calls automatically:</p>
                <pre class="font-mono text-xs bg-white rounded p-3 border border-gray-100">extract_name({
  "agent_input": "What is your full name?",
  "user_input":  "my name is John Smith, can you confirm?"
})</pre>
                <p class="text-gray-500 text-xs mt-4 mb-1">Response:</p>
                <pre class="font-mono text-xs bg-white rounded p-3 border border-gray-100">{
  "obtained": true,
  "extracted_value": "John Smith",
  "confidence": "high",
  "certain": true
}</pre>
            </div>
        </div>

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