Extract brand assets (logos, colors, backdrop images, brand name) from any website URL

How do I install OpenBrand?

Clone OpenBrand from https://github.com/ethanjyx/openbrand and configure it as an MCP server in your client (Claude Desktop, Cursor, or VS Code).

Is OpenBrand open source?

Yes, OpenBrand is open source under the MIT license. Source code is available at https://github.com/ethanjyx/openbrand.

What category does OpenBrand belong to?

OpenBrand is listed under Search & Knowledge MCP servers on MCPFind.

OpenBrand — MCP Server for Search & Knowledge

Extract brand assets (logos, colors, backdrops, brand name) from any website URL.

As an API call

Get your free API key from openbrand.sh/dashboard.

cURL

curl "https://openbrand.sh/api/extract?url=https://stripe.com" \
  -H "Authorization: Bearer your_api_key"

TypeScript

const res = await fetch(
  "https://openbrand.sh/api/extract?url=https://stripe.com",
  { headers: { Authorization: "Bearer your_api_key" } }
);
const brand = await res.json();

Python

import requests

res = requests.get(
    "https://openbrand.sh/api/extract",
    params={"url": "https://stripe.com"},
    headers={"Authorization": "Bearer your_api_key"},
)
brand = res.json()

As an agent skill

Add OpenBrand to Claude Code, Cursor, Codex, Gemini CLI, and 40+ other agents:

npx skills add tight-studio/openbrand

Once installed, your agent automatically knows how to extract brand assets — just ask it to "extract brand assets from stripe.com".

As an npm package

No API key required. Runs as a library from your server-side code.

npm add openbrand

import { extractBrandAssets } from "openbrand";

const result = await extractBrandAssets("https://stripe.com");
if (result.ok) {
  // result.data.brand_name → "Stripe"
  // result.data.logos → LogoAsset[]
  // result.data.colors → ColorAsset[]
  // result.data.backdrop_images → BackdropAsset[]
} else {
  // result.error.code → "ACCESS_BLOCKED" | "NOT_FOUND" | "SERVER_ERROR" | ...
  // result.error.message → human-readable explanation
}

As an MCP server

Use OpenBrand as a tool in Claude Code, Cursor, or any MCP-compatible client.

Install the MCP server (no API key needed to install):

claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp

Get your API key from openbrand.sh/dashboard and add it:

claude mcp add --transport stdio \
  --env OPENBRAND_API_KEY=your_api_key \
  openbrand -- npx -y openbrand-mcp

Or add to .claude/settings.json:

{
  "mcpServers": {
    "openbrand": {
      "command": "npx",
      "args": ["-y", "openbrand-mcp"],
      "env": {
        "OPENBRAND_API_KEY": "your_api_key"
      }
    }
  }
}

Then ask Claude to "extract brand assets from stripe.com" and it will use the extract_brand_assets tool automatically.

Self-hosting the web app

git clone https://github.com/tight-studio/openbrand.git
cd openbrand
bun install
bun dev

No environment variables required. Open http://localhost:3000.

What it extracts

Logos — favicons, apple-touch-icons, header/nav logos, inline SVGs (with dimension probing)
Brand colors — from theme-color meta tags, manifest.json, and dominant colors from logo imagery
Backdrop images — og:image, CSS backgrounds, hero/banner images
Brand name — from og:site_name, application-name, logo alt text, page title

Tech stack

Next.js, React, TypeScript, Cheerio, Sharp, Tailwind CSS

License

MIT

Set up in your AI client

AI clientOperating system

Merge this template into ~/Library/Application Support/Claude/claude_desktop_config.json. Keep existing servers. Add any arguments, credentials, and permissions required by the maintainer; this template has not been install-tested.

json

{
  "mcpServers": {
    "io-github-ethanjyx-openbrand": {
      "command": "npx",
      "args": [
        "-y",
        "openbrand-mcp"
      ]
    }
  }
}

Restart Claude Desktop completely for changes to take effect. Confirm the server appears connected in the client’s tool list, then try a read-only example from its documentation.

Claude Desktop setup reference

Compatible MCP Clients

OpenBrand works with any MCP-compatible client. Copy the config snippet from the Configuration section above and add it to the file shown for your client, then restart the application.

Claude Desktop~/Library/Application Support/Claude/claude_desktop_config.jsonRestart Claude Desktop completely for changes to take effect.

Cursor~/.cursor/mcp.jsonRestart Cursor for changes to take effect.

VS Code.vscode/mcp.jsonReload VS Code window for changes to take effect.

Windsurf~/.codeium/windsurf/mcp_config.jsonRestart Windsurf for changes to take effect.

Claude Code.mcp.jsonSave at the project root, then start Claude Code in that project and review the MCP server approval prompt. Keep real credentials out of shared files.

OpenBrand