> ## 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.
# Build a company directory with logos
> Add recognizable company logos to directories, job boards, and account lists, with fallbacks and persistent corrections.
export const AgentSetupPrompt = ({children, variant = "setup"}) => {
const isRecipe = variant === "recipe";
const promptLabel = isRecipe ? "recipe prompt" : "setup prompt";
const [copyState, setCopyState] = useState("idle");
const contentRef = useRef(null);
const detailsRef = useRef(null);
const timerRef = useRef(null);
const mountedRef = useRef(true);
const pendingRef = useRef(false);
useEffect(() => {
mountedRef.current = true;
return () => {
mountedRef.current = false;
if (timerRef.current !== null) clearTimeout(timerRef.current);
};
}, []);
const copyPrompt = useCallback(async () => {
if (pendingRef.current) return;
pendingRef.current = true;
if (timerRef.current !== null) {
clearTimeout(timerRef.current);
timerRef.current = null;
}
setCopyState("copying");
try {
const code = contentRef.current?.querySelector("pre code") ?? contentRef.current?.querySelector("pre");
const prompt = code?.textContent;
if (typeof prompt !== "string" || !prompt.trim()) {
throw new Error("Prompt is not available.");
}
if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
throw new Error("Clipboard access is not available.");
}
await navigator.clipboard.writeText(prompt);
if (!mountedRef.current) return;
setCopyState("copied");
timerRef.current = setTimeout(() => {
if (mountedRef.current) setCopyState("idle");
timerRef.current = null;
}, 4000);
} catch {
if (!mountedRef.current) return;
if (detailsRef.current) detailsRef.current.open = true;
setCopyState("error");
} finally {
pendingRef.current = false;
}
}, []);
const feedback = copyState === "copied" ? `${isRecipe ? "Recipe" : "Setup"} prompt copied. Paste it into your coding agent.` : copyState === "error" ? "Couldn't copy automatically. The prompt is open below. Select and copy the text manually." : "";
return
{isRecipe ? "Have your agent implement this recipe" : "Set up Context.dev"}
{isRecipe ? "Copy this prompt into your coding agent to build the recipe in your project." : "Paste into your coding agent. It will ask about your goal and project before making changes."}
{feedback}
{`View ${promptLabel}`}
{children}
;
};
```text Recipe prompt theme={null}
Implement this recipe in my project:
https://docs.context.dev/use-cases/company-directory-logos
Read the recipe and linked API guides, inspect this project's stack, and build the complete flow using its existing conventions.
Build a company directory with direct Logo Link image embeds using a public client ID and allowed referring domains. Support icon or wordmark choices, light and dark backgrounds, missing-image fallbacks, and persistent domain corrections or logo removal. Keep names readable when logos fail. Do not download, persist, or rehost Logo Link images; use server-side Brand retrieval only if richer profiles are needed.
Reuse existing Logo Link configuration. Add focused tests, run the relevant checks, and document the public client ID, allowed referring domains, and how to try the directory.
```
Start with company names and verified domains, then add a logo to each row. Keep the directory useful when an image is missing, a company changes its name, or the first match belongs to a parent company.
[Vizzy uses company branding in profiles and job boards](https://www.context.dev/blog/vizzy-beautifies-profiles-and-job-boards-with-brand-dev). This recipe applies that pattern to a React directory.
## Choose the logo source
| Your application needs | Use |
| ---------------------------------------------------- | ------------------------------------------------------------------ |
| One hosted image for direct display | [Logo Link](/guides/get-logo-from-url) |
| Multiple logo variants, colors, or a company profile | [Brand retrieval](/guides/get-brand-data) |
| Assets for a document or creative export | Brand retrieval, with your own asset review and rendering workflow |
Logo Link uses a public client ID. Configure allowed referring domains in the [Logo Link dashboard](https://context.dev/dashboard/logolink), including the domains used for development and production. Keep secret API keys on the server when using Brand retrieval.
Embed Logo Link images directly. Do not download, persist, or rehost the returned image files. Normal browser and CDN caching directed by the response headers is allowed.
## Keep identity separate from presentation
Use your own company ID as the record key. A domain is an input to logo lookup; it should not replace the identity of an existing directory entry.
```typescript Directory model theme={null}
type Company = {
id: string;
name: string;
domain: string | null;
// Saved separately from automatically refreshed company data.
domainOverride: string | null;
hideLogo: boolean;
};
function logoUrl(
domain: string,
publicClientId: string,
theme: "light" | "dark",
type: "icon" | "wordmark",
) {
const params = new URLSearchParams({ publicClientId, domain, theme, type });
return `https://logos.context.dev/?${params}`;
}
```
Validate domains when importing or editing a company: accept a hostname such as `stripe.com`, and keep paths, email addresses, and unrelated platform domains out of the lookup field. Confirm the company when several entities share a name.
## Render a resilient directory
This component receives persisted company records and an edit callback from your application. Copy `Company` and `logoUrl` above into the same module. The component key resets a failed image when the domain or display settings change.
```tsx CompanyDirectory.tsx theme={null}
"use client";
import { useState } from "react";
function CompanyLogo({
company, src, wordmark,
}: { company: Company; src: string | null; wordmark: boolean }) {
const [failed, setFailed] = useState(false);
const initials = company.name.trim().slice(0, 2).toUpperCase() || "?";
const width = wordmark ? 112 : 40;
return (
{src && !failed ? (
setFailed(true)}
/>
) : (
{initials}
)}
);
}
export function CompanyDirectory({
companies, publicClientId, onEdit,
}: {
companies: Company[];
publicClientId: string;
onEdit: (company: Company) => void;
}) {
const [theme, setTheme] = useState<"light" | "dark">("light");
const [type, setType] = useState<"icon" | "wordmark">("icon");
return (
);
}
```
`theme` describes the background where the image will appear: `light` prefers a dark asset, and `dark` prefers a light asset. It does not recolor the company's logo. Keep the company name visible even when every image is blocked.
## Save corrections independently
Connect **Edit brand** to a form that can change the lookup domain or hide the logo. Save those decisions against the company ID in your database, with the editor and update time. Reload the saved record after a successful edit.
On automatic enrichment, update `domain` but leave `domainOverride` and `hideLogo` untouched. Provide a separate **Use automatic branding** action that clears the override. This lets a correction survive a refresh without preventing future automatic updates.
| Situation | Directory behavior |
| ------------------------------- | -------------------------------------------------------- |
| No domain or no available image | Show the name and initials. |
| Parent-company or platform logo | Let an editor correct the domain or hide the image. |
| Image does not fit the surface | Switch the theme or choose a reviewed Brand variant. |
| Temporary image failure | Keep the row usable; retry on a later visit. |
| Rebrand | Refresh automatic data and retain explicit user choices. |
A logo does not establish affiliation, endorsement, or legal identity. Keep any such claims in separately verified directory fields.
## Check the result
Try the directory with a known domain, no domain, and a deliberately unavailable image. Switch between light and dark backgrounds and between icons and wordmarks. Save a corrected domain, reload the page, then run enrichment again: the correction should remain.
Configure the public client ID, referring domains, and image parameters.
Use reviewed brand assets in reports and proposals.