Skip to content

Commit 3ce4013

Browse files
cursoragentishaan-jaff
cursoragent
and
ishaan-jaff
committed
Add real OSS adopter logos and dual Quick Start tabs (SDK + Gateway)
Trust logos: - Replace plain-text company names with actual logo images from the LiteLLM GitHub README OSS Adopters section - Logos render grayscale by default, full-color on hover - Dark mode: extra brightness filter for visibility - Includes: Stripe, Google ADK, Greptile, OpenHands, Netflix, OpenAI Agents SDK Quick Start tabs: - Add tabbed interface with 'Python SDK' and 'AI Gateway (Proxy)' - Python SDK tab: litellm.completion() code snippet (default) - AI Gateway tab: curl command targeting the LiteLLM proxy at 0.0.0.0:4000 with auth header - Each tab has its own Copy button - Tab state tracked per-model so different expanded rows can show different tabs independently - Comment shows how to start the proxy for the selected model Co-authored-by: Ishaan Jaff <ishaan-jaff@users.noreply.github.com>
1 parent 58abe5b commit 3ce4013

1 file changed

Lines changed: 116 additions & 19 deletions

File tree

‎src/App.svelte‎

Lines changed: 116 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
// Copy toast
3636
let copiedModel = "";
3737
38+
// Quick start tab state per model
39+
let codeTabStates: Record<string, "sdk" | "proxy"> = {};
40+
3841
onMount(() => {
3942
const urlParams = new URLSearchParams(window.location.search);
4043
query = urlParams.get("q") ?? "";
@@ -329,14 +332,14 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
329332

330333
<!-- Trust Logos -->
331334
<div class="trust-section">
332-
<p class="trust-label">Powering AI infrastructure at</p>
335+
<p class="trust-label">Trusted by leading teams</p>
333336
<div class="trust-logos">
334-
<span class="trust-logo">NASA</span>
335-
<span class="trust-logo">Adobe</span>
336-
<span class="trust-logo">Netflix</span>
337-
<span class="trust-logo">Stripe</span>
338-
<span class="trust-logo">NVIDIA</span>
339-
<span class="trust-logo">Cruise</span>
337+
<img class="trust-logo-img" src="https://github.com/user-attachments/assets/f7296d4f-9fbd-460d-9d05-e4df31697c4b" alt="Stripe" height="28" />
338+
<img class="trust-logo-img" src="https://github.com/user-attachments/assets/caf270a2-5aee-45c4-8222-41a2070c4f19" alt="Google ADK" height="28" />
339+
<img class="trust-logo-img" src="https://github.com/user-attachments/assets/0be4bd8a-7cfa-48d3-9090-f415fe948280" alt="Greptile" height="28" />
340+
<img class="trust-logo-img" src="https://github.com/user-attachments/assets/a6150c4c-149e-4cae-888b-8b92be6e003f" alt="OpenHands" height="28" />
341+
<span class="trust-logo-text">Netflix</span>
342+
<img class="trust-logo-img" src="https://github.com/user-attachments/assets/c02f7be0-8c2e-4d27-aea7-7c024bfaebc0" alt="OpenAI Agents SDK" height="28" />
340343
</div>
341344
</div>
342345

@@ -587,20 +590,49 @@ We also need to update [${RESOURCE_BACKUP_NAME}](https://github.com/${REPO_FULL_
587590
</div>
588591
</div>
589592

590-
<!-- Code snippet -->
593+
<!-- Code snippet with tabs -->
591594
<div class="detail-code-section">
592595
<div class="code-header-row">
593-
<h4 class="detail-heading">Quick Start</h4>
594-
<button class="copy-code-btn" on:click|stopPropagation={() => copyToClipboard(`from litellm import completion\n\nresponse = completion(\n model="${getDisplayModelName(name, litellm_provider)}",\n messages=[{"role": "user", "content": "Hello!"}]\n)`)}>
595-
{copiedModel.includes("from litellm") ? "Copied!" : "Copy"}
596-
</button>
596+
<div class="code-tabs">
597+
<button
598+
class="code-tab"
599+
class:active={!codeTabStates[name] || codeTabStates[name] === "sdk"}
600+
on:click|stopPropagation={() => { codeTabStates[name] = "sdk"; codeTabStates = codeTabStates; }}
601+
>Python SDK</button>
602+
<button
603+
class="code-tab"
604+
class:active={codeTabStates[name] === "proxy"}
605+
on:click|stopPropagation={() => { codeTabStates[name] = "proxy"; codeTabStates = codeTabStates; }}
606+
>AI Gateway (Proxy)</button>
607+
</div>
608+
{#if !codeTabStates[name] || codeTabStates[name] === "sdk"}
609+
<button class="copy-code-btn" on:click|stopPropagation={() => copyToClipboard(`from litellm import completion\n\nresponse = completion(\n model="${getDisplayModelName(name, litellm_provider)}",\n messages=[{"role": "user", "content": "Hello!"}]\n)`)}>
610+
{copiedModel.includes("from litellm") ? "Copied!" : "Copy"}
611+
</button>
612+
{:else}
613+
<button class="copy-code-btn" on:click|stopPropagation={() => copyToClipboard(`curl http://0.0.0.0:4000/v1/chat/completions \\\n -H "Content-Type: application/json" \\\n -H "Authorization: Bearer sk-1234" \\\n -d '{\n "model": "${getDisplayModelName(name, litellm_provider)}",\n "messages": [{"role": "user", "content": "Hello!"}]\n }'`)}>
614+
{copiedModel.includes("curl") ? "Copied!" : "Copy"}
615+
</button>
616+
{/if}
597617
</div>
598-
<pre class="code-snippet"><code><span class="code-kw">from</span> litellm <span class="code-kw">import</span> completion
618+
{#if !codeTabStates[name] || codeTabStates[name] === "sdk"}
619+
<pre class="code-snippet"><code><span class="code-kw">from</span> litellm <span class="code-kw">import</span> completion
599620

600621
response = completion(
601622
model=<span class="code-str">"{getDisplayModelName(name, litellm_provider)}"</span>,
602623
messages=[{`{`}<span class="code-str">"role"</span>: <span class="code-str">"user"</span>, <span class="code-str">"content"</span>: <span class="code-str">"Hello!"</span>{`}`}]
603624
)</code></pre>
625+
{:else}
626+
<pre class="code-snippet"><code><span class="code-comment"># Start proxy: litellm --model {getDisplayModelName(name, litellm_provider)}</span>
627+
628+
curl http://0.0.0.0:4000/v1/chat/completions \
629+
-H <span class="code-str">"Content-Type: application/json"</span> \
630+
-H <span class="code-str">"Authorization: Bearer sk-1234"</span> \
631+
-d <span class="code-str">'{`{`}
632+
"model": "{getDisplayModelName(name, litellm_provider)}",
633+
"messages": [{`{`}"role": "user", "content": "Hello!"{`}`}]
634+
{`}`}'</span></code></pre>
635+
{/if}
604636
</div>
605637

606638
<!-- Actions -->
@@ -740,18 +772,41 @@ response = completion(
740772
741773
.trust-logos {
742774
display: flex;
743-
gap: 2.5rem;
775+
gap: 2rem;
744776
justify-content: center;
745777
align-items: center;
746778
flex-wrap: wrap;
747779
}
748780
749-
.trust-logo {
750-
font-size: 1rem;
781+
.trust-logo-img {
782+
height: 28px;
783+
object-fit: contain;
784+
opacity: 0.55;
785+
filter: grayscale(100%);
786+
transition: all 0.2s ease;
787+
}
788+
789+
.trust-logo-img:hover {
790+
opacity: 0.9;
791+
filter: grayscale(0%);
792+
}
793+
794+
@media (prefers-color-scheme: dark) {
795+
.trust-logo-img {
796+
filter: grayscale(100%) brightness(2);
797+
opacity: 0.5;
798+
}
799+
.trust-logo-img:hover {
800+
filter: grayscale(0%) brightness(1.2);
801+
opacity: 0.9;
802+
}
803+
}
804+
805+
.trust-logo-text {
806+
font-size: 1.125rem;
751807
font-weight: 700;
752808
color: var(--border-color-strong);
753-
letter-spacing: 0.08em;
754-
text-transform: uppercase;
809+
letter-spacing: 0.04em;
755810
}
756811
757812
/* Search Section */
@@ -1235,6 +1290,47 @@ response = completion(
12351290
12361291
.code-header-row .detail-heading { margin: 0; }
12371292
1293+
.code-tabs {
1294+
display: flex;
1295+
gap: 0;
1296+
}
1297+
1298+
.code-tab {
1299+
padding: 0.375rem 0.875rem;
1300+
font-size: 0.75rem;
1301+
font-weight: 600;
1302+
border: 1px solid var(--border-color);
1303+
background: var(--bg-secondary);
1304+
color: var(--muted-color);
1305+
cursor: pointer;
1306+
transition: all 0.15s;
1307+
}
1308+
1309+
.code-tab:first-child {
1310+
border-radius: 6px 0 0 6px;
1311+
}
1312+
1313+
.code-tab:last-child {
1314+
border-radius: 0 6px 6px 0;
1315+
border-left: none;
1316+
}
1317+
1318+
.code-tab.active {
1319+
background: var(--litellm-primary);
1320+
border-color: var(--litellm-primary);
1321+
color: white;
1322+
}
1323+
1324+
.code-tab:hover:not(.active) {
1325+
background: var(--hover-bg);
1326+
color: var(--text-color);
1327+
}
1328+
1329+
.code-comment {
1330+
color: var(--muted-color);
1331+
font-style: italic;
1332+
}
1333+
12381334
.copy-code-btn {
12391335
font-size: 0.75rem;
12401336
font-weight: 600;
@@ -1338,7 +1434,8 @@ response = completion(
13381434
.table-container { padding: 0 1rem; }
13391435
th, td { padding: 0.5rem 0.625rem; font-size: 0.8125rem; }
13401436
.model-name { min-width: 180px; }
1341-
.trust-logos { gap: 1.5rem; }
1437+
.trust-logos { gap: 1.25rem; }
1438+
.trust-logo-img { height: 22px; }
13421439
.detail-grid { grid-template-columns: 1fr; }
13431440
}
13441441
</style>

0 commit comments

Comments
 (0)