Skip to content

Instantly share code, notes, and snippets.

@mikkelkrogsholm

mikkelkrogsholm/API_MAPPING_PLAYBOOK.md

Created October 5, 2025 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikkelkrogsholm/19672b8797e2efa72e120e84e6bc3e1f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikkelkrogsholm/19672b8797e2efa72e120e84e6bc3e1f to your computer and use it in GitHub Desktop.
Download ZIP
Automated API Mapping Playbook
Raw
API_MAPPING_PLAYBOOK.md

Automated API Mapping Playbook

What Is This?

A simple way to automatically discover and document any website's API by giving Claude Code a single prompt. The AI will:

  • Navigate the website and capture all network traffic
  • Analyze API endpoints, authentication, and parameters
  • Generate complete OpenAPI 3.0 specifications
  • Create code examples in multiple languages
  • Produce comprehensive documentation

Why Use This?

  • ⚡ Fast: 10-30 minutes vs. days of manual work
  • 📝 Complete: Captures all endpoints with request/response details
  • 🎯 Accurate: Direct observation of real API calls
  • 🔄 Automated: Just give the prompt and let AI do the work
  • 📚 Professional: Generates OpenAPI specs and documentation

Installation

Follow the installation instructions for your platform:

👉 https://github.com/ChromeDevTools/chrome-devtools-mcp

The repository covers installation for:

  • Claude Desktop (macOS, Windows, Linux)
  • VS Code with Claude Code
  • Other MCP-compatible clients

After installation, restart your Claude Code client and verify by asking:

Do you have access to Chrome DevTools MCP tools?

How to Use

Copy This Prompt

Simply copy and paste this prompt to Claude Code, replacing [WEBSITE-URL] and [SITE-NAME] with your target:

I want you to map API calls of a site using the chrome dev tools mcp server.

It is this site: [WEBSITE-URL]

I want you to try and do it - I want a complete mapping of how to call their API - just as the site does.

Experiment with it and create a complete workbook for how to solve this task using the mcp server.

I want the output to be a clean OpenAPI standard documentation of the API. Store this in APIs/[SITE-NAME]/*

Please follow this process:

1. INITIAL EXPLORATION (5-10 minutes)
   - Navigate to the website
   - Capture initial page load network traffic
   - Identify the API base URL
   - Find authentication method (API key, bearer token, etc.)
   - List all initial API endpoints called

2. INTERACTIVE DISCOVERY (10-15 minutes)
   - Take a snapshot of the page to identify interactive elements
   - Test search functionality (fill inputs and click search)
   - Navigate through different sections (listings, details, filters)
   - Click on items to see detail page API calls
   - Interact with forms, filters, and navigation
   - Capture all API calls triggered by each interaction

3. API ANALYSIS (5-10 minutes)
   - For each discovered endpoint, get full request details:
     * HTTP method
     * Full URL with parameters
     * Request headers (especially auth headers)
     * Request body (if POST/PUT)
     * Response structure
   - Group endpoints by functionality (search, details, stats, etc.)
   - Identify patterns in:
     * Parameter naming
     * Response formats
     * Authentication
     * Pagination
     * Error handling

4. DOCUMENTATION GENERATION (10-15 minutes)
   Create these files in APIs/[SITE-NAME]/:

   - openapi.yaml: Complete OpenAPI 3.0 specification with:
     * All endpoints
     * Request/response schemas
     * Authentication
     * Parameters and their types
     * Examples

   - README.md: User-friendly documentation with:
     * API overview
     * Authentication guide
     * Quick start examples
     * Endpoint summary table
     * Common use cases

   - workbook.md: Technical details with:
     * Discovery methodology
     * All captured requests/responses
     * Technical findings
     * Architecture insights

   - examples/ folder with:
     * Code examples for main endpoints
     * Multiple languages (bash, JavaScript, Python)
     * Real request/response samples

   - INDEX.md: Navigation guide for all documentation

IMPORTANT:
- Use the Chrome DevTools MCP tools for ALL interactions
- Capture network traffic after EVERY action
- Get detailed request info for EVERY endpoint found
- Document EVERYTHING you discover
- Create working code examples that users can copy-paste
- Make the documentation GitHub-ready

Start immediately and provide updates as you progress through each phase.

What to Expect

Phase 1: Initial Exploration

Claude will:

  • Navigate to the website
  • Capture initial API calls
  • Identify authentication
  • Report base URL and initial findings

Phase 2: Interactive Discovery

Claude will:

  • Fill search forms and click buttons
  • Navigate through pages
  • Interact with filters and options
  • Capture all triggered API calls

Phase 3: API Analysis

Claude will:

  • Analyze each endpoint in detail
  • Extract parameters and schemas
  • Identify patterns and conventions
  • Group endpoints by category

Phase 4: Documentation

Claude will create:

  • APIs/[site-name]/openapi.yaml - Full OpenAPI spec
  • APIs/[site-name]/README.md - Main documentation
  • APIs/[site-name]/workbook.md - Technical details
  • APIs/[site-name]/examples/ - Code samples
  • APIs/[site-name]/INDEX.md - Navigation guide

Time: 30 minutes Endpoints Found: 14 Documentation: 100% complete with working examples

Tips for Success

Choose the Right Target

✅ Good targets:

  • Public websites with clear functionality
  • Sites with search, filters, and listings
  • APIs used by the frontend

❌ Avoid:

  • Sites requiring paid accounts
  • Sites with heavy rate limiting
  • Sites with anti-bot protection

Getting Better Results

  1. Be Specific: Give exact URLs and clear site names
  2. Check Progress: Claude will report findings as it works
  3. Verify Output: Test the generated examples
  4. Iterate: If something is missed, ask Claude to explore that area

Troubleshooting

Issue: "No MCP tools found"

  • Solution: Verify MCP server is installed and Claude Code is restarted

Issue: "Page won't load"

  • Solution: Check if the site is accessible and try a different URL

Issue: "Missing endpoints"

  • Solution: Ask Claude to interact more with specific features

Issue: "Authentication not working"

  • Solution: The captured API key may have expired - this is normal for session-based auth

Advanced Usage

Custom Instructions

Add these to the prompt for specific needs:

For GraphQL APIs:

Also check for GraphQL endpoints and document the schema

For WebSocket APIs:

Look for WebSocket connections and document real-time endpoints

For Specific Features:

Focus specifically on the [checkout/payment/user profile] functionality

For Multiple Languages:

Create code examples in [JavaScript, Python, Go, Ruby, PHP]

Quick Start Checklist

  • Install Chrome DevTools MCP server
  • Start Claude Code
  • Copy the prompt above
  • Replace [WEBSITE-URL] with target site
  • Replace [SITE-NAME] with a folder name
  • Paste into Claude Code
  • Wait for complete documentation

Official MCP Server: https://github.com/ChromeDevTools/chrome-devtools-mcp Model Context Protocol: https://modelcontextprotocol.io/ OpenAPI Specification: https://swagger.io/specification/

Last Updated: October 5, 2025

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment