Use Sqrap with your agent

Sqrap is the most AI agent friendly design inspiration site on the internet. Every design is labeled with its industry, visual style, theme, palette, pages, sections and a design score, so your agent can compare it with your project and pick the best fit on its own.

Give Claude Code, Cursor or VS Code real websites to look at before they build a landing, pricing or signup page. Sqrap's MCP server finds whole pages and single sections (hero, pricing table, footer…) with their palettes, themes and screenshots, and always names the site they came from.

No setup: point your agent at Sqrap

Any agent that can fetch a URL can read Sqrap, with no key and no JavaScript. /designs.md is the whole catalog as markdown, with filters by industry, style, theme, page and color, and a short guide to matching a brief to a design. Each design has its own page, such as /designs/linear.app.md, with every captured page's palette and sections top to bottom. /llms.txt points to all of it. Ask your agent:

Read https://sqrap.com/designs.md and pick the design that best fits my project:
a meditation app for busy parents, calm and friendly, light theme.
Explain why, and link the site it comes from.

For more, connect the MCP server

With a free API key your agent also gets full-page image tiles, sections by type, “more like this” by look and a one-call design brief.

1. Create an API key

Sign in and open API keys to create one. The MCP server and the API both take it as Authorization: Bearer <key>. Keep it private; each key has a daily call limit.

2. Add the MCP server

The server lives at https://sqrap.com/mcp (Streamable HTTP). Replace YOUR_SQRAP_KEY with your key.

Claude Code

claude mcp add --transport http sqrap https://sqrap.com/mcp \
  --header "Authorization: Bearer YOUR_SQRAP_KEY"

Cursor

In ~/.cursor/mcp.json, or .cursor/mcp.json in a project:

{
  "mcpServers": {
    "sqrap": {
      "url": "https://sqrap.com/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_SQRAP_KEY"
      }
    }
  }
}

VS Code

In .vscode/mcp.json. VS Code asks for the key the first time and stores it for you:

{
  "inputs": [
    {
      "type": "promptString",
      "id": "sqrap-key",
      "description": "Sqrap API key",
      "password": true
    }
  ],
  "servers": {
    "sqrap": {
      "type": "http",
      "url": "https://sqrap.com/mcp",
      "headers": {
        "Authorization": "Bearer ${input:sqrap-key}"
      }
    }
  }
}

3. Ask for references

The server has six tools: design_brief (five to eight references for the page you are building, with their palettes, section order and the judge's scores), search_screens (whole pages, filtered by page pattern, industry, color, theme, style such as minimal or editorial, and more), search_sections (single sections by type), get_site (one site's pages, each with its sections in order), find_similar (more designs that look like a result, or like a screenshot you send) and list_filters (every filter value). Results carry image URLs; set include_images to get up to four small images inline. Try “Find three dark pricing pages on Sqrap and build ours in that spirit”.

For Claude Code there is also a Sqrap skill that tells the agent when to reach for Sqrap. Install it for all your projects with:

mkdir -p ~/.claude/skills/sqrap && \
curl -fsSL -o ~/.claude/skills/sqrap/SKILL.md \
  https://raw.githubusercontent.com/jaequery/sqrap/main/skills/sqrap/SKILL.md

If your client reports that the server needs authentication or that OAuth failed, the Authorization header is missing or the key is wrong or revoked: Sqrap uses API keys, not OAuth.

Prefer plain HTTP?

The same data is in the REST API, described by its OpenAPI spec.

curl -H "Authorization: Bearer YOUR_SQRAP_KEY" \
  "https://sqrap.com/api/v1/sections?type=Pricing%20table&limit=5"

Credit the source

Every screenshot comes from a real website that owns its design, name and logo. When your agent shows or describes one, it should name the site and link to it, and the images may not be used to train models. Read the terms for agents and API use.