<!-- Hero Section -->
<div class="endpoint-section" style="background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%); border: 1px solid var(--primary-green); border-radius: 12px; padding: 2rem; margin-bottom: 2rem;">
    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
        <div style="font-size: 3rem;">🤖</div>
        <div>
            <h2 style="margin: 0; color: var(--primary-green);">AI-Powered URL Management</h2>
            <p style="margin: 0.5rem 0 0 0; color: var(--text-secondary);">Talk to your URL shortener like you talk to an AI</p>
        </div>
    </div>
    <ul class="info-list" style="margin-top: 1rem;">
        <li>✨ Natural language interface - no API syntax needed</li>
        <li>⚡ Instant URL shortening from your AI assistant</li>
        <li>📊 Get analytics on-demand with simple prompts</li>
        <li>🔒 Create password-protected links conversationally</li>
    </ul>
</div>

<!-- Quick Setup Section -->
<div class="endpoint-section">
    <h2>⚡ Quick Setup</h2>

    <h3>For Claude Code (Recommended)</h3>
    <p>Claude Code supports HTTP MCP servers directly via CLI. Simply run:</p>

    <div class="code-container">
        <div class="code-header">Terminal</div>
        <pre><code class="language-bash line-numbers">claude mcp add --transport http zip1 http://zip1.io/mcp</code></pre>
    </div>

    <p>Verify installation:</p>
    <div class="code-container">
        <div class="code-header">Terminal</div>
        <pre><code class="language-bash line-numbers">claude mcp list</code></pre>
    </div>

    <div style="background: rgba(0, 255, 136, 0.1); border-left: 4px solid var(--primary-green); padding: 1rem; margin-top: 1rem; border-radius: 4px;">
        <strong>✅ That's it!</strong> You can now use zip1.io directly from Claude Code.
    </div>

    <h3 style="margin-top: 2rem;">For Claude Desktop</h3>
    <div style="background: rgba(255, 165, 0, 0.1); border-left: 4px solid #ff8800; padding: 1rem; margin-bottom: 1rem; border-radius: 4px;">
        <strong>⚠️ Requires Proxy:</strong> Claude Desktop only supports stdio-based MCP servers, not HTTP servers. You'll need a local proxy to bridge the connection.
    </div>

    <h4>Option 1: Using mcp-client-cli (Recommended)</h4>
    <p>Install the MCP client CLI tool to bridge stdio to HTTP:</p>

    <div class="code-container">
        <div class="code-header">Terminal</div>
        <pre><code class="language-bash line-numbers">npm install -g @modelcontextprotocol/client-cli</code></pre>
    </div>

    <p>Then edit your Claude Desktop config file:</p>
    <ul class="info-list">
        <li><strong>macOS:</strong> <code>~/Library/Application Support/Claude/claude_desktop_config.json</code></li>
        <li><strong>Windows:</strong> <code>%APPDATA%\Claude\claude_desktop_config.json</code></li>
    </ul>

    <p>Add this configuration:</p>
    <div class="code-container">
        <div class="code-header">claude_desktop_config.json</div>
        <pre><code class="language-json line-numbers">{

    <p><strong>Restart Claude Desktop</strong> and the zip1.io tools will be available.</p>

    <h4 style="margin-top: 2rem;">Option 2: Custom Node.js Proxy</h4>
    <p>For advanced users, create a custom stdio-to-HTTP bridge script:</p>

    <div class="code-container">
        <div class="code-header">zip1-mcp-proxy.js</div>
        <pre><code class="language-javascript line-numbers">#!/usr/bin/env node

const https = require('https'); const readline = require('readline');

const MCP_URL = 'http://zip1.io/mcp';

const rl = readline.createInterface({ input: process.stdin, output: process.stdout, terminal: false });

rl.on('line', (line) => { const request = JSON.parse(line);

const options = { method: 'POST', headers: { 'Content-Type': 'application/json', } };

const req = https.request(MCP_URL, options, (res) => { let data = ''; res.on('data', (chunk) => data += chunk); res.on('end', () => { console.log(data); }); });

req.on('error', (error) => { console.error(JSON.stringify({ jsonrpc: '2.0', id: request.id, error: { code: -32000, message: error.message } })); });

req.write(JSON.stringify(request)); req.end(); });

    <p>Make it executable and add to your Claude Desktop config:</p>
    <div class="code-container">
        <div class="code-header">Terminal</div>
        <pre><code class="language-bash line-numbers">chmod +x zip1-mcp-proxy.js</code></pre>
    </div>

    <div class="code-container">
        <div class="code-header">claude_desktop_config.json</div>
        <pre><code class="language-json line-numbers">{

"mcpServers": { "zip1": { "command": "node", "args": ["/path/to/zip1-mcp-proxy.js"] } } }

<!-- Server Configuration Section -->
<div class="endpoint-section">
    <h2>⚙️ Server Configuration</h2>
    <p>The zip1.io MCP server is available as an HTTP endpoint that any MCP-compatible client can connect to.</p>

    <h3>Server Details</h3>
    <div class="table-responsive">
        <table class="parameter-table">
            <thead>
                <tr>
                    <th>Configuration Item</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Server URL</td>
                    <td><code>http://zip1.io/mcp</code></td>
                </tr>
                <tr>
                    <td>Transport</td>
                    <td>HTTP (Streamable)</td>
                </tr>
                <tr>
                    <td>Protocol Version</td>
                    <td>MCP 2024-11-05</td>
                </tr>
                <tr>
                    <td>Message Format</td>
                    <td>JSON-RPC 2.0</td>
                </tr>
                <tr>
                    <td>Authentication</td>
                    <td>None (rate-limited)</td>
                </tr>
                <tr>
                    <td>Rate Limit</td>
                    <td>30 requests/minute per IP</td>
                </tr>
                <tr>
                    <td>Available Tools</td>
                    <td>4 (create_short_url, get_url_stats, validate_url, generate_short_code)</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h3 style="margin-top: 2rem;">Using with Other MCP Clients</h3>
    <p>Any MCP-compatible client that supports HTTP transport can connect to zip1.io. Here are some examples:</p>

    <h4>Direct HTTP Requests (curl)</h4>
    <div class="code-container">
        <div class="code-header">List Available Tools</div>
        <pre><code class="language-bash line-numbers">curl -X POST http://zip1.io/mcp \

-H "Content-Type: application/json"
-d '{ "jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {} }'

    <div class="code-container">
        <div class="code-header">Create a Short URL</div>
        <pre><code class="language-bash line-numbers">curl -X POST http://zip1.io/mcp \

-H "Content-Type: application/json"
-d '{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "create_short_url", "arguments": { "url": "https://example.com", "alias": "my-link" } } }'

    <h4 style="margin-top: 2rem;">Python Client Example</h4>
    <div class="code-container">
        <div class="code-header">Python Script</div>
        <pre><code class="language-python line-numbers">import requests

MCP_URL = "http://zip1.io/mcp"

def call_mcp_tool(tool_name, arguments): payload = { "jsonrpc": "2.0", "id": 1, "method": "tools/call", "params": { "name": tool_name, "arguments": arguments } }

response = requests.post(MCP_URL, json=payload)
return response.json()

Example usage

result = call_mcp_tool("create_short_url", { "url": "https://github.com/anthropics/claude-mcp", "alias": "mcp-docs" })

print(result)

    <h3 style="margin-top: 2rem;">Self-Hosted Configuration</h3>
    <p>If you're running your own instance of zip1.io, configure clients to point to your instance:</p>

    <div class="code-container">
        <div class="code-header">Claude Code</div>
        <pre><code class="language-bash line-numbers">claude mcp add --transport http zip1 https://your-domain.com/mcp</code></pre>
    </div>

    <div class="code-container">
        <div class="code-header">Claude Desktop (with mcp-client)</div>
        <pre><code class="language-json line-numbers">{

"mcpServers": { "zip1-local": { "command": "mcp-client", "args": ["http://localhost:8000/mcp"] } } }

<!-- Example Usage Section -->
<div class="endpoint-section">
    <h2>💬 Example Conversations</h2>
    <p>Here are some natural language prompts you can use with Claude:</p>

    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem;">
        <h3 style="color: var(--primary-green); margin-top: 0;">Creating Short URLs</h3>
        <div class="code-container" style="margin-bottom: 0.5rem;">
            <div class="code-header">Prompt</div>
            <pre style="background: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 4px;"><code>"Shorten https://github.com/anthropics/claude-mcp for me"</code></pre>
        </div>
        <div style="background: rgba(0, 255, 136, 0.05); padding: 1rem; border-radius: 4px; border-left: 3px solid var(--primary-green);">
            <strong>Claude's Response:</strong><br>
            ✅ Short URL created: https://zip1.io/Kj9dX2<br>
            🔤 Generated code: Kj9dX2<br>
            🔗 Original URL: https://github.com/anthropics/claude-mcp<br>
            📊 View stats: https://zip1.io/stats/Kj9dX2
        </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem;">
        <h3 style="color: var(--primary-green); margin-top: 0;">Custom Aliases & Passwords</h3>
        <div class="code-container" style="margin-bottom: 0.5rem;">
            <div class="code-header">Prompt</div>
            <pre style="background: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 4px;"><code>"Create a short URL for https://docs.myapp.com with alias 'docs' and password 'team2024'"</code></pre>
        </div>
        <div style="background: rgba(0, 255, 136, 0.05); padding: 1rem; border-radius: 4px; border-left: 3px solid var(--primary-green);">
            <strong>Claude's Response:</strong><br>
            ✅ Short URL created: https://zip1.io/docs<br>
            📝 Custom alias: docs<br>
            🔒 Password protected: Yes<br>
            🔗 Original URL: https://docs.myapp.com
        </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem;">
        <h3 style="color: var(--primary-green); margin-top: 0;">Getting Analytics</h3>
        <div class="code-container" style="margin-bottom: 0.5rem;">
            <div class="code-header">Prompt</div>
            <pre style="background: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 4px;"><code>"Show me the stats for short code 'docs'"</code></pre>
        </div>
        <div style="background: rgba(0, 255, 136, 0.05); padding: 1rem; border-radius: 4px; border-left: 3px solid var(--primary-green);">
            <strong>Claude's Response:</strong><br>
            📊 Statistics for: https://zip1.io/docs<br>
            👆 Total clicks: 127<br>
            👤 Unique clicks: 89<br>
            🔒 Password protected: Yes<br>
            📅 Created: 2024-01-15T10:30:00<br>
            <br>
            🌍 Top countries:<br>
            &nbsp;&nbsp;1. United States: 54 clicks<br>
            &nbsp;&nbsp;2. United Kingdom: 23 clicks<br>
            &nbsp;&nbsp;3. Canada: 18 clicks
        </div>
    </div>

    <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1.5rem;">
        <h3 style="color: var(--primary-green); margin-top: 0;">URL Validation</h3>
        <div class="code-container" style="margin-bottom: 0.5rem;">
            <div class="code-header">Prompt</div>
            <pre style="background: rgba(0, 0, 0, 0.3); padding: 1rem; border-radius: 4px;"><code>"Can I shorten ftp://myserver.com/file.zip?"</code></pre>
        </div>
        <div style="background: rgba(0, 255, 136, 0.05); padding: 1rem; border-radius: 4px; border-left: 3px solid var(--primary-green);">
            <strong>Claude's Response:</strong><br>
            ❌ URL is invalid: Must include http:// or https:// protocol and a valid domain
        </div>
    </div>
</div>

<!-- Available Tools Section -->
<div class="endpoint-section">
    <h2>🛠️ Available Tools</h2>
    <p>The zip1.io MCP server provides four tools that Claude can use:</p>

    <div class="table-responsive">
        <table class="parameter-table">
            <thead>
                <tr>
                    <th>Tool</th>
                    <th>Description</th>
                    <th>Example Usage</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><code>create_short_url</code></td>
                    <td>Create shortened URLs with optional custom aliases, passwords, and max clicks</td>
                    <td>"Shorten this URL with alias 'mylink'"</td>
                </tr>
                <tr>
                    <td><code>get_url_stats</code></td>
                    <td>Retrieve detailed analytics including clicks, countries, and timestamps</td>
                    <td>"Get stats for short code 'abc123'"</td>
                </tr>
                <tr>
                    <td><code>validate_url</code></td>
                    <td>Check if a URL is valid and can be shortened</td>
                    <td>"Can I shorten example.com?"</td>
                </tr>
                <tr>
                    <td><code>generate_short_code</code></td>
                    <td>Generate a random short code suggestion</td>
                    <td>"Generate a random short code"</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Technical Details Section -->
<div class="endpoint-section">
    <h2>🔧 Technical Details</h2>

    <h3>MCP Endpoint</h3>
    <div class="method"><span class="badge badge-get">GET</span> /mcp</div>
    <p>Returns server information, available tools, and configuration details.</p>

    <h3>Protocol Information</h3>
    <ul class="info-list">
        <li><strong>Protocol Version:</strong> MCP 2024-11-05</li>
        <li><strong>Transport:</strong> Streamable HTTP</li>
        <li><strong>Message Format:</strong> JSON-RPC 2.0</li>
        <li><strong>Rate Limit:</strong> 30 requests per minute per IP</li>
    </ul>

    <h3>Security</h3>
    <ul class="info-list">
        <li>All communication uses HTTPS encryption</li>
        <li>Passwords are hashed with bcrypt before storage</li>
        <li>Rate limiting prevents abuse</li>
        <li>Same security infrastructure as the REST API</li>
    </ul>
</div>

<!-- Use Cases Section -->
<div class="endpoint-section">
    <h2>💡 Use Cases</h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
        <div style="background: var(--bg-card); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px;">
            <h3 style="color: var(--primary-green); margin-top: 0;">📝 Content Creation</h3>
            <p>Generate short URLs while writing blog posts, documentation, or social media content without leaving your AI assistant.</p>
        </div>
        <div style="background: var(--bg-card); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px;">
            <h3 style="color: var(--primary-green); margin-top: 0;">📊 Quick Analytics</h3>
            <p>Ask for link performance during conversations. "How many clicks did my campaign link get?"</p>
        </div>
        <div style="background: var(--bg-card); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px;">
            <h3 style="color: var(--primary-green); margin-top: 0;">🔐 Secure Sharing</h3>
            <p>Create password-protected links on-the-fly when sharing sensitive information in team chats.</p>
        </div>
        <div style="background: var(--bg-card); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px;">
            <h3 style="color: var(--primary-green); margin-top: 0;">🎯 Campaign Management</h3>
            <p>Create custom-aliased URLs for marketing campaigns with natural language commands.</p>
        </div>
    </div>
</div>

<!-- Troubleshooting Section -->
<div class="endpoint-section">
    <h2>🔍 Troubleshooting</h2>

    <h3>Rate limiting errors?</h3>
    <ul class="info-list">
        <li>The MCP endpoint has a limit of 30 requests per minute</li>
        <li>Wait a minute and try again</li>
    </ul>

    <h3>Tools not appearing in Claude Code?</h3>
    <ul class="info-list">
        <li>Ensure the MCP server URL is accessible</li>
        <li>Try visiting <a href="/mcp" style="color: var(--primary-green);">http://zip1.io/mcp</a> in your browser</li>
        <li>Verify your MCP configuration with <code>claude mcp list</code></li>
    </ul>
</div>

<!-- Resources Section -->
<div class="endpoint-section">
    <h2>📚 Resources & Documentation</h2>
    <ul class="info-list">
        <li><a href="https://modelcontextprotocol.io" target="_blank" rel="noopener">Official MCP Documentation</a> - Learn more about the Model Context Protocol</li>
        <li><a href="https://github.com/modelcontextprotocol/python-sdk" target="_blank" rel="noopener">MCP Python SDK</a> - Build your own MCP servers</li>
        <li><a href="/api">REST API Documentation</a> - Traditional API access</li>
    </ul>
</div>

<!-- CTA Section -->
<div class="endpoint-section" style="text-align: center; background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 255, 136, 0.05) 100%); border: 1px solid var(--primary-green); border-radius: 12px; padding: 2rem;">
    <h2 style="color: var(--primary-green); margin-top: 0;">Ready to Get Started?</h2>
    <p style="font-size: 1.1rem; margin-bottom: 1.5rem;">Add zip1.io to Claude Code now and start shortening URLs with AI</p>
    <div class="code-container" style="max-width: 600px; margin: 0 auto;">
        <div class="code-header">Quick Setup</div>
        <pre><code class="language-bash">claude mcp add --transport http zip1 http://zip1.io/mcp</code></pre>
    </div>
</div>