Skip to content

Connect Your MCP Client

Learn how to connect Claude Code, Cline, Zed, or any MCP-compatible client to Preloop.

Overview

MCP clients are applications that can discover and use tools through the MCP (Model Context Protocol). Once connected to Preloop, these clients can use your prelooped tools with approval workflows automatically enforced.

Popular MCP Clients:

  • OpenClaw - Managed local agent onboarding with gateway-aware model routing
  • OpenCode - Multi-provider coding agent with native MCP support
  • Claude Code - Anthropic's official CLI and VS Code extension
  • Codex CLI - OpenAI's official CLI client
  • Gemini CLI - Google's terminal agent with native MCP support
  • Hermes - Nous Research's autonomous coding agent (~/.hermes/config.yaml)
  • Cursor, Windsurf, Antigravity, Zed - Modern code editors with built-in MCP support
  • Custom Clients - Any application implementing MCP protocol

What you'll need: - Preloop account (see Creating Your Account) - API key from Preloop - MCP client installed

If you already use a supported local agent, you can often start with discovery instead of configuring everything by hand:

preloop agents discover

Discovery can inspect local configurations for OpenClaw, OpenCode, Claude Code, Codex CLI, Gemini CLI, and Hermes. On supported managed onboarding paths, Preloop can import the agent's configured tools and AI model metadata into your account and reconfigure the local runtime to use the Preloop Gateway and Preloop Tool Firewall.

Quick Start

1. Get Your API Key

  1. Log in to preloop.ai
  2. Go to Settings → API Keys
  3. Click + Create API Key
  4. Give it a name (e.g., "Claude Code")
  5. Click Create and copy the key
  6. Save it somewhere safe - you won't see it again!

📸 Screenshot needed: api-key-create.png

2. Choose Your Client

Select your MCP client below for specific setup instructions:

Claude Code

Claude Code is Anthropic's official MCP client available as: - CLI tool for terminal use - VS Code extension for in-editor assistance

Installation

Option 1: CLI (Terminal)

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

Option 2: VS Code Extension

  1. Open VS Code
  2. Go to Extensions (Cmd+Shift+X or Ctrl+Shift+X)
  3. Search for "Claude Code"
  4. Click Install

📸 Screenshot needed: vscode-claude-extension.png

Configuration

CLI Configuration:

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.

VS Code Configuration:

  1. Open Command Palette (Cmd+Shift+P or Ctrl+Shift+P)
  2. Type "Claude Code: Configure MCP Server"
  3. Fill in the form:
  4. Name: preloop
  5. URL: https://preloop.ai/mcp/v1
  6. Transport: http-streaming
  7. Authentication: Bearer Token

  8. Token: Your API key

  9. Click Save

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

Verify Connection

CLI:

claude mcp list

Expected output:

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

VS Code:

  1. Open Claude Code panel
  2. Look for "MCP Servers" section
  3. You should see "preloop" with green checkmark
  4. Click to expand and see available tools

📸 Screenshot needed: claude-code-connected.png

Test Tool Discovery

CLI:

claude mcp tools preloop

You should see tools like: - request_approval (always available) - pay (if you added example MCP server) - create_issue, update_issue (if trackers connected)

VS Code:

  1. In Claude Code chat, type: @preloop
  2. You should see tool suggestions
  3. Try: "Using @preloop, show me available tools"

Usage

CLI:

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

VS Code:

In the Claude Code chat panel:

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

If the pay tool is prelooped, you'll get an approval request!

Cline (VS Code)

Cline is a popular VS Code extension for AI-powered coding assistance with MCP support.

Installation

  1. Open VS Code
  2. Go to Extensions (Cmd+Shift+X or Ctrl+Shift+X)
  3. Search for "Cline"
  4. Click Install

📸 Screenshot needed: vscode-cline-extension.png

Configuration

Method 1: Via Settings UI

  1. Open Cline settings:
  2. Click Cline icon in sidebar
  3. Click gear icon (⚙️) in top-right

  4. Go to "MCP Servers" tab

  5. Click + Add MCP Server

  6. Fill in the form: 

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

  7. Click Save and Test Connection

📸 Screenshot needed: cline-mcp-settings.png

Method 2: Via Configuration File

  1. Open VS Code settings.json:
  2. Cmd+Shift+P (or Ctrl+Shift+P)

  3. Type "Preferences: Open Settings (JSON)"

  4. Add MCP server configuration:

{
  "cline.mcpServers": {
    "preloop": {
      "url": "https://preloop.ai/mcp/v1",
      "transport": "http-streaming",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY_HERE"
      }
    }
  }
}
  1. Save and reload VS Code

Verify Connection

  1. Open Cline panel (click Cline icon in sidebar)
  2. Look for "Connected MCP Servers" section
  3. You should see "Preloop" with green status
  4. Click to expand and verify tools are listed

📸 Screenshot needed: cline-connected.png

Usage

In the Cline chat:

