Claude Code Reference¶

Complete guide to using Claude Code with Preloop's Safety Layer.

Overview¶

Claude Code is Anthropic's official MCP client, available as: - CLI tool - Terminal-based interface for command-line use - VS Code extension - Integrated AI assistant in Visual Studio Code

Both versions work seamlessly with Preloop's MCP server, allowing you to use protected tools with policy enforcement and approval workflows built in.

Installation¶

CLI Installation¶

Requirements:

Node.js 18+ installed
npm or yarn package manager

Install globally via npm:

npm install -g @anthropic-ai/claude-code

Or via yarn:

yarn global add @anthropic-ai/claude-code

Verify installation:

claude --version

Expected output:

claude-code version 1.2.3

📸 Screenshot needed: claude-cli-version.png

VS Code Extension Installation¶

Method 1: VS Code Marketplace

Open Visual Studio Code
Go to Extensions (Cmd+Shift+X or Ctrl+Shift+X)
Search for "Claude Code"
Click Install
Reload VS Code if prompted

Method 2: Command Line

code --install-extension anthropic.claude-code

Verify installation:

Look for Claude Code icon in Activity Bar (left sidebar)
Or open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
Type "Claude" - you should see Claude Code commands

📸 Screenshot needed: vscode-claude-installed.png

Configuration¶

Connect to Preloop¶

Both CLI and VS Code extension use the same underlying MCP configuration.

CLI Configuration¶

Step 1: Get Your API Key

Log in to preloop.ai
Settings → API Keys → + Create API Key
Name: "Claude Code CLI"
Copy the key (starts with sk_live_ or sk_test_)

Step 2: Add Preloop MCP Server

claude mcp add \
  --transport http \
  --header "Authorization: Bearer YOUR_API_KEY_HERE" \
  preloop \
  https://preloop.ai/mcp/v1

Replace YOUR_API_KEY_HERE with your actual API key.

Step 3: Verify Connection

claude mcp list

Expected output:

