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

# Implementation

> Retrieve a company logo by domain

export const PromptBanner = ({prompt, message = "Use this pre-built prompt to get started faster."}) => {
  const [copied, setCopied] = useState(false);
  const timeoutRef = useRef(null);
  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);
  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(prompt);
      setCopied(true);
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      timeoutRef.current = setTimeout(() => {
        setCopied(false);
        timeoutRef.current = null;
      }, 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  }, [prompt]);
  const handleOpenInCursor = useCallback(() => {
    const url = new URL('cursor://anysphere.cursor-deeplink/prompt');
    url.searchParams.set('text', prompt);
    window.location.href = url.toString();
  }, [prompt]);
  return <div className="not-prose my-6 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden">
      <div className="p-4">
        <div className="mb-3">
          <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-2">
            {message}
          </div>
          <div className="relative">
            <textarea readOnly value={prompt} className="w-full px-3 py-2 text-sm font-mono text-zinc-700 dark:text-zinc-300 bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-600" rows={Math.min(prompt.split('\n').length, 6)} />
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button onClick={handleOpenInCursor} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-zinc-950 dark:bg-white text-sm font-medium text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-200 transition-colors" aria-label="Try in Cursor">
            <img src="/images/cursor-light.svg" alt="Cursor logo" className="size-4 block dark:hidden" loading="lazy" width="16" height="16" />
            <img src="/images/cursor-dark.svg" alt="Cursor logo" className="size-4 hidden dark:block" loading="lazy" width="16" height="16" />
            Try in Cursor
          </button>

          <button onClick={handleCopy} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-zinc-100 dark:bg-zinc-800 text-sm font-medium text-zinc-950 dark:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors" aria-label={copied ? "Copied" : "Copy prompt"} aria-live="polite">
            {copied ? <>
                <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                Copied
              </> : <>
                <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                Copy prompt
              </>}
          </button>
        </div>
      </div>
    </div>;
};

## Overview

The Logo Link API allows you to fetch high-quality company logos by simply providing a domain. Logos are designed to be served quickly via a global CDN, ensuring optimal performance for your applications.

If no brand logo is found, a generated monogram fallback is returned automatically.

<PromptBanner
  message="Implement Logo Link in 5 minutes with this pre-built prompt"
  prompt={`Help me integrate the Context.dev Logo Link API to dynamically fetch and display company logos. The API allows me to retrieve logos by providing a domain name, and it returns the logo image directly via a CDN URL.

TASK SEQUENCE:

1. Ask where in my codebase I want to display company logos

2. Ask me for my Logo Link publicClientId from https://context.dev/dashboard/logolink

3. Implement Logo Link using this URL format:
https://logos.context.dev/?publicClientId=MY_PUBLIC_CLIENT_ID&amp;domain=TARGET_DOMAIN

a. Replace MY_PUBLIC_CLIENT_ID with the ID I provide
b. Replace TARGET_DOMAIN with the company domain property/variable
c. This endpoint returns an image file directly

4. Update the identified code locations to use Logo Link URLs instead of existing logo sources

5. Remind me to restrict allowed domains at https://context.dev/dashboard/logolink for security

REFERENCE:

- Full documentation: https://docs.context.dev/logolink/implementation
- Only modify files that currently handle logo display
- Preserve existing fallback/error handling patterns
- Use environment variables for the publicClientId if the codebase supports it`}
/>

### Building the Link

The Logo Link is simple to construct. The base URL is: `https://logos.context.dev/` with the following query parameters: `publicClientId` and `domain`. You can find your publicClientId in your [account dashboard](https://context.dev/dashboard/logolink). See the example below for GitHub's logo:

```
https://logos.context.dev/?publicClientId=brandLL_xxx&domain=github.com
```

### Request

<ParamField query="publicClientId" type="string" required>
  Your API key. Must start with `brandLL_`.
</ParamField>

<ParamField query="domain" type="string" required>
  The domain of the company whose logo you want to retrieve (e.g., `stripe.com`,
  `github.com`).
</ParamField>

### Response

<ResponseField name="body" type="binary">
  The logo image bytes with the appropriate `Content-Type` header (e.g.,
  `image/png`, `image/svg+xml`).
</ResponseField>

## Usage Examples

<AccordionGroup>
  <Accordion title="HTML Image Tag">
    ```html theme={null}
    <img
      src="https://logos.context.dev/?publicClientId=brandLL_xxx&domain=stripe.com"
      alt="Stripe logo"
    />
    ```
  </Accordion>

  <Accordion title="JavaScript Fetch">
    ```javascript theme={null}
    const response = await fetch(
      "https://logos.context.dev/?publicClientId=brandLL_xxx&domain=github.com",
    );

    if (response.ok) {
      const blob = await response.blob();
      const imageUrl = URL.createObjectURL(blob);
      document.getElementById("logo").src = imageUrl;
    }
    ```
  </Accordion>

  <Accordion title="React Component">
    ```jsx theme={null}
    function CompanyLogo({ domain }) {
      const apiKey = process.env.NEXT_PUBLIC_LOGOLINK_KEY;

      return (
        <img
          src={`https://logos.context.dev/?publicClientId=${apiKey}&domain=${domain}`}
          alt={`${domain} logo`}
          onError={(e) => {
            e.target.style.display = "none";
          }}
        />
      );
    }
    ```
  </Accordion>
</AccordionGroup>

## Fallbacks

If no logo is found for the specified domain, Logo Link automatically returns a generated SVG monogram based on the domain name. This ensures that you always receive a valid image response. This also means that if you don't have the domain name you can still use Logo Link to generate a monogram logo by passing any string as the domain parameter.

## Error Responses

Since Logo Link is designed to be a direct hotlink service, we will always return a valid image response as long as the request parameters are valid. However, if there is an issue with the request, the following error codes may be returned:

| Status | Description                                               |
| ------ | --------------------------------------------------------- |
| `400`  | Missing or invalid `publicClientId` or `domain` parameter |
| `401`  | Invalid API key                                           |
| `402`  | Insufficient credits                                      |
| `405`  | Method not allowed (only `GET` and `HEAD` supported)      |

## Domain Restrictions

To prevent abuse, we recommend restricting Logo Link usage to specific domains in your [dashboard](https://context.dev/dashboard/logolink). This supports absolute URLs and wildcards (e.g., `*.yourdomain.com`).