import { ModelProviderLogo } from "@elabs-ai/components-ai";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-aiPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui ModelProviderLogo component (from @elabs-ai/components-ai) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look ModelProviderLogo up before writing code: `npx -y @elabs-ai/components-cli docs ModelProviderLogo` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-ai is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-ai`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Avoid
- Shipping the default models.dev URL into a deployment with a restrictive img-src — self-host and pass `src`, or set `fallback` (docs/CSP-AND-NETWORK.md).
- Reaching for it as a general service-logo slot — a non-AI-provider mark is ServiceLogo (@elabs-ai/components-icons), which is registry-driven and never fetched.
- Translating provider brand names in the surrounding row — mark them i18n-exempt instead.
- Building a model palette by wrapping it in a bespoke selector component — an inline pill is ModelPicker, a ⌘K palette is CommandDialog + Command* composed directly.
ModelProviderLogo — the mark of an AI model provider, sized for a list row. It fetches provider marks from a remote origin (models.dev) by default, so a restrictive img-src blocks them. Pass src to self-host, or fallback to control what a blocked load renders — it is never a broken-image glyph.
Works with
Examples
Custom Fallback
A caller-supplied fallback instead of the built-in glyph.
Self Hosted
A self-hosted (inline data-URI) logo — the CSP-safe path.
Live Remote Logos
Live logos from the default remote origin. ⚠️ The only story here that reaches the network (`models.dev`). Each falls back to the neutral glyph if blocked.
API
ModelProviderLogo
| Prop | Type | Description |
|---|---|---|
src | string | Override the logo URL — point at a self-hosted or bundled asset when a CSP blocks `models.dev`. Defaults to `${MODEL_PROVIDER_LOGO_BASE_URL}/<provider>.svg`. |
fallback | ReactNode | Rendered when the logo fails to load (blocked, offline, or unknown provider). Defaults to a neutral Lucide glyph, so the row never collapses to a broken image. |
ModelProviderLogoGroup
Theming
The tokens each state resolves to. Change the token and every theme follows.
| State | Token |
|---|---|
| blocked | onError swaps the img for a neutral Lucide glyph (or the caller's `fallback`) — never a broken-image icon |