diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx index ed418221bfd..bd789169885 100644 --- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx @@ -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(); + 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(); diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx index 6defe40d959..efc747f1d79 100644 --- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx +++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx @@ -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 = () => ( +
+ {codingAgentLogos.map((logo, index) => ( + {logo.name} + ))} +
+); + 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 = ({ apiKey }) => { style={{ borderColor: "#e5e7eb", background: "#fafafa" }} >
- - Prompt for coding agents - +
+ + Prompt for coding agents + + +