Meta Agent Tools
PT

Back to the catalog

OpenBrand

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

Open source Open in the app JSON README (API)

About

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

Details

Kind
MCP servers
Topic
No topic detected
Publisher
ethanjyx
Origin
official
Category
ferramentas
Transport
local
Version
0.1.2
Stars
791
Forks
65
Open pull requests
3
Last push
2026-05-12T00:26:23Z
Repository state
ativo
Language
TypeScript
License
MIT
Added
2026-08-29 03:02:46
Updated
2026-08-29 03:02:46
Origin id
io.github.ethanjyx/openbrand

README

<p align="center">
  <img src="public/logo.svg" alt="OpenBrand logo" width="80" height="84" />
</p>

<h1 align="center">OpenBrand</h1>
<p align="center">Extract any brand from a URL</p>

<p align="center">Try it out at <a href="https://openbrand.sh">openbrand.sh</a></p>

<p align="center">
  <img src="public/openbrand.gif" alt="OpenBrand demo" width="600" />
</p>

<p align="center"><sub>Demo prepared with <a href="https://tight.studio/">Tight Studio</a></sub></p>

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)

More