OpenBrand

Official

by tight-studio · TypeScript

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

io.github.ethanjyx/openbrand — MCP Server

This MCP server extracts brand assets from any website URL. Based on its description, it targets logo files, color palettes, backdrop imagery, and the brand name. The project also documents an OpenBrand web interface at openbrand.sh and includes a demo GIF.

🛠️ Key Features

Extracts logos from a provided website URL
Extracts colors from a provided website URL
Extracts backdrop images from a provided website URL
Extracts brand name from a provided website URL

🚀 Use Cases

Derive visual identity components (logos, colors, backdrops) from an existing website
Obtain a brand name associated with a given URL

⚡ Developer Benefits

Provides an API-based workflow (“As an API call”) and references free API key acquisition

⚠️ Limitations

Source material does not describe supported domains, output formats, authentication details beyond “API key,” or error handling

README.md4 KBView on GitHub

OpenBrand logo

OpenBrand

Extract any brand from a URL

Try it out at openbrand.sh

OpenBrand demo

_{Demo prepared with Tight Studio}

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

bash

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

TypeScript

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

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:

bash

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.

bash

npm add openbrand

typescript

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):

bash

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

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

bash

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

Or add to .claude/settings.json:

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

bash

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

Install

Configuration

Environment variables

OPENBRAND_API_KEYsecret

Your OpenBrand API key from https://openbrand.sh/dashboard

Add to VS Code Add to Cursor

claude_desktop_config.json

json

{
  "mcpServers": {
    "openbrand": {
      "command": "npx",
      "args": [
        "-y",
        "openbrand-mcp@0.1.2"
      ],
      "env": {
        "OPENBRAND_API_KEY": "<YOUR_OPENBRAND_API_KEY>"
      }
    }
  }
}

io.github.ethanjyx/openbrand — MCP Server

🛠️ Key Features

🚀 Use Cases

⚡ Developer Benefits

⚠️ Limitations

OpenBrand

As an API call

As an agent skill

As an npm package

As an MCP server

Self-hosting the web app

What it extracts

Tech stack

License

Install

Configuration

Related servers