Openbrand Asset Extraction

---
name: openbrand-asset-extraction
description: Extract brand assets (logos, colors, backdrops, brand name) from any website URL using OpenBrand
triggers:
  - extract brand assets from a website
  - get logo and colors from a URL
  - fetch brand colors from a website
  - extract favicon and brand name from a domain
  - get og image and brand assets
  - pull brand kit from a website URL
  - extract brand assets like Brand.dev
  - get brand logo colors backdrop from URL
---

# OpenBrand Asset Extraction

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

OpenBrand extracts brand assets — logos, colors, backdrop images, and brand name — from any website URL. It is an open-source alternative to Brand.dev, available as an npm package, REST API, MCP server, or agent skill.

## Installation

### npm package (no API key required)

```bash
npm add openbrand
# or
bun add openbrand

MCP server for Claude Code / Cursor

# Without API key (uses local extraction)
claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp

# With API key (uses hosted API)
claude mcp add --transport stdio \
  --env OPENBRAND_API_KEY=$OPENBRAND_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_here"
      }
    }
  }
}

Agent skill (Claude Code, Cursor, Codex, Gemini CLI)

npx skills add ethanjyx/openbrand

Self-host the web app

git clone https://github.com/ethanjyx/openbrand.git
cd openbrand
bun install
bun dev
# Open http://localhost:3000

No environment variables required for local dev.

npm Package Usage

Basic extraction

import { extractBrandAssets } from "openbrand";

const result = await extractBrandAssets("https://stripe.com");

if (result.ok) {
  const { brand_name, logos, colors, backdrop_images } = result.data;
  console.log("Brand name:", brand_name);         // "Stripe"
  console.log("Logos:", logos);                    // LogoAsset[]
  console.log("Colors:", colors);                  // ColorAsset[]
  console.log("Backdrops:", backdrop_images);      // BackdropAsset[]
} else {
  console.error("Error code:", result.error.code);       // "ACCESS_BLOCKED" | "NOT_FOUND" | "SERVER_ERROR" | ...
  console.error("Error message:", result.error.message); // human-readable explanation
}

Working with logos

import { extractBrandAssets } from "openbrand";

const result = await extractBrandAssets("https://github.com");

if (result.ok) {
  const { logos } = result.data;

  // Find the highest-resolution logo
  const best = logos.reduce((a, b) =>
    (a.width ?? 0) * (a.height ?? 0) >= (b.width ?? 0) * (b.height ?? 0) ? a : b
  );