> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brandfetch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# On-brand AI

> Ground LLMs and agents with real brand context using the Brand Context API and Brandfetch MCP

export const GroundedAnswerDemo = () => {
  const questions = [{
    label: "What do they sell?",
    q: "What does Patagonia sell?",
    a: "Outdoor apparel and equipment built to outlast trends: jackets, fleeces, and technical clothing, plus Worn Wear, a resale and repair program, and Provisions, a regenerative organic food line."
  }, {
    label: "Who is it for?",
    q: "Who is Patagonia for?",
    a: "Outdoor enthusiasts who need gear that performs in real conditions, values-driven consumers who weigh environmental impact alongside quality, and activist communities focused on conservation."
  }, {
    label: "How should copy sound?",
    q: "How should on-brand copy sound?",
    a: "Plain-spoken, honest, and understated with an activist edge, led by conviction, never hype or slick marketing."
  }];
  const [active, setActive] = useState(0);
  const current = questions[active];
  return <div className="w-full max-w-[620px] overflow-hidden rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f]">
      <style>{`@keyframes bf-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }`}</style>
      <div className="flex items-center justify-between border-b border-[#63636326] px-5 py-2.5 font-mono text-[11px]">
        <span>
          <span className="font-semibold text-[#16a34a]">GET</span>{" "}
          <span className="text-[#6b7280]">/v1/context/</span>
          <span className="font-semibold">patagonia.com</span>
        </span>
        <span className="flex items-center gap-1.5 text-[#6b7280]">
          <span className="w-1.5 h-1.5 rounded-full bg-[#22c55e]" />
          200 OK
        </span>
      </div>
      <div className="grid gap-x-8 gap-y-3 px-5 py-4 text-[12px] sm:grid-cols-2">
        <div>
          <div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-[#9ca3af]">
            Tagline
          </div>
          <div className="mt-0.5 font-medium">
            "We're in business to save our home planet."
          </div>
        </div>
        <div>
          <div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-[#9ca3af]">
            Brand voice
          </div>
          <div className="mt-1 flex flex-wrap gap-1">
            {["Plain-spoken", "Activist", "Honest", "Understated"].map(v => <span key={v} className="rounded-full bg-[#6363631f] px-2 py-0.5 text-[11px]">
                {v}
              </span>)}
            <span className="rounded-full bg-[#6363631f] px-2 py-0.5 text-[11px] text-[#9ca3af]">
              Avoid: hype, slick marketing
            </span>
          </div>
        </div>
        <div>
          <div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-[#9ca3af]">
            Products & services
          </div>
          <div className="mt-0.5 text-[#6b7280]">
            Apparel & outerwear · Worn Wear resale · Provisions food line ·
            Patagonia Films
          </div>
        </div>
        <div>
          <div className="text-[10px] font-semibold uppercase tracking-[0.08em] text-[#9ca3af]">
            Target audiences
          </div>
          <div className="mt-0.5 text-[#6b7280]">
            Outdoor enthusiasts · Values-driven consumers · Activist communities
          </div>
        </div>
      </div>
      <div className="border-t border-[#63636326] px-5 py-4">
        <div className="flex flex-col gap-3">
          <div className="self-end max-w-[80%] bg-[#0084FF] text-white rounded-2xl rounded-br-sm px-4 py-2 text-sm">
            {current.q}
          </div>
          <div key={active} className="self-start w-[92%] bg-[#6363631a] rounded-2xl rounded-bl-sm px-4 py-3 text-sm animate-[bf-fade-in_180ms_ease_both]">
            <div>{current.a}</div>
            <div className="mt-2.5 flex items-center gap-2 border-t border-[#63636326] pt-2 text-[11px] text-[#9ca3af]">
              <img noZoom src="https://cdn.brandfetch.io/domain/patagonia.com/w/48/h/48/fallback/lettermark?c=1bfwsmEH20zzEfSNTed" alt="Patagonia logo" className="w-4 h-4 rounded shrink-0" />
              Grounded in verified brand data · patagonia.com
            </div>
          </div>
        </div>
        <div className="mt-3 flex gap-2 flex-wrap">
          {questions.map((item, i) => <button key={item.label} onClick={() => setActive(i)} className={`px-3 py-1 rounded-full border text-[13px] font-medium transition-colors ${i === active ? "bg-[#0084FF] border-[#0084FF] text-white" : "border-[#63636333]"}`}>
              {item.label}
            </button>)}
        </div>
      </div>
    </div>;
};

export const AIBrandLookupDemo = () => {
  const brands = {
    "stripe.com": {
      name: "Stripe",
      tagline: "Financial infrastructure for the internet",
      industry: "Fintech"
    },
    "linear.app": {
      name: "Linear",
      tagline: "The issue tracker built for modern software teams",
      industry: "Productivity"
    },
    "dropbox.com": {
      name: "Dropbox",
      tagline: "Cloud storage that keeps your files in sync",
      industry: "Storage"
    }
  };
  const [domain, setDomain] = useState("stripe.com");
  const b = brands[domain];
  return <div className="w-full max-w-[400px]">
      <style>{`@keyframes bf-fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }`}</style>
      <div className="flex flex-col gap-3">
        <div className="self-end max-w-[80%] bg-[#0084FF] text-white rounded-2xl rounded-br-sm px-4 py-2 text-sm">
          Tell me about {b.name}
        </div>
        <div key={domain} className="self-start w-[92%] bg-[#6363631a] rounded-2xl rounded-bl-sm px-4 py-3 text-sm animate-[bf-fade-in_180ms_ease_both]">
          <div>Here's a quick overview:</div>
          <div className="mt-2 flex items-start gap-3 rounded-lg border border-[#63636326] bg-[#ffffff] dark:bg-[#1c1d1f] p-3">
            <img noZoom src={`https://cdn.brandfetch.io/domain/${domain}/w/72/h/72/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`} alt={`${b.name} logo`} className="w-9 h-9 rounded-lg shrink-0" />
            <div className="min-w-0">
              <div className="font-semibold text-[#111] dark:text-[#e5e5e5]">
                {b.name}
              </div>
              <div className="text-[12px] text-[#6b7280]">{b.tagline}</div>
              <div className="text-[11px] text-[#9ca3af] mt-0.5">
                {b.industry} · {domain}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="mt-3 flex gap-2 flex-wrap">
        {Object.entries(brands).map(([d, br]) => <button key={d} onClick={() => setDomain(d)} className={`px-3 py-1 rounded-full border text-[13px] font-medium transition-colors ${d === domain ? "bg-[#0084FF] border-[#0084FF] text-white" : "border-[#63636333]"}`}>
            {br.name}
          </button>)}
      </div>
    </div>;
};

export const Preview = ({children}) => <div className="relative rounded-xl border border-[#63636333] bg-[#6363630d] pt-12 px-8 pb-8 mt-4 mb-4 overflow-hidden">
    <style>{`
      .bf-preview-body img { margin: 0 !important; max-width: none; }
      .bf-preview-body ul, .bf-preview-body ol { margin: 0; padding: 0; }
      .bf-preview-body li { margin: 0 !important; padding-left: 0 !important; }
      .bf-preview-body li::before, .bf-preview-body li::marker { content: none !important; display: none !important; }
      .bf-preview-body p { margin: 0; }
    `}</style>
    <span className="absolute top-3.5 left-[18px] text-[11px] font-semibold tracking-[0.06em] uppercase text-[#636363b3]">
      Preview
    </span>
    <div className="bf-preview-body flex justify-center">{children}</div>
  </div>;

Ask a model about a company and you get its training data: often stale, sometimes wrong, never on-brand. The [Brand Context API](/brand-context-api/overview) returns a structured, narrative-rich brand profile, identity, positioning, products, and visual style, built to drop straight into a model's context so answers are accurate and grounded, with a real logo attached.

## Ground AI in real brand data

The profile the API returns is already grounded: tagline, mission, value proposition, products, target audiences, and voice guidance, verified brand data in one document. Using it is one call and one prompt: fetch it as Markdown, put it in the system prompt, and the model answers from the brand's verified facts instead of training data. The example uses Claude, but the pattern is identical for any model.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <GroundedAnswerDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```ts grounded-answer.ts theme={null}
    import Anthropic from "@anthropic-ai/sdk";

    const anthropic = new Anthropic(); // reads ANTHROPIC_API_KEY

    async function answerAboutBrand(domain: string, question: string) {
      // 1. Fetch the brand context; Markdown drops straight into a prompt
      const context = await fetch(`https://api.brandfetch.io/v2/context/${domain}`, {
        headers: {
          Authorization: `Bearer ${process.env.BRANDFETCH_API_KEY}`,
          Accept: "text/markdown",
        },
      }).then((res) => res.text());

      // 2. Ground the model: the brand profile becomes the system prompt
      const message = await anthropic.messages.create({
        model: "claude-opus-4-8",
        max_tokens: 1024,
        system:
          `You answer questions about the company behind ${domain}. ` +
          `Ground every answer in the brand profile below; if the profile doesn't cover the question, say so.\n\n${context}`,
        messages: [{ role: "user", content: question }],
      });

      return message.content
        .filter((block) => block.type === "text")
        .map((block) => block.text)
        .join("");
    }

    console.log(await answerAboutBrand("patagonia.com", "What does Patagonia sell, and to whom?"));
    ```
  </Tab>
</Tabs>

### Why not just ask the model?

A good LLM can describe famous brands from memory, so it's fair to ask what the API adds. Five things:

* **Long-tail coverage.** Models are weak on small businesses, regional companies, and brands that launched or rebranded after their training cutoff. Brand Context resolves domains live when they're not yet in the dataset, so coverage extends to brands no model's memory holds.
* **Consistent structure at scale.** Run enrichment over 10,000 companies and you need the same fields back every time. Request `Accept: application/json` and every response follows the same schema: no reformatting between calls, no invented fields, no phrasing drift. At scale, that consistency is the product.
* **Cost and latency.** A cached, deterministic API call is faster and cheaper than an LLM inference per lookup, and the difference compounds when you're personalizing 50,000 landing pages by visitor domain.
* **Freshness.** Taglines, audiences, and messaging get updated by marketing teams all the time. A live-resolved profile reflects this month's positioning; a model reflects whatever was true when it was trained.
* **Auditability.** Every response is tied to a fetchable source rather than a model's recollection, and for compliance-sensitive tools in sales or finance, "the model guessed" isn't good enough.

Both calls run on your server, so both API keys stay secret. Cache the context by domain on your side too: the profile changes rarely, and repeat questions about the same company shouldn't cost a brand fetch each time.

## Implementation

<Steps>
  <Step title="Fetch the context">
    One call returns the brand profile, in Markdown by default, ready for a prompt. Keep it server-side so the API key stays secret, and cache by domain.

    ```bash theme={null}
    curl "https://api.brandfetch.io/v2/context/stripe.com" \
      --header "Authorization: Bearer YOUR_API_KEY"
    ```
  </Step>

  <Step title="Inject it into the model">
    Add the profile to the system prompt or retrieval context before the model answers. Prefer structured fields over Markdown? Request `Accept: application/json`, see [content negotiation](/brand-context-api/overview#content-negotiation).
  </Step>
</Steps>

## Brandfetch MCP

Already building with an AI assistant or agent framework? The Brandfetch MCP server exposes brand lookups as tools your model can call directly, so an agent can fetch a company's logo, colors, and profile mid-conversation without you wiring up the APIs by hand.

<Card title="Brandfetch MCP" icon="plug" href="/mcp/overview" horizontal>
  Connect the MCP server and give your agent brand lookups as ready-made tools.
</Card>

## Pricing

Requests to the Brand Context API count as brand fetches, the shared usage unit across the Brand API, Brand Context API, and Transaction API, one quota pool covers all three. Caching by domain keeps repeat questions about the same company free.

## Measuring impact

Grounding is easiest to judge on answer quality: track how often the model returns accurate, on-brand facts instead of stale or invented ones, and watch guesses give way to grounded answers for brands the model previously got wrong.

[Synthesia generates an entire brand kit](https://brandfetch.com/developers/customers/synthesia) from nothing but a company URL this way, and the same grounding works for any generation flow.

## Going further

<CardGroup cols={3}>
  <Card title="Brand Context API reference" icon="code" href="/reference/brand-context-api">
    The exact response shape: identity, positioning, products, and style.
  </Card>

  <Card title="Brandfetch MCP" icon="plug" href="/mcp/overview">
    Brand lookups as ready-made tools for AI assistants and agents.
  </Card>

  <Card title="Get started" icon="rocket" href="https://developers.brandfetch.com/register">
    Create a free account and start building.
  </Card>
</CardGroup>