OpenBrand

السجل الرسمي التسويق والمبيعات

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

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «mcpServers»).

NPM package openbrand-mcp
Claude Code
claude mcp add openbrand -e 'OPENBRAND_API_KEY=<your openbrand_api_key>' -- npx -y openbrand-mcp@0.1.2
إعداد JSON (Claude Desktop وCursor وVS Code)
{
    "mcpServers": {
        "openbrand": {
            "command": "npx",
            "args": [
                "-y",
                "openbrand-mcp@0.1.2"
            ],
            "env": {
                "OPENBRAND_API_KEY": "<your openbrand_api_key>"
            }
        }
    }
}

متغيرات البيئة

  • OPENBRAND_API_KEY سري Your OpenBrand API key from https://openbrand.sh/dashboard

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  1. OpenBrand
  2. As an API call
  3. As an agent skill
  4. As an npm package
  5. As an MCP server
  6. Self-hosting the web app
  7. What it extracts
  8. Tech stack
  9. License

OpenBrand

Extract any brand from a URL

Try it out at openbrand.sh

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

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.

  1. Install the MCP server (no API key needed to install):
claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp
  1. 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

الأسئلة الشائعة

ما هو OpenBrand؟

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

كيف أثبّت OpenBrand؟

يعمل على جهازك. في Claude Code: claude mcp add openbrand -e 'OPENBRAND_API_KEY=<your openbrand_api_key>' -- npx -y openbrand-mcp@0.1.2. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج OpenBrand إلى مفتاح API؟

نعم. يتطلب OPENBRAND_API_KEY، وتضبطها في إعداداته.

هل OpenBrand مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون OpenBrand؟

ينشره ethanjyx. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.