OpenBrand

OpenBrand extracts several types of brand assets from a provided URL:

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

OpenBrand extracts the following brand assets from a provided URL:

• Logos: Favicons, apple-touch-icons, header/nav logos, and inline SVGs (using dimension probing).
• Brand colors: Extracted from theme-color meta tags, manifest.json, and dominant colors found in logo imagery.
• Backdrop images: og:image tags, CSS backgrounds, and hero/banner images.
• Brand name: Derived from og:site_name, application-name, logo alt text, or the page title.

To run the OpenBrand web application locally, clone the repository and use bun to install dependencies and start the development server. No environment variables are required for the local development setup.

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

You can integrate OpenBrand directly into your TypeScript/JavaScript projects using the openbrand package. This method does not require an API key for basic usage. Use the extractBrandAssets function to pass a URL and receive a structured result object containing brand identity data.

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[]
}

Use OpenBrand as a tool in MCP-compatible clients like Claude Code or Cursor. While installation doesn't require a key, you must provide an OPENBRAND_API_KEY for the tool to function.

# Add via Claude CLI
claude mcp add --transport stdio \
  --env OPENBRAND_API_KEY=your_api_key \
  openbrand -- npx -y openbrand-mcp

Or manually configure .claude/settings.json:

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

To enable OpenBrand in AI agents like Claude Code, Cursor, Codex, or Gemini CLI, use the skills CLI. Once added, the agent can perform brand extraction tasks via natural language commands (e.g., "extract brand assets from stripe.com").

npx skills add tight-studio/openbrand

You can access OpenBrand's extraction capabilities via a REST API. You must first obtain a free API key from openbrand.sh/dashboard. The endpoint accepts a url query parameter and requires a Bearer token in the Authorization header.

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

The openbrand npm package allows you to run brand extraction directly from your server-side code without an API key (it runs as a library).

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
}

To use OpenBrand with AI coding agents like Claude Code or Cursor, install it as an MCP server using the openbrand-mcp package. You will need an API key from openbrand.sh/dashboard. Once configured, you can use the extract_brand_assets tool to retrieve structured brand data from any URL.

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

A successful extraction returns a data object containing the following fields:

• brand_name: A string representing the identified brand name.
• logos: An array of LogoAsset objects (includes url, alt, type, and resolution).
• colors: An array of ColorAsset objects (includes hex and usage like primary, secondary, or accent).
• backdrop_images: An array of BackdropAsset objects (includes url and description).

The openbrand-mcp package provides a Model Context Protocol (MCP) server that allows AI agents (like Claude) to extract brand assets from any website URL.

To use this tool, you must provide an OPENBRAND_API_KEY. You can obtain a free API key at https://openbrand.sh/dashboard.

To add the tool to Claude, use the following command:

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

You can interact with OpenBrand via a direct HTTP request. Send a GET request to the /api/extract endpoint with the target URL as a query parameter and include your API key in the Authorization header.

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