clavitor/clavitor.com/templates/codex.tmpl

{{define "codex"}}
<div class="hero container">
    <p class="label accent mb-4">Integration Guide</p>
    <h1 class="mb-6"><span class="vaultname">clav<span class="n">itor</span></span> + OpenAI Codex</h1>
    <p class="lead mb-6">Give your Codex agent access to credentials and 2FA codes via REST API or MCP &mdash; without exposing card numbers, passports, or recovery codes.</p>
</div>

<hr class="divider">

<div class="section container">
    <div class="grid-2">
        <div class="card alt">
            <span class="badge accent mb-4">What your agent sees</span>
            <h3 class="mb-3">Shared fields</h3>
            <p class="mb-4">Your agent reads these to help you code, deploy, and authenticate.</p>
            <ul class="checklist">
                <li>API keys (GitHub, AWS, Stripe, OpenAI&hellip;)</li>
                <li>SSH host credentials</li>
                <li>Database connection strings</li>
                <li>TOTP seeds &mdash; live 2FA codes on demand</li>
                <li>Service account passwords</li>
            </ul>
        </div>
        <div class="card red">
            <span class="badge red mb-4">What your agent never sees</span>
            <h3 class="mb-3">Personal fields</h3>
            <p class="mb-4">Encrypted client-side with your WebAuthn authenticator. The server stores ciphertext. No key, no access.</p>
            <ul class="checklist red">
                <li>Credit card numbers &amp; CVV</li>
                <li>Passport &amp; government IDs</li>
                <li>Recovery codes &amp; seed phrases</li>
                <li>Social security numbers</li>
                <li>Bank account details</li>
            </ul>
        </div>
    </div>
</div>

<div class="section container">
    <h2 class="mb-4">Two ways to connect</h2>
    <p class="lead mb-8">MCP for native tool integration, or REST API for function calling from any model.</p>

    <div class="grid-2">
        <div class="card mb-6">
            <span class="badge accent mb-4">Option A</span>
            <h3 class="mb-4">MCP</h3>
            <p class="mb-4">Codex supports MCP natively. Add <span class="vaultname">clav<span class="n">itor</span></span> to your <code>~/.codex/config.toml</code> (or <code>.codex/config.toml</code> in your project):</p>
            <div class="code-block"><pre>[mcp_servers.clavitor]
url = "http://localhost:1984/mcp"

[mcp_servers.clavitor.headers]
Authorization = "Bearer clavitor_your_token_here"</pre></div>
        </div>
        <div class="card mb-6">
            <span class="badge mb-4">Option B</span>
            <h3 class="mb-4">REST API + Function Calling</h3>
            <p class="mb-4">Define <span class="vaultname">clav<span class="n">itor</span></span> endpoints as functions. Works with any LLM that supports function calling.</p>
            <div class="code-block"><pre>curl http://localhost:1984/api/search?q=github \
  -H "Authorization: Bearer clavitor_your_token_here"

# Returns entries with credentials, URLs, TOTP codes
# Personal fields return: {"value":"[REDACTED]","l2":true}</pre></div>
        </div>
    </div>

    <div class="card mb-6" style="border-color:var(--border-gold)">
        <h3 class="mb-4">Using hosted <span class="vaultname">clav<span class="n">itor</span></span>?</h3>
        <p class="mb-4">Your URL includes your unique vault identifier. You can find the exact URL in your <strong>Account Information</strong> page after signing up.</p>
        <p style="font-size:0.875rem;color:var(--muted)">It looks like: <code>https://clavitor.com/<em>your_vault_id</em>/mcp</code> or <code>.../<em>your_vault_id</em>/api/</code></p>
    </div>
</div>

<div class="section container">
    <h2 class="mb-4">API endpoints</h2>
    <p class="lead mb-8">Simple REST. Bearer token auth. JSON responses.</p>

    <div class="card mb-4">
        <div class="code-block"><pre>GET  /api/entries              # list all entries
GET  /api/entries/{id}         # get single entry
GET  /api/search?q=github     # search by query
GET  /api/ext/totp/{id}       # get live TOTP code
GET  /api/generate?length=32  # generate random password</pre></div>
    </div>

    <p style="font-size:0.875rem;color:var(--muted)">All endpoints require <code>Authorization: Bearer clavitor_...</code></p>
</div>

<div class="section container">
    <h2 class="mb-4">One vault, multiple agents</h2>
    <p class="lead mb-8">Running agents on different projects? Create a separate API key for each.</p>
    <div class="grid-3">
        <div class="card card-hover">
            <h3 class="mb-3">Work agent</h3>
            <p>Its own API key for GitHub, AWS, Jira, and Slack</p>
        </div>
        <div class="card card-hover">
            <h3 class="mb-3">Personal agent</h3>
            <p>Its own API key for email, social media, and cloud storage</p>
        </div>
        <div class="card card-hover">
            <h3 class="mb-3">Deploy agent</h3>
            <p>Its own API key for SSH keys, database creds, and API tokens</p>
        </div>
    </div>
</div>

<div class="section container">
    <h2 class="mb-4">Every access is logged</h2>
    <p class="lead mb-8">The audit log records which agent accessed which credential, when, and from where.</p>
    <div class="code-block"><pre><span class="comment">TIME                 ACTION  ENTRY               ACTOR</span>
2026-03-08 10:23:14  read    github.com          mcp:codex-agent
2026-03-08 10:23:15  totp    github.com          mcp:codex-agent
2026-03-08 11:45:02  read    aws-production      mcp:deploy-agent
2026-03-08 14:12:33  search  "database"          api:codex</pre></div>
</div>

<div class="section container" style="text-align:center">
    <h2 class="mb-4">Get started</h2>
    <div class="btn-row" style="justify-content:center">
        <a href="/install" class="btn btn-primary">Self-host (free)</a>
        <a href="/hosted" class="btn btn-gold">Hosted ($12/yr)</a>
    </div>
</div>
{{end}}