scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-10-01 02:02:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 92

feat(ui): show coding-agent logos next to prompt heading

Browse source 
Adds four small overlapping circular logos (Cursor, Claude, OpenAI,
GitHub Copilot) next to the 'Prompt for coding agents' heading in the
post-create key dialog, mirroring the Browser Use design. Logos reuse
existing SVGs already shipped under public/assets/logos/.

A unit test asserts the four logos render with the correct alt text in
the documented order.

Co-authored-by: ishaan-berri <ishaan-berri@users.noreply.github.com>
This commit is contained in:
Cursor Agent 2026-05-30 18:15:55 +00:00
parent 7a6de62c82
commit 679a690679
No known key found for this signature in database
2 changed files with 55 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
View file

@ -65,6 +65,20 @@ describe("CreatedKeyDisplay", () => {
expect(screen.getByRole("button", { name: /copied/i })).toBeInTheDocument();
});
it("renders coding agent logos next to the prompt heading", () => {
render(<CreatedKeyDisplay apiKey="sk-test-123" />);
const logos = screen.getByTestId("coding-agent-logos");
const images = logos.querySelectorAll("img");
const altText = Array.from(images).map((img) => img.getAttribute("alt"));
expect(altText).toEqual([
"Cursor",
"Claude Code",
"OpenAI Codex",
"GitHub Copilot",
]);
});
it("copies the coding agent prompt to clipboard when its copy button is clicked", async () => {
const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
render(<CreatedKeyDisplay apiKey="sk-test-123" />);

44
ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
View file

@ -9,6 +9,41 @@ interface CreatedKeyDisplayProps {
apiKey: string;
}
const codingAgentLogos: { name: string; src: string }[] = [
{ name: "Cursor", src: "../ui/assets/logos/cursor.svg" },
{ name: "Claude Code", src: "../ui/assets/logos/anthropic.svg" },
{ name: "OpenAI Codex", src: "../ui/assets/logos/openai_small.svg" },
{ name: "GitHub Copilot", src: "../ui/assets/logos/github_copilot.svg" },
];
const CodingAgentLogos: React.FC = () => (
<div
className="flex items-center"
aria-label="Compatible coding agents"
data-testid="coding-agent-logos"
>
{codingAgentLogos.map((logo, index) => (
<img
key={logo.name}
src={logo.src}
alt={logo.name}
title={logo.name}
style={{
width: 18,
height: 18,
borderRadius: "50%",
background: "#fff",
border: "1px solid #e5e7eb",
padding: 2,
marginLeft: index === 0 ? 0 : -6,
objectFit: "contain",
boxSizing: "border-box",
}}
/>
))}
</div>
);
const buildCodingAgentPrompt = (apiKey: string, baseUrl: string): string => {
return `You have access to LiteLLM, an OpenAI-compatible AI gateway that lets you call 100+ LLMs (OpenAI, Anthropic, Gemini, Bedrock, etc.) through a single API.
@ -110,9 +145,12 @@ const CreatedKeyDisplay: React.FC<CreatedKeyDisplayProps> = ({ apiKey }) => {
style={{ borderColor: "#e5e7eb", background: "#fafafa" }}
>
<div className="flex items-center justify-between px-3 pt-3 pb-1">
<span className="text-sm font-medium text-gray-700">
Prompt for coding agents
</span>
<div className="flex items-center gap-2">
<span className="text-sm font-medium text-gray-700">
Prompt for coding agents
</span>
<CodingAgentLogos />
</div>
<Tooltip title={copiedPrompt ? "Copied!" : "Copy prompt"}>
<CopyToClipboard text={codingAgentPrompt} onCopy={handleCopyPrompt}>
<Button