npm openbrand-mcpstdioMITupdated 3mo ago
Extract brand assets (logos, colors, backdrops, brand name) from any website URL.
Was kannst du mit OpenBrand machen?
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.
- Install the MCP server (no API key needed to install):
claude mcp add --transport stdio openbrand -- npx -y openbrand-mcp
- 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
Installation
OpenBrand zu deinem Client hinzufügen. Wähl den, den du nutzt.
claude mcp add openbrand-mcp -- npx -y openbrand-mcpcodex mcp add openbrand-mcp -- npx -y openbrand-mcpamp mcp add openbrand-mcp -- npx -y openbrand-mcp{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `claude_desktop_config.json`, then restart Claude Desktop.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.cursor/mcp.json`, or `.cursor/mcp.json` for a single project.
code --add-mcp '{"name":"openbrand-mcp","command":"npx","args":["-y","openbrand-mcp"]}'Or add the block manually to `.vscode/mcp.json` under `servers`.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.codeium/windsurf/mcp_config.json`.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `cline_mcp_settings.json` via the MCP Servers panel.
{
"mcpServers": {
"openbrand-mcp": {
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}Add to `~/.gemini/settings.json`.
{
"mcpServers": {
"openbrand-mcp": {
"type": "local",
"command": "npx",
"args": [
"-y",
"openbrand-mcp"
],
"tools": [
"*"
]
}
}
}Add to `~/.copilot/mcp-config.json`, or run `/mcp add` inside the CLI.
{
"context_servers": {
"openbrand-mcp": {
"command": {
"path": "npx",
"args": [
"-y",
"openbrand-mcp"
]
}
}
}
}Add to your Zed `settings.json`.
npx -y openbrand-mcpRun `goose configure`, choose **Add Extension → Command-line Extension**, and paste this command.
Score
39 / 100
Unvollständig
- Dokumentation22/25
- Pflege19/25
- Vertrauen16/20
- Funktionsumfang0/15
- Installation12/15
- Documents what it does and how to connect
- Has a resolvable package or endpoint
- Exposes at least one tool, prompt or resource
- README has substantive content
- Includes a code example
- Documents its configuration
- Mentions credentials or security posture
- Last commit 112 days ago
- Has a release history
- Repository is not archived
- Licensed MIT
- Namespace verified in the official MCP registry
- Claimed by its owner
- Published under an organisation
- 0 tool(s) documented
- Provides prompt templates
- Provides resources
- 12 documented install method(s)
- Published to a package registry
- Offers a hosted endpoint — no local install
Versionsverlauf
| Versionen | Veröffentlicht |
|---|---|
| 0.1.2Aktuell | 14. März 2026 |
| 0.1.1 | 14. März 2026 |
| 0.1.0 | 14. März 2026 |