158 lines
8.4 KiB
Cheetah
158 lines
8.4 KiB
Cheetah
{{define "claude-code"}}
|
|
<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> + Claude Code</h1>
|
|
<p class="lead mb-6">Give your Claude agent secure access to credentials, TOTP codes, and API keys — 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 Claude sees</span>
|
|
<h3 class="mb-3">Shared fields</h3>
|
|
<p class="mb-4">Claude reads these via MCP tools to help you code, deploy, and authenticate.</p>
|
|
<ul class="checklist">
|
|
<li>API keys (GitHub, AWS, Stripe, OpenAI…)</li>
|
|
<li>SSH host credentials</li>
|
|
<li>Database connection strings</li>
|
|
<li>TOTP seeds — Claude generates 2FA codes autonomously</li>
|
|
<li>Service account passwords</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card red">
|
|
<span class="badge red mb-4">What Claude 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 & CVV</li>
|
|
<li>Passport & government IDs</li>
|
|
<li>Recovery codes & 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">Setup in 2 minutes</h2>
|
|
<p class="lead mb-8">Create a token in <span class="vaultname">clav<span class="n">itor</span></span>, connect it to Claude, done.</p>
|
|
|
|
<div class="card mb-6">
|
|
<h3 class="mb-4">1. Create a token</h3>
|
|
<p class="mb-4">Open your vault → <strong>Tokens</strong> → <strong>Create</strong>. Give it a label like “Claude Code”. Copy the token — it’s shown only once.</p>
|
|
<p style="font-size:0.8125rem;color:var(--muted)">Each token is an independent API key. Create one per agent or project.</p>
|
|
</div>
|
|
|
|
<div class="card mb-6">
|
|
<h3 class="mb-4">2. Connect Claude Code</h3>
|
|
<p class="mb-4">In your terminal, run:</p>
|
|
<div class="code-block">claude mcp add clavitor --transport http --url http://localhost:1984/mcp \
|
|
--header "Authorization: Bearer clavitor_your_token_here"</div>
|
|
<p class="mt-4" style="font-size:0.8125rem;color:var(--muted)">That’s it. Claude Code picks up the new server automatically.</p>
|
|
</div>
|
|
|
|
<div class="card mb-6">
|
|
<h3 class="mb-4">3. Connect Claude Desktop</h3>
|
|
<p class="mb-4">Open Claude Desktop → <strong>☰</strong> menu → <strong>Settings</strong> → <strong>Integrations</strong> → <strong>Add More</strong>.</p>
|
|
<div class="code-block mb-4"><pre>Name: clavitor
|
|
URL: http://localhost:1984/mcp</pre></div>
|
|
<p class="mb-4">Click <strong>Add</strong>, then expand the entry and add a header:</p>
|
|
<div class="code-block"><pre>Authorization: Bearer clavitor_your_token_here</pre></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 MCP 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></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section container">
|
|
<h2 class="mb-4">You don’t have to do anything</h2>
|
|
<p class="lead mb-8">Once connected, Claude handles credentials automatically. Need to deploy? It looks up your SSH key. Need to log in? It fetches the password and generates the 2FA code. You just ask for what you want done.</p>
|
|
|
|
<div class="grid-2 mb-6">
|
|
<div class="card card-hover alt">
|
|
<h3 class="mb-3">“Deploy to production”</h3>
|
|
<p>Claude looks up your server credentials, SSH key, and any required API tokens — then does the deployment.</p>
|
|
<div class="code-block mt-3" style="font-size:0.8125rem"><pre>get_credential("aws-production")
|
|
get_totp("aws") → 283941 (expires in 22s)</pre></div>
|
|
</div>
|
|
<div class="card card-hover alt">
|
|
<h3 class="mb-3">“Log in to GitHub and check the CI”</h3>
|
|
<p>Claude finds the credential, generates a live TOTP code, and completes the 2FA flow. No phone needed.</p>
|
|
<div class="code-block mt-3" style="font-size:0.8125rem"><pre>get_credential("github")
|
|
get_totp("github") → 847203 (expires in 14s)</pre></div>
|
|
</div>
|
|
</div>
|
|
<div class="grid-3 mb-6">
|
|
<div class="card card-hover">
|
|
<h3 class="mb-3">“Find my database credentials”</h3>
|
|
<p>Full-text search across all entries — titles, URLs, usernames, notes.</p>
|
|
<div class="code-block mt-3" style="font-size:0.8125rem">search_vault("postgres")</div>
|
|
</div>
|
|
<div class="card card-hover">
|
|
<h3 class="mb-3">“What’s expiring soon?”</h3>
|
|
<p>Claude checks for credentials, cards, or documents expiring within any timeframe.</p>
|
|
<div class="code-block mt-3" style="font-size:0.8125rem">check_expiring(30)</div>
|
|
</div>
|
|
<div class="card card-hover">
|
|
<h3 class="mb-3">“Show me everything”</h3>
|
|
<p>List all entries the agent has access to. Useful for inventory or onboarding a new project.</p>
|
|
<div class="code-block mt-3" style="font-size:0.8125rem">list_credentials()</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-2">
|
|
<div class="card card-hover alt">
|
|
<h3 class="mb-3">“Save this API key”</h3>
|
|
<p>Claude stores new credentials, notes, and configuration directly in your vault. Sign up for a service, generate an API key, or jot down a config snippet — Claude saves it immediately. No copy-pasting into a separate app.</p>
|
|
</div>
|
|
<div class="card card-hover alt">
|
|
<h3 class="mb-3">“Remember this for later”</h3>
|
|
<p>License keys, server configs, migration plans, recovery instructions — anything you tell Claude to remember goes straight into your vault, encrypted and searchable.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section container">
|
|
<h2 class="mb-4">One vault, multiple agents</h2>
|
|
<p class="lead mb-8">Running Claude 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:claude-desktop
|
|
2026-03-08 10:23:15 totp github.com mcp:claude-desktop
|
|
2026-03-08 11:45:02 read aws-production mcp:deploy-agent
|
|
2026-03-08 14:12:33 search "database" mcp:claude-code</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}}
|