✓ preloop (https://preloop.ai/mcp/v1)
  - Status: Connected
  - Tools available: 7
  - Last synced: 2 seconds ago

📸 Screenshot needed: claude-mcp-list-connected.png

VS Code Extension Configuration¶

Step 1: Open MCP Configuration

Method A - Command Palette: 1. Cmd+Shift+P (or Ctrl+Shift+P) 2. Type "Claude Code: Configure MCP Server" 3. Press Enter

Method B - Settings UI: 1. Click Claude Code icon in Activity Bar 2. Click gear icon (⚙️) in Claude Code panel 3. Go to "MCP Servers" tab

Step 2: Add Preloop

Fill in the form:

Name: preloop
URL: https://preloop.ai/mcp/v1
Transport: http-streaming
Authentication: Bearer Token
Token: YOUR_API_KEY_HERE

Click Save.

📸 Screenshot needed: vscode-claude-mcp-config-filled.png

Step 3: Verify Connection

In Claude Code panel: - Look for "MCP Servers" section - You should see "preloop" with green checkmark ✓ - Click to expand and see available tools

📸 Screenshot needed: vscode-claude-mcp-connected.png

Configuration File Location¶

Both CLI and extension store configuration in:

macOS/Linux:

~/.claude/mcp-servers.json

Windows:

%USERPROFILE%\.claude\mcp-servers.json

Example configuration:

{
  "servers": {
    "preloop": {
      "url": "https://preloop.ai/mcp/v1",
      "transport": "http-streaming",
      "headers": {
        "Authorization": "Bearer sk_live_abc123..."
      }
    }
  }
}

Automatic Discovery¶

Use the Preloop CLI to automatically detect Claude Code:

preloop agents discover

This inspects the local Claude Code MCP configuration, typically stored in ~/.claude/mcp-servers.json.

Discovery is the entry point for onboarding an existing Claude Code setup into Preloop:

Existing MCP tools can be imported into your Preloop account when they can be represented there
Available model-related configuration can be inspected and mapped into Preloop's managed model surfaces when compatible
Supported managed rewrites can point Claude Code to the Preloop Gateway for model traffic and the Preloop Tool Firewall for governed MCP access

If you want discovery to stay non-mutating in scripts or CI, use the read-only flags supported by the Preloop CLI.

Using Claude Code with Prelooped Tools¶

Basic Usage¶

CLI Usage¶

Start a conversation:

claude chat

Or provide a prompt directly:

claude chat "Using @preloop tools, pay alice@example.com $500"

How it works:

Claude Code sends request to Preloop
If tool is prelooped, Preloop intercepts
You receive approval notification
After approval, tool executes
Result returned to Claude Code

Example interaction:

$ claude chat "Using @preloop tools, pay alice@example.com $500"

Claude: I'll help you send a payment using the pay tool.

Tool call: pay(recipient="alice@example.com", amount=500)

⏳ Waiting for approval...
   Approval request sent to your email and dashboard.

[You approve via email or dashboard]

✓ Approval received!
✓ Payment of $500 sent to alice@example.com
   Transaction ID: tx_abc123
   Status: completed

The payment has been successfully sent.

📸 Screenshot needed: claude-cli-approval-flow.png

VS Code Extension Usage¶

Open Claude Code panel:

Click Claude Code icon in Activity Bar (left sidebar)
Or: Cmd+Shift+C / Ctrl+Shift+C

Start a conversation:

In the chat input at the bottom:

Using @preloop tools, pay alice@example.com $500

Approve the request:

Approval request appears in chat:

⏳ Waiting for approval...
Tool: pay
Arguments: recipient=alice@example.com, amount=500

[Approve in Dashboard →]

Click link to open approval in dashboard
Or approve via email/mobile
Result appears in chat after approval

📸 Screenshot needed: vscode-claude-approval-waiting.png, vscode-claude-approval-complete.png

Referencing MCP Servers¶

Explicit server reference:

Using @preloop tools, [your request]

This tells Claude Code to specifically use tools from Preloop MCP server.

Without server reference:

Pay alice@example.com $500

Claude Code will search all connected MCP servers for a pay tool.

Best practice: Use @preloop for clarity, especially if you have multiple MCP servers connected.

Tool Discovery¶

List available tools:

CLI:

claude mcp tools preloop

Expected output:

Tools from preloop:

1. request_approval(reason, context)
   Request approval for any action with custom context

2. pay(recipient, amount)
   Send a payment to a recipient

3. create_issue(title, description, priority, labels)
   Create a new issue in connected tracker

4. update_issue(issue_id, title, description, status)
   Modify an existing issue

... (more tools)

VS Code: - In Claude Code panel, expand "MCP Servers" - Click "preloop" - See list of available tools with descriptions

📸 Screenshot needed: vscode-claude-tools-list.png

Advanced Features¶

Multi-Tool Workflows¶

Claude Code can orchestrate multiple tool calls in a workflow:

Example: Create issue and send payment

Using @preloop tools:
1. Create an issue titled "Payment to Alice" with description "Paid $500 for consulting"
2. Then pay alice@example.com $500

How approvals work:

If both tools are prelooped: 1. Approval request for create_issue sent 2. You approve 3. Issue created 4. Approval request for pay sent 5. You approve 6. Payment sent

📸 Screenshot needed: claude-multi-tool-workflow.png

Using `request_approval` Explicitly¶

The request_approval tool lets you add custom approval points:

Example:

Using @preloop tools:
1. First, request approval with reason "About to deploy version 2.3.0 to production"
   and context {version: "2.3.0", environment: "production"}
2. If approved, proceed with deployment

Claude Code will:

Call request_approval tool
You receive approval request with custom context
After approval, Claude proceeds with deployment
If declined, Claude stops and reports

This is useful when you want the AI to decide when to ask for approval, rather than relying only on tool-level policy rules.

Context and History¶

CLI:

Claude Code CLI maintains conversation history:

claude chat

Type multiple messages:

You: Using @preloop, list available tools
Claude: [Lists tools]

You: Use the pay tool to send $100 to bob@example.com
Claude: [Triggers approval request]

... (you approve) ...

Claude: ✓ Payment sent successfully

Clear history:

claude clear

VS Code:

Each chat session in panel maintains its own history
Create new chat: Click "+" button in Claude Code panel
Previous chats saved in sidebar
Search previous conversations

📸 Screenshot needed: vscode-claude-chat-history.png

Code Generation with Tools¶

Claude Code can generate code that uses prelooped tools:

Example:

Write a Python script that:
1. Reads a CSV of payments
2. For each payment over $1000, uses @preloop pay tool
3. Logs results

Claude Code generates:

import csv
from claude_mcp_client import MCPClient

client = MCPClient("preloop")

with open('payments.csv', 'r') as f:
    reader = csv.DictReader(f)
    for row in reader:
        amount = float(row['amount'])
        recipient = row['recipient']

        if amount > 1000:
            # This will trigger approval for amounts > $1000
            result = client.call_tool('pay', {
                'recipient': recipient,
                'amount': amount
            })
            print(f"Payment to {recipient}: {result['status']}")

The generated code will work with Preloop's Safety Layer automatically.

Settings and Preferences¶

CLI Settings¶

View current configuration:

claude config list

Set default MCP server:

claude config set default_mcp_server preloop

Now you can omit @preloop in prompts:

claude chat "Pay alice@example.com $500"
# Automatically uses preloop server

Set timeout:

claude config set timeout 300000  # 5 minutes in milliseconds

Enable verbose logging:

claude chat --verbose "Your prompt here"

VS Code Extension Settings¶

Open settings:

Cmd+, (or Ctrl+,)
Search for "Claude Code"
Or: Settings → Extensions → Claude Code

Key settings:

General:

claudeCode.apiKey - Your Anthropic API key (for Claude itself)
claudeCode.model - Model to use (sonnet-4.5, opus, haiku)
claudeCode.maxTokens - Max response length

MCP:

claudeCode.mcp.enabled - Enable/disable MCP support
claudeCode.mcp.timeout - Tool call timeout (ms)
claudeCode.mcp.retries - Number of retry attempts

UI:

claudeCode.showToolCalls - Show tool calls in chat (recommended: ON)
claudeCode.showApprovalLinks - Show approval dashboard links (recommended: ON)
claudeCode.autoScroll - Auto-scroll chat to bottom

Notifications:

claudeCode.notifyOnApprovalNeeded - Desktop notification when approval needed
claudeCode.soundOnApprovalNeeded - Play sound for approval requests

📸 Screenshot needed: vscode-claude-settings.png

Tips and Tricks¶

1. Keyboard Shortcuts (VS Code)¶

Create custom shortcuts:

Cmd+K Cmd+S (or Ctrl+K Ctrl+S)
Search for "Claude Code"
Assign shortcuts:
claudeCode.openPanel → Cmd+Shift+C
claudeCode.newChat → Cmd+Shift+N
claudeCode.approveRequest → Cmd+Shift+A

2. Quick Approval Links¶

In VS Code, Claude Code shows clickable links to dashboard for approval:

⏳ Waiting for approval...
[Approve in Dashboard →]

Click to open dashboard directly with request pre-selected.

3. Copy API Key from CLI¶

claude mcp export preloop

Outputs configuration for easy copying/sharing (token redacted).

4. Test Connection Quickly¶

CLI:

claude mcp test preloop

Returns health status and tool count.

5. Use Aliases (CLI)¶

Add to .bashrc or .zshrc:

alias cc='claude chat'
alias ccl='claude mcp list'
alias cct='claude mcp test'

Now:

cc "Using @preloop, pay alice@example.com $500"

Comparison: CLI vs VS Code Extension¶

Feature	CLI	VS Code Extension
Installation	npm install	VS Code marketplace
Interface	Terminal	VS Code panel
Conversation history	Session-based	Persistent across sessions
Code generation	Text output	Integrated editor
Approval links	Manual (email/dashboard)	Clickable in chat
Multi-tasking	Blocks terminal	Background in editor
Best for	Scripts, automation	Interactive development

Recommendation:

Use CLI for scripting, CI/CD, automation
Use VS Code for interactive development and coding

Claude Code Reference¶

Overview¶

Installation¶

CLI Installation¶

VS Code Extension Installation¶

Configuration¶

Connect to Preloop¶

CLI Configuration¶

VS Code Extension Configuration¶

Configuration File Location¶

Automatic Discovery¶

Using Claude Code with Prelooped Tools¶

Basic Usage¶

CLI Usage¶

VS Code Extension Usage¶

Referencing MCP Servers¶

Tool Discovery¶

Advanced Features¶

Multi-Tool Workflows¶

Using request_approval Explicitly¶

Context and History¶

Code Generation with Tools¶

Settings and Preferences¶

CLI Settings¶

VS Code Extension Settings¶

Tips and Tricks¶

1. Keyboard Shortcuts (VS Code)¶

2. Quick Approval Links¶

3. Copy API Key from CLI¶

4. Test Connection Quickly¶

5. Use Aliases (CLI)¶

Comparison: CLI vs VS Code Extension¶

Using `request_approval` Explicitly¶