Using tools from Preloop, pay alice@example.com $500

Or reference specific tools:

Use the 'pay' tool to send $500 to alice@example.com

Zed Editor

Zed is a modern code editor with native MCP support built-in.

Installation

Download from zed.dev

macOS: 

brew install zed

Linux: 

curl https://zed.dev/install.sh | sh

Windows: Download installer from zed.dev/download

Configuration

  1. Open Zed
  2. Go to Zed → Settings (or Cmd+, / Ctrl+,)
  3. Click MCP Servers in the sidebar
  4. Click + Add Server
  5. Fill in the form:
Name: Preloop
URL: https://preloop.ai/mcp/v1
Transport: http-streaming
Headers:
  Authorization: Bearer YOUR_API_KEY_HERE
  1. Click Save

📸 Screenshot needed: zed-mcp-config.png

Alternative: Configuration File

Zed stores MCP config in ~/.config/zed/mcp.json:

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

Verify Connection

  1. Open Command Palette: Cmd+Shift+P (or Ctrl+Shift+P)
  2. Type "MCP: List Servers"
  3. You should see "preloop" with status "Connected"
  4. Type "MCP: List Tools"
  5. Select "preloop"
  6. Verify tools are shown

📸 Screenshot needed: zed-mcp-connected.png

Usage

Zed's AI assistant can use MCP tools:

  1. Open AI panel: Cmd+Shift+A (or Ctrl+Shift+A)
  2. In the chat:
Using Preloop tools, pay alice@example.com $500

Or invoke tools directly:

Execute the 'pay' tool with recipient=alice@example.com and amount=500

Custom Clients

Building your own MCP client or using a different MCP-compatible tool?

Connection Details

Endpoint: 

https://preloop.ai/mcp/v1

Transport: 

http-streaming

Authentication: 

Header: Authorization
Value: Bearer YOUR_API_KEY_HERE

Required Headers: 

Authorization: Bearer YOUR_API_KEY_HERE
Content-Type: application/json

MCP Protocol Methods

Preloop supports all standard MCP methods:

Discovery: - tools/list - Get available tools - tools/call - Execute a tool

Notifications: - notifications/progress - Tool execution progress - notifications/cancelled - Tool execution cancelled

Resources (Optional): - resources/list - List available resources - resources/read - Read a specific resource

Example: Python Client

import requests

API_KEY = "sk_live_abc123..."
BASE_URL = "https://preloop.ai/mcp/v1"

headers = {
    "Authorization": f"Bearer {API_KEY}",
    "Content-Type": "application/json"
}

# List available tools
response = requests.post(
    f"{BASE_URL}/tools/list",
    headers=headers,
    json={}
)

tools = response.json()
print(f"Available tools: {len(tools['tools'])}")

# Call a tool
response = requests.post(
    f"{BASE_URL}/tools/call",
    headers=headers,
    json={
        "name": "pay",
        "arguments": {
            "recipient": "alice@example.com",
            "amount": 500
        }
    }
)

result = response.json()
if result.get("requires_approval"):
    print(f"Approval required! Request ID: {result['approval_request_id']}")
    print(f"Check your email or dashboard to approve.")
else:
    print(f"Tool executed: {result['result']}")

Example: Node.js Client

const axios = require('axios');

const API_KEY = 'sk_live_abc123...';
const BASE_URL = 'https://preloop.ai/mcp/v1';

const headers = {
  'Authorization': `Bearer ${API_KEY}`,
  'Content-Type': 'application/json'
};

// List tools
async function listTools() {
  const response = await axios.post(
    `${BASE_URL}/tools/list`,
    {},
    { headers }
  );
  return response.data.tools;
}

// Call a tool
async function callTool(name, args) {
  const response = await axios.post(
    `${BASE_URL}/tools/call`,
    { name, arguments: args },
    { headers }
  );
  return response.data;
}

// Usage
(async () => {
  const tools = await listTools();
  console.log(`Available tools: ${tools.length}`);

  const result = await callTool('pay', {
    recipient: 'alice@example.com',
    amount: 500
  });

  if (result.requires_approval) {
    console.log('Approval required!');
    console.log(`Request ID: ${result.approval_request_id}`);
  } else {
    console.log('Tool executed:', result.result);
  }
})();

Testing Your Client

  1. Test connection: 

    curl -X POST https://preloop.ai/mcp/v1/tools/list \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{}'

  2. Verify tool discovery:

  3. Should return list of available tools
  4. Check for request_approval (always available)

  5. Check for tools from your MCP servers

  6. Test tool call: 

    curl -X POST https://preloop.ai/mcp/v1/tools/call \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "request_approval",
    "arguments": {
      "reason": "Testing my custom MCP client",
      "context": {"test": true}
    }
  }'

  7. Check approval flow:

  8. Should receive approval request
  9. Check email/dashboard
  10. Approve or decline
  11. Client should receive result

Next Steps

Next: Test Your Workflow - Verify your setup works correctly.