### Development Setup - Bash Source: https://context7.com/ethanjyx/openbrand/llms.txt Commands to clone the OpenBrand repository, install dependencies using Bun, and start the development server. Also includes commands for building the npm package and running integration tests. ```bash git clone https://github.com/ethanjyx/openbrand.git cd openbrand bun install bun dev bun run build:pkg bun test ``` -------------------------------- ### Setup OpenBrand MCP Server Source: https://github.com/ethanjyx/openbrand/blob/main/SKILL.md Configure the MCP server for OpenBrand, which is recommended for Claude Code and Cursor. This setup requires an API key obtained from openbrand.sh/dashboard. ```bash claude mcp add --transport stdio \ --env OPENBRAND_API_KEY=your_api_key \ openbrand -- npx -y openbrand-mcp ``` -------------------------------- ### Extract Brand Assets via REST API Source: https://context7.com/ethanjyx/openbrand/llms.txt Demonstrates how to perform GET requests to the OpenBrand API endpoint. Includes examples for basic extraction and bypassing the 30-day cache using the fresh parameter. ```bash curl "https://openbrand.sh/api/extract?url=https://stripe.com" -H "Authorization: Bearer ob_live_your_api_key" curl "https://openbrand.sh/api/extract?url=https://github.com&fresh=true" -H "Authorization: Bearer ob_live_your_api_key" ``` -------------------------------- ### Configure OpenBrand MCP server Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Provides configuration examples for integrating OpenBrand as an MCP tool for AI agents. ```json { "mcpServers": { "openbrand": { "command": "npx", "args": ["-y", "openbrand-mcp"], "env": { "OPENBRAND_API_KEY": "your_api_key" } } } } ``` -------------------------------- ### Install and Configure MCP Server for OpenBrand (Bash) Source: https://context7.com/ethanjyx/openbrand/llms.txt Provides the bash command to install the MCP server for Claude Code, setting up the necessary environment variable for the API key and specifying the openbrand package. ```bash # Install MCP server for Claude Code claude mcp add --transport stdio \ --env OPENBRAND_API_KEY=ob_live_your_api_key \ openbrand -- npx -y openbrand-mcp # Or configure in .claude/settings.json ``` -------------------------------- ### Example MCP Tool Response (JSON) Source: https://context7.com/ethanjyx/openbrand/llms.txt An example of the JSON response returned by the `extract_brand_assets` MCP tool, showcasing the extracted brand name, logos, colors, and backdrops. ```json // Example tool response (JSON string) { "brandName": "Stripe", "logos": [ { "url": "https://stripe.com/favicon.ico", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } } ], "colors": [ { "hex": "#635bff", "usage": "primary" } ], "backdrops": [ { "url": "https://stripe.com/og.png", "description": "Open Graph image" } ] } ``` -------------------------------- ### GET /api/keys Source: https://context7.com/ethanjyx/openbrand/llms.txt Retrieves a list of all active, non-revoked API keys associated with the authenticated user session. ```APIDOC ## GET /api/keys ### Description Lists all active (non-revoked) API keys for the authenticated user. Requires session authentication. ### Method GET ### Endpoint /api/keys ### Parameters None ### Request Example GET /api/keys ### Response #### Success Response (200) - **keys** (array) - List of API key objects containing id, name, key_prefix, created_at, and last_used_at. #### Response Example { "keys": [ { "id": "uuid", "name": "Production", "key_prefix": "ob_live_abc123...", "created_at": "2024-01-15T10:30:00Z", "last_used_at": "2024-01-20T15:45:00Z" } ] } ``` -------------------------------- ### GET /api/extract Source: https://context7.com/ethanjyx/openbrand/llms.txt Extracts brand assets including logos, colors, and backdrops from a specified website URL. Supports cache bypassing via the fresh parameter. ```APIDOC ## GET /api/extract ### Description Extracts brand assets from any website URL. Requires a valid API key obtained from openbrand.sh/dashboard. Returns structured brand data including logos, colors, backdrops, and detected brand name. ### Method GET ### Endpoint https://openbrand.sh/api/extract ### Parameters #### Query Parameters - **url** (string) - Required - The target website URL to extract assets from. - **fresh** (boolean) - Optional - If set to true, bypasses the 30-day cache to perform a fresh extraction. ### Request Example GET https://openbrand.sh/api/extract?url=https://stripe.com Authorization: Bearer ob_live_your_api_key ### Response #### Success Response (200) - **success** (boolean) - Indicates if the request was successful. - **data** (object) - Contains brandName, logos, colors, and backdrops. #### Response Example { "success": true, "data": { "brandName": "Stripe", "logos": [ { "url": "https://stripe.com/favicon.ico", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } } ], "colors": [ { "hex": "#635bff", "usage": "primary" } ], "backdrops": [ { "url": "https://stripe.com/og-image.png", "description": "Open Graph image" } ] } } ``` -------------------------------- ### Self-host OpenBrand web application Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Commands to clone and run the OpenBrand web application locally using Bun. ```bash git clone https://github.com/ethanjyx/openbrand.git cd openbrand bun install bun dev ``` -------------------------------- ### Self-hosting OpenBrand Web App Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Instructions for cloning the OpenBrand repository and running the web application locally. ```APIDOC ## Self-hosting the Web App ### Description Clone the OpenBrand repository and run the web application on your local machine. ### Steps 1. Clone the repository: ```bash git clone https://github.com/ethanjyx/openbrand.git ``` 2. Navigate to the project directory: ```bash cd openbrand ``` 3. Install dependencies: ```bash bun install ``` 4. Start the development server: ```bash bun dev ``` After running these commands, the OpenBrand web application will be accessible at `http://localhost:3000`. No environment variables are required for local development. ``` -------------------------------- ### MCP Server Configuration (JSON) Source: https://context7.com/ethanjyx/openbrand/llms.txt Illustrates the JSON configuration for the MCP server in `.claude/settings.json`, defining the 'openbrand' server with its command, arguments, and environment variables, including the API key. ```json { "mcpServers": { "openbrand": { "command": "npx", "args": ["-y", "openbrand-mcp"], "env": { "OPENBRAND_API_KEY": "ob_live_your_api_key" } } } } ``` -------------------------------- ### Extract brand assets using npm library Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Shows how to use the openbrand npm package to extract assets directly in server-side code without an API key. ```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" | ... } ``` -------------------------------- ### Extract Brand Assets from Website (TypeScript) Source: https://context7.com/ethanjyx/openbrand/llms.txt Demonstrates how to use the `extractBrandAssets` function to scrape a website for brand assets. It shows how to handle successful extraction and various error types, providing type-safe access to logos, colors, and backdrop images. ```typescript import { extractBrandAssets } from "openbrand"; import type { LogoAsset, ColorAsset, BackdropAsset } from "openbrand"; // Basic extraction const result = await extractBrandAssets("https://github.com"); if (result.ok) { const { brand_name, logos, colors, backdrop_images } = result.data; console.log(`Brand: ${brand_name}`); // Brand: GitHub // Process logos with type information for (const logo of logos) { console.log(`Logo: ${logo.url}`); console.log(` Type: ${logo.type}`); // "favicon" | "apple-touch-icon" | "logo" | "icon" | "img" | "svg" if (logo.resolution) { console.log(` Dimensions: ${logo.resolution.width}x${logo.resolution.height}`); } } // Use extracted colors for theming for (const color of colors) { console.log(`Color: ${color.hex} (${color.usage})`); // Color: #24292f (primary) // Color: #ffffff (secondary) } // Get backdrop images for hero sections for (const backdrop of backdrop_images) { console.log(`Backdrop: ${backdrop.url}`); console.log(` Source: ${backdrop.description}`); // Backdrop: https://github.githubassets.com/images/... // Source: Open Graph image } } else { // Handle specific error types const { code, message, status } = result.error; switch (code) { case "ACCESS_BLOCKED": console.log("Site has bot protection enabled"); break; case "NOT_FOUND": console.log("Page not found (404)"); break; case "SERVER_ERROR": console.log(`Server error: HTTP ${status}`); break; case "NETWORK_ERROR": console.log("Network connectivity issue"); break; case "EMPTY_CONTENT": console.log("Page loaded but no brand assets found"); break; } } ``` -------------------------------- ### OpenBrand SDK - Extract Brand Assets (TypeScript) Source: https://github.com/ethanjyx/openbrand/blob/main/SKILL.md This snippet demonstrates how to use the OpenBrand npm package in a TypeScript project to extract brand assets from a URL without needing an API key. ```APIDOC ## Function: extractBrandAssets ### Description Extracts brand assets from a website URL using the OpenBrand Node.js SDK. ### Method `extractBrandAssets(url: string): Promise>` ### Parameters #### Arguments - **url** (string) - Required - The URL of the website to extract brand assets from. ### Request Example ```typescript import { extractBrandAssets } from "openbrand"; const result = await extractBrandAssets("https://stripe.com"); if (result.ok) { // Access extracted data: // result.data.brand_name // result.data.logos // result.data.colors // result.data.backdrop_images } else { // Handle error: // result.error } ``` ### Response #### Success Response - **ok** (boolean) - True if the extraction was successful. - **data** (object) - Contains the extracted brand assets: - **brand_name** (string) - The extracted brand name. - **logos** (array) - An array of logo assets. - **colors** (array) - An array of color assets. - **backdrop_images** (array) - An array of backdrop image assets. #### Error Response - **ok** (boolean) - False if an error occurred. - **error** (object) - An object containing error details. ``` -------------------------------- ### OpenBrand npm Package Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Use OpenBrand as a library in your server-side code without needing an API key. This method runs locally. ```APIDOC ## OpenBrand npm Package ### Description Integrates OpenBrand directly into your server-side application as a library. No API key is required for this method. ### Installation ```bash npm add openbrand ``` ### Usage ```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 } ``` ### Response Data Structure - **brand_name** (string) - The extracted brand name. - **logos** (array) - An array of logo assets, each with `url`, `width`, and `height`. - **colors** (array) - An array of color assets, each with `hex` and `name`. - **backdrop_images** (array) - An array of backdrop image assets, each with a `url`. ``` -------------------------------- ### Build Configuration - TypeScript Source: https://context7.com/ethanjyx/openbrand/llms.txt Configuration file for tsup, a build tool for TypeScript. It defines the entry points, output formats (CommonJS and ES Modules), enables declaration file generation, cleaning, and sourcemaps for package builds. ```typescript import { defineConfig } from "tsup"; export default defineConfig({ entry: ["src/index.ts"], format: ["cjs", "esm"], dts: true, clean: true, sourcemap: true, }); ``` -------------------------------- ### Extract Brand Assets using API Source: https://github.com/ethanjyx/openbrand/blob/main/SKILL.md Access OpenBrand's functionality directly via its API. This method requires an API key for authentication and allows fetching brand assets by providing a website URL. ```bash curl "https://openbrand.sh/api/extract?url=https://stripe.com" \ -H "Authorization: Bearer your_api_key" ``` -------------------------------- ### Create API Key - TypeScript Source: https://context7.com/ethanjyx/openbrand/llms.txt Creates a new API key for the authenticated user. The response contains the full plaintext key, which is only provided once and must be stored securely. It also returns the key prefix and name. ```typescript const response = await fetch("/api/keys", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Production Server" }) }); const { key, key_prefix, name } = await response.json(); ``` -------------------------------- ### extract_brand_assets (MCP Tool) Source: https://context7.com/ethanjyx/openbrand/llms.txt MCP server tool designed for AI agents to extract brand assets from a URL. Requires an API key. ```APIDOC ## extract_brand_assets (MCP Tool) ### Description An MCP tool that allows AI agents to extract brand assets from a website URL. Requires the OPENBRAND_API_KEY environment variable. ### Parameters #### Input Schema - **url** (string) - Required - The website URL to extract brand assets from. ### Response Example { "brandName": "Stripe", "logos": [ { "url": "https://stripe.com/favicon.ico", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } } ], "colors": [ { "hex": "#635bff", "usage": "primary" } ], "backdrops": [ { "url": "https://stripe.com/og.png", "description": "Open Graph image" } ] } ``` -------------------------------- ### Extract brand assets via API Source: https://github.com/ethanjyx/openbrand/blob/main/README.md Demonstrates how to fetch brand data from the OpenBrand API using an authorization header. Supports cURL, TypeScript, and Python. ```bash 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() ``` -------------------------------- ### Extract Brand Assets using npm Package Source: https://github.com/ethanjyx/openbrand/blob/main/SKILL.md Integrate OpenBrand into your Node.js project using the npm package. This method does not require an API key and allows programmatic extraction of brand assets from a given URL. ```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[] } ``` -------------------------------- ### POST /api/keys Source: https://context7.com/ethanjyx/openbrand/llms.txt Generates a new API key for the authenticated user. The full plaintext key is returned only once in the response. ```APIDOC ## POST /api/keys ### Description Creates a new API key for the authenticated user. Returns the full plaintext key only once—store it securely as it cannot be retrieved again. ### Method POST ### Endpoint /api/keys ### Parameters #### Request Body - **name** (string) - Required - A descriptive name for the API key. ### Request Example { "name": "Production Server" } ### Response #### Success Response (200) - **key** (string) - The full plaintext API key. - **key_prefix** (string) - The first 16 characters of the key. - **name** (string) - The name assigned to the key. #### Response Example { "key": "ob_live_abc123def456...", "key_prefix": "ob_live_abc123...", "name": "Production Server" } ``` -------------------------------- ### List API Keys - TypeScript Source: https://context7.com/ethanjyx/openbrand/llms.txt Fetches a list of all active API keys for the authenticated user. Requires session authentication. The response includes key ID, name, prefix, creation date, and last used date. ```typescript const response = await fetch("/api/keys", { credentials: "include" }); const { keys } = await response.json(); ``` -------------------------------- ### Extract Brand Assets with TypeScript Client Source: https://context7.com/ethanjyx/openbrand/llms.txt A TypeScript implementation for the OpenBrand API. It defines the expected response structure and provides an asynchronous function to fetch and handle brand data. ```typescript interface BrandResult { brandName: string; logos: Array<{ url: string; alt?: string; type?: "img" | "svg" | "favicon" | "apple-touch-icon" | "icon" | "logo"; resolution?: { width: number; height: number; aspect_ratio: number } }>; colors: Array<{ hex: string; usage?: "primary" | "secondary" | "accent" | "background" | "text" }>; backdrops: Array<{ url: string; description?: string }>; } async function extractBrand(url: string, apiKey: string): Promise { const response = await fetch(`https://openbrand.sh/api/extract?url=${encodeURIComponent(url)}`, { headers: { Authorization: `Bearer ${apiKey}` } }); const result = await response.json(); if (!result.success) { throw new Error(`${result.errorCode}: ${result.error}`); } return result.data; } const brand = await extractBrand("https://stripe.com", "ob_live_your_key"); ``` -------------------------------- ### Extract Brand Assets with Python Client Source: https://context7.com/ethanjyx/openbrand/llms.txt A Python implementation using the requests library to interact with the OpenBrand API. It handles authentication and parses the JSON response into a dictionary. ```python import requests def extract_brand(url: str, api_key: str) -> dict: response = requests.get( "https://openbrand.sh/api/extract", params={"url": url}, headers={"Authorization": f"Bearer {api_key}"}, ) result = response.json() if not result.get("success"): raise Exception(f"{result.get('errorCode')}: {result.get('error')}") return result["data"] brand = extract_brand("https://stripe.com", "ob_live_your_api_key") ``` -------------------------------- ### OpenBrand API - Extract Brand Assets Source: https://github.com/ethanjyx/openbrand/blob/main/SKILL.md This snippet shows how to use the OpenBrand API via cURL to extract brand assets from a specified URL. It requires an API key for authentication. ```APIDOC ## POST /api/extract ### Description Extracts brand assets (logos, colors, backdrop images, brand name) from a given website URL. ### Method GET ### Endpoint /api/extract ### Parameters #### Query Parameters - **url** (string) - Required - The URL of the website to extract brand assets from. #### Headers - **Authorization** (string) - Required - Bearer token for API authentication. Format: `Bearer your_api_key` ### Request Example ```bash curl "https://openbrand.sh/api/extract?url=https://stripe.com" \ -H "Authorization: Bearer your_api_key" ``` ### Response #### Success Response (200) - **brandName** (string) - The extracted brand name. - **logos** (array) - An array of logo assets, each with a URL, type, and resolution. - **colors** (array) - An array of color assets, each with a hex code and usage. - **backdrops** (array) - An array of backdrop image assets, each with a URL and description. #### Response Example ```json { "brandName": "Stripe", "logos": [ { "url": "https://...", "type": "favicon", "resolution": { "width": 32, "height": 32, "aspect_ratio": 1 } } ], "colors": [ { "hex": "#635bff", "usage": "primary" }, { "hex": "#0a2540", "usage": "secondary" } ], "backdrops": [ { "url": "https://...", "description": "Hero image" } ] } ``` ``` -------------------------------- ### Extract Brand Assets via API Source: https://github.com/ethanjyx/openbrand/blob/main/README.md This section shows how to extract brand assets from a given URL using the OpenBrand API. You will need an API key, which can be obtained from openbrand.sh/dashboard. ```APIDOC ## GET /api/extract ### Description Extracts brand assets (logos, colors, backdrops, brand name) from a website URL. ### Method GET ### Endpoint /api/extract ### Query Parameters - **url** (string) - Required - The URL of the website to extract brand assets from. ### Headers - **Authorization** (string) - Required - Bearer token for API authentication. Format: `Bearer your_api_key` ### Request Example **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() ``` ### Response #### Success Response (200) - **brand_name** (string) - The extracted brand name. - **logos** (array) - An array of logo assets. - **colors** (array) - An array of color assets. - **backdrop_images** (array) - An array of backdrop image assets. #### Response Example ```json { "brand_name": "Stripe", "logos": [ { "url": "https://stripe.com/img/logo.svg", "width": 120, "height": 32 } ], "colors": [ {"hex": "#008CFF", "name": "Primary Blue"} ], "backdrop_images": [ {"url": "https://stripe.com/img/hero.jpg"} ] } ``` ``` -------------------------------- ### MCP Tool Schema for Brand Asset Extraction (TypeScript) Source: https://context7.com/ethanjyx/openbrand/llms.txt Defines the schema for the `extract_brand_assets` MCP tool, specifying its name, description, and input schema which requires a website URL. ```typescript // MCP tool schema { name: "extract_brand_assets", description: "Extract brand assets (logos, colors, backdrop images, brand name) from a website URL", inputSchema: { type: "object", properties: { url: { type: "string", description: "The website URL to extract brand assets from (e.g. https://stripe.com)" } }, required: ["url"] } } ``` -------------------------------- ### OpenBrand Type Definitions (TypeScript) Source: https://context7.com/ethanjyx/openbrand/llms.txt Defines the core TypeScript interfaces and types used by the OpenBrand package, including `LogoAsset`, `ColorAsset`, `BackdropAsset`, and the discriminated union `ExtractionResult` for robust error handling. ```typescript // Core asset types exported from the package export interface LogoAsset { url: string; alt?: string; type?: "img" | "svg" | "favicon" | "apple-touch-icon" | "logo" | "icon"; resolution?: { width: number; height: number; aspect_ratio: number; }; } export interface ColorAsset { hex: string; // Always 6-digit hex like "#635bff" usage?: "primary" | "secondary" | "accent" | "background" | "text"; } export interface BackdropAsset { url: string; description?: string; // "Open Graph image", "Hero/banner image", "CSS background image" } // Result type using discriminated union pattern export type ExtractionError = { code: "ACCESS_BLOCKED" | "NOT_FOUND" | "SERVER_ERROR" | "NETWORK_ERROR" | "EMPTY_CONTENT"; status?: number; message: string; }; export type ExtractionResult = | { ok: true; data: { logos: LogoAsset[]; colors: ColorAsset[]; backdrop_images: BackdropAsset[]; brand_name: string } } | { ok: false; error: ExtractionError }; ``` -------------------------------- ### extractBrandAssets (Library) Source: https://context7.com/ethanjyx/openbrand/llms.txt The primary function to scrape a website and return structured brand assets. This method is used directly in server-side TypeScript applications. ```APIDOC ## extractBrandAssets ### Description Extracts brand assets such as logos, colors, and backdrop images from a given URL. Returns a discriminated union for type-safe error handling. ### Method Library Function Call ### Parameters #### Arguments - **url** (string) - Required - The website URL to scrape. ### Response #### Success Response - **brand_name** (string) - The name of the brand. - **logos** (Array) - List of identified logos. - **colors** (Array) - List of identified brand colors. - **backdrop_images** (Array) - List of identified backdrop/hero images. #### Error Response - **code** (string) - Error type (ACCESS_BLOCKED, NOT_FOUND, SERVER_ERROR, NETWORK_ERROR, EMPTY_CONTENT). - **message** (string) - Human-readable error description. ``` -------------------------------- ### DELETE /api/keys/:id Source: https://context7.com/ethanjyx/openbrand/llms.txt Revokes an existing API key by its unique identifier, immediately invalidating it. ```APIDOC ## DELETE /api/keys/:id ### Description Revokes an API key by setting its revoked_at timestamp. Revoked keys immediately stop working. ### Method DELETE ### Endpoint /api/keys/:id ### Parameters #### Path Parameters - **id** (string) - Required - The unique identifier of the API key to revoke. ### Request Example DELETE /api/keys/key_12345 ### Response #### Success Response (200) - **success** (boolean) - Indicates if the revocation was successful. #### Response Example { "success": true } ``` -------------------------------- ### Revoke API Key - TypeScript Source: https://context7.com/ethanjyx/openbrand/llms.txt Revokes an existing API key by its ID, making it inactive. This operation sets a revoked_at timestamp, and the key will immediately stop functioning. The response indicates success. ```typescript const response = await fetch(`/api/keys/${keyId}`, { method: "DELETE", credentials: "include" }); const { success } = await response.json(); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.