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](https://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](https://skills.sh/tight-studio/openbrand/openbrand) Add OpenBrand to Claude Code, Cursor, Codex, Gemini CLI, and [40+ other agents](https://skills.sh): ```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](https://www.npmjs.com/package/openbrand) 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](https://www.npmjs.com/package/openbrand-mcp) 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): ```bash claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp ``` 2. Get your API key from [openbrand.sh/dashboard](https://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](LICENSE)