From 623ca1a26a427c7bc2cb338a4588a2488a5882ae Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 15 Jan 2026 16:27:12 +0530
Subject: [PATCH 1/3] feat(main.svelte): add new cookbook tab

new tab for publishing guides to ai coding tools with litellm
---
 public/_redirects |  2 ++
 src/Main.svelte   | 91 ++++++++++++++++++++++++++++++++++++++++++++---
 vercel.json       |  9 +++++
 vite.config.ts    |  4 +++
 4 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 public/_redirects
 create mode 100644 vercel.json

diff --git a/public/_redirects b/public/_redirects
new file mode 100644
index 0000000..4e31746
--- /dev/null
+++ b/public/_redirects
@@ -0,0 +1,2 @@
+/*    /index.html   200
+
diff --git a/src/Main.svelte b/src/Main.svelte
index c9b4b78..17890ff 100644
--- a/src/Main.svelte
+++ b/src/Main.svelte
@@ -5,13 +5,30 @@
   import RequestForm from "./RequestForm.svelte";
   import { initAnalytics, trackPageView, trackTabChange } from "./analytics";
 
-  let activeTab: "models" | "providers" = "models";
+  let activeTab: "models" | "providers" | "cookbook" = "models";
   let mobileMenuOpen = false;
   let requestForm: RequestForm;
 
   const GITHUB_URL = "https://github.com/BerriAI/litellm";
   const DOCS_URL = "https://docs.litellm.ai";
 
+  // Map URL paths to tab names
+  function getTabFromPath(path: string): "models" | "providers" | "cookbook" {
+    if (path === "/providers" || path === "/providers/") {
+      return "providers";
+    } else if (path === "/cookbook" || path === "/cookbook/") {
+      return "cookbook";
+    }
+    return "models";
+  }
+
+  // Get path from tab name
+  function getPathFromTab(tab: "models" | "providers" | "cookbook"): string {
+    if (tab === "providers") return "/providers";
+    if (tab === "cookbook") return "/cookbook";
+    return "/";
+  }
+
   function toggleMobileMenu() {
     mobileMenuOpen = !mobileMenuOpen;
   }
@@ -20,10 +37,22 @@
     mobileMenuOpen = false;
   }
 
-  function selectTab(tab: "models" | "providers") {
+  function selectTab(tab: "models" | "providers" | "cookbook", updateUrl = true) {
     activeTab = tab;
     closeMobileMenu();
     trackTabChange(tab);
+    
+    // Update URL without page reload
+    if (updateUrl) {
+      const path = getPathFromTab(tab);
+      window.history.pushState({ tab }, "", path);
+    }
+  }
+
+  // Handle browser back/forward buttons
+  function handlePopState(event: PopStateEvent) {
+    const tab = event.state?.tab || getTabFromPath(window.location.pathname);
+    selectTab(tab, false);
   }
   const PROVIDERS_URL = "https://raw.githubusercontent.com/BerriAI/litellm/main/provider_endpoints_support.json";
   const MODELS_URL = "https://raw.githubusercontent.com/BerriAI/litellm/main/model_prices_and_context_window.json";
@@ -39,6 +68,16 @@
     initAnalytics();
     trackPageView('Home');
 
+    // Set initial tab based on URL
+    const initialTab = getTabFromPath(window.location.pathname);
+    activeTab = initialTab;
+    
+    // Set initial history state
+    window.history.replaceState({ tab: initialTab }, "", window.location.pathname);
+    
+    // Listen for browser back/forward navigation
+    window.addEventListener("popstate", handlePopState);
+
     // Check if URL has ?request=true to auto-open the form
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('request') === 'true') {
@@ -82,6 +121,11 @@
       console.error("Failed to load statistics:", error);
       statsLoading = false;
     }
+
+    // Cleanup event listener on component destroy
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
   });
 </script>
 
@@ -109,7 +153,14 @@
             class:active={activeTab === "providers"}
             on:click={() => selectTab("providers")}
           >
-            AI Gateway - Endpoints & Providers
+            Endpoints & Providers
+          </button>
+          <button
+            class="tab"
+            class:active={activeTab === "cookbook"}
+            on:click={() => selectTab("cookbook")}
+          >
+            Cookbook
           </button>
         </div>
         <nav class="nav-links">
@@ -161,6 +212,13 @@
           >
             AI Gateway - Endpoints & Providers
           </button>
+          <button
+            class="mobile-tab"
+            class:active={activeTab === "cookbook"}
+            on:click={() => selectTab("cookbook")}
+          >
+            Cookbook
+          </button>
         </div>
         <div class="mobile-links">
           <a href={DOCS_URL} target="_blank" rel="noopener noreferrer" class="mobile-link" on:click={closeMobileMenu}>Docs</a>
@@ -197,8 +255,13 @@
   <!-- Content -->
   {#if activeTab === "models"}
     <App />
-  {:else}
+  {:else if activeTab === "providers"}
     <Providers />
+  {:else if activeTab === "cookbook"}
+    <div class="cookbook-placeholder">
+      <h2>Cookbook</h2>
+      <p>Coming soon...</p>
+    </div>
   {/if}
 
   <!-- Request Form Modal -->
@@ -637,5 +700,25 @@
       white-space: nowrap;
     }
   }
+
+  /* Cookbook Placeholder */
+  .cookbook-placeholder {
+    max-width: 1400px;
+    margin: 3rem auto;
+    padding: 0 2rem;
+    text-align: center;
+  }
+
+  .cookbook-placeholder h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .cookbook-placeholder p {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+  }
 </style>
 
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..f9c6977
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,9 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}
+
diff --git a/vite.config.ts b/vite.config.ts
index 5ac8ecf..91164ec 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,8 @@ import { svelte } from "@sveltejs/vite-plugin-svelte";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
+  server: {
+    // Enable SPA fallback for client-side routing
+    historyApiFallback: true,
+  },
 });

From 2de90d695d5433da12e05a63253daf87dc687f35 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 15 Jan 2026 16:35:45 +0530
Subject: [PATCH 2/3] feat: publish initial cookbook o

---
 package-lock.json   |  13 +
 package.json        |   1 +
 src/Cookbook.svelte | 605 ++++++++++++++++++++++++++++++++++++++++++++
 src/Main.svelte     |  26 +-
 4 files changed, 621 insertions(+), 24 deletions(-)
 create mode 100644 src/Cookbook.svelte

diff --git a/package-lock.json b/package-lock.json
index bb7c602..0d5ba3a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "fuse.js": "^7.0.0",
+        "marked": "^17.0.1",
         "mixpanel-browser": "^2.73.0",
         "svelte-typewriter": "^3.2.3"
       },
@@ -1306,6 +1307,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/marked": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-17.0.1.tgz",
+      "integrity": "sha512-boeBdiS0ghpWcSwoNm/jJBwdpFaMnZWRzjA6SkUMYb40SVaN1x7mmfGKp0jvexGcx+7y2La5zRZsYFZI6Qpypg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
diff --git a/package.json b/package.json
index 6f26624..74dd7d8 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "fuse.js": "^7.0.0",
+    "marked": "^17.0.1",
     "mixpanel-browser": "^2.73.0",
     "svelte-typewriter": "^3.2.3"
   }
diff --git a/src/Cookbook.svelte b/src/Cookbook.svelte
new file mode 100644
index 0000000..89982e4
--- /dev/null
+++ b/src/Cookbook.svelte
@@ -0,0 +1,605 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { marked } from "marked";
+
+  interface GuideMetadata {
+    title: string;
+    description: string;
+    date: string;
+    version: string;
+    tags: string[];
+  }
+
+  interface Guide {
+    folder: string;
+    metadata: GuideMetadata;
+    markdownContent?: string;
+  }
+
+  let guides: Guide[] = [];
+  let loading = true;
+  let error: string | null = null;
+  let selectedGuide: Guide | null = null;
+  let renderedMarkdown = "";
+
+  const GITHUB_API_BASE = "https://api.github.com/repos/BerriAI/litellm/contents/cookbook/ai_coding_tool_guides";
+  const GITHUB_RAW_BASE = "https://raw.githubusercontent.com/BerriAI/litellm/main/cookbook/ai_coding_tool_guides";
+
+  async function fetchGuides() {
+    try {
+      loading = true;
+      error = null;
+
+      // Fetch the list of folders in the cookbook directory
+      const response = await fetch(GITHUB_API_BASE);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch guides: ${response.statusText}`);
+      }
+
+      const items = await response.json();
+      
+      // Filter only directories
+      const folders = items.filter((item: any) => item.type === "dir");
+
+      // Fetch metadata for each folder
+      const guidesData = await Promise.all(
+        folders.map(async (folder: any) => {
+          try {
+            const indexUrl = `${GITHUB_RAW_BASE}/${folder.name}/index.json`;
+            const indexResponse = await fetch(indexUrl);
+            
+            if (!indexResponse.ok) {
+              console.warn(`No index.json found for ${folder.name}`);
+              return null;
+            }
+
+            const metadata = await indexResponse.json();
+            return {
+              folder: folder.name,
+              metadata,
+            };
+          } catch (err) {
+            console.error(`Error fetching metadata for ${folder.name}:`, err);
+            return null;
+          }
+        })
+      );
+
+      // Filter out nulls and sort by date (newest first)
+      guides = guidesData
+        .filter((g): g is Guide => g !== null)
+        .sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime());
+
+      loading = false;
+    } catch (err) {
+      console.error("Error fetching guides:", err);
+      error = err instanceof Error ? err.message : "Failed to load guides";
+      loading = false;
+    }
+  }
+
+  async function openGuide(guide: Guide) {
+    try {
+      selectedGuide = guide;
+      renderedMarkdown = "";
+
+      // Fetch the markdown content
+      const markdownUrl = `${GITHUB_RAW_BASE}/${guide.folder}/guide.md`;
+      const response = await fetch(markdownUrl);
+      
+      if (!response.ok) {
+        throw new Error(`Failed to fetch guide content: ${response.statusText}`);
+      }
+
+      const markdownText = await response.text();
+      guide.markdownContent = markdownText;
+      
+      // Render markdown to HTML
+      renderedMarkdown = marked(markdownText) as string;
+    } catch (err) {
+      console.error("Error loading guide:", err);
+      renderedMarkdown = `<p style="color: var(--text-color);">Failed to load guide content.</p>`;
+    }
+  }
+
+  function closeGuide() {
+    selectedGuide = null;
+    renderedMarkdown = "";
+  }
+
+  function formatDate(dateString: string): string {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  }
+
+  onMount(() => {
+    fetchGuides();
+  });
+</script>
+
+<div class="cookbook-container">
+  {#if loading}
+    <div class="loading-state">
+      <div class="spinner"></div>
+      <p>Loading cookbook guides...</p>
+    </div>
+  {:else if error}
+    <div class="error-state">
+      <h2>Error Loading Guides</h2>
+      <p>{error}</p>
+      <button class="retry-button" on:click={fetchGuides}>Retry</button>
+    </div>
+  {:else if selectedGuide}
+    <!-- Guide Detail View -->
+    <div class="guide-detail">
+      <button class="back-button" on:click={closeGuide}>
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+        Back to Guides
+      </button>
+
+      <article class="guide-content">
+        <header class="guide-header">
+          <h1>{selectedGuide.metadata.title}</h1>
+          <p class="guide-description">{selectedGuide.metadata.description}</p>
+          <div class="guide-meta">
+            <span class="guide-date">{formatDate(selectedGuide.metadata.date)}</span>
+            <span class="guide-version">v{selectedGuide.metadata.version}</span>
+          </div>
+          <div class="guide-tags">
+            {#each selectedGuide.metadata.tags as tag}
+              <span class="tag">{tag}</span>
+            {/each}
+          </div>
+        </header>
+
+        <div class="markdown-content">
+          {@html renderedMarkdown}
+        </div>
+      </article>
+    </div>
+  {:else}
+    <!-- Guides List View -->
+    <div class="guides-header">
+      <h1>AI Coding Tool Guides</h1>
+      <p class="guides-subtitle">
+        Learn how to integrate LiteLLM with popular AI coding tools
+      </p>
+    </div>
+
+    {#if guides.length === 0}
+      <div class="empty-state">
+        <p>No guides available at the moment.</p>
+      </div>
+    {:else}
+      <div class="guides-grid">
+        {#each guides as guide}
+          <div class="guide-card" on:click={() => openGuide(guide)} on:keydown={(e) => e.key === 'Enter' && openGuide(guide)} role="button" tabindex="0">
+            <h2 class="guide-title">{guide.metadata.title}</h2>
+            <p class="guide-description">{guide.metadata.description}</p>
+            <div class="guide-footer">
+              <span class="guide-date">{formatDate(guide.metadata.date)}</span>
+              <div class="guide-tags-preview">
+                {#each guide.metadata.tags.slice(0, 2) as tag}
+                  <span class="tag-small">{tag}</span>
+                {/each}
+                {#if guide.metadata.tags.length > 2}
+                  <span class="tag-small">+{guide.metadata.tags.length - 2}</span>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .cookbook-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem;
+    min-height: calc(100vh - 200px);
+  }
+
+  /* Loading State */
+  .loading-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    gap: 1rem;
+  }
+
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid var(--border-color);
+    border-top-color: var(--litellm-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-state p {
+    color: var(--text-secondary);
+    font-size: 1rem;
+  }
+
+  /* Error State */
+  .error-state {
+    text-align: center;
+    padding: 4rem 2rem;
+  }
+
+  .error-state h2 {
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .error-state p {
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+  }
+
+  .retry-button {
+    padding: 0.75rem 1.5rem;
+    background-color: var(--litellm-primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .retry-button:hover {
+    background-color: var(--litellm-dark);
+  }
+
+  /* Guides Header */
+  .guides-header {
+    text-align: center;
+    margin-bottom: 3rem;
+  }
+
+  .guides-header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.75rem;
+  }
+
+  .guides-subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+  }
+
+  /* Empty State */
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: var(--text-secondary);
+  }
+
+  /* Guides Grid */
+  .guides-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .guide-card {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 1.5rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .guide-card:hover {
+    border-color: var(--litellm-primary);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+  }
+
+  .guide-card:focus {
+    outline: 2px solid var(--litellm-primary);
+    outline-offset: 2px;
+  }
+
+  .guide-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+  }
+
+  .guide-description {
+    font-size: 0.9375rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .guide-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+  }
+
+  .guide-date {
+    font-size: 0.875rem;
+    color: var(--muted-color);
+  }
+
+  .guide-tags-preview {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .tag-small {
+    padding: 0.25rem 0.5rem;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  /* Guide Detail View */
+  .guide-detail {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .back-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-color);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-bottom: 2rem;
+  }
+
+  .back-button:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--border-color-strong);
+  }
+
+  .guide-content {
+    background: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 3rem;
+  }
+
+  .guide-header {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .guide-header h1 {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .guide-header .guide-description {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+  }
+
+  .guide-meta {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .guide-version {
+    padding: 0.25rem 0.75rem;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border-radius: 4px;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .guide-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .tag {
+    padding: 0.375rem 0.75rem;
+    background: var(--bg-tertiary);
+    color: var(--text-secondary);
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  /* Markdown Content Styling */
+  .markdown-content {
+    color: var(--text-color);
+    line-height: 1.7;
+  }
+
+  .markdown-content :global(h1),
+  .markdown-content :global(h2),
+  .markdown-content :global(h3),
+  .markdown-content :global(h4),
+  .markdown-content :global(h5),
+  .markdown-content :global(h6) {
+    color: var(--text-color);
+    font-weight: 600;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+  }
+
+  .markdown-content :global(h1) {
+    font-size: 2rem;
+  }
+
+  .markdown-content :global(h2) {
+    font-size: 1.5rem;
+  }
+
+  .markdown-content :global(h3) {
+    font-size: 1.25rem;
+  }
+
+  .markdown-content :global(p) {
+    margin-bottom: 1rem;
+  }
+
+  .markdown-content :global(a) {
+    color: var(--litellm-primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+  }
+
+  .markdown-content :global(a:hover) {
+    color: var(--litellm-dark);
+    text-decoration: underline;
+  }
+
+  .markdown-content :global(code) {
+    background: var(--code-bg);
+    color: var(--code-text);
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-size: 0.875em;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  }
+
+  .markdown-content :global(pre) {
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+  }
+
+  .markdown-content :global(pre code) {
+    background: none;
+    padding: 0;
+    font-size: 0.875rem;
+  }
+
+  .markdown-content :global(ul),
+  .markdown-content :global(ol) {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+  }
+
+  .markdown-content :global(li) {
+    margin-bottom: 0.5rem;
+  }
+
+  .markdown-content :global(blockquote) {
+    border-left: 4px solid var(--litellm-primary);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+    color: var(--text-secondary);
+    font-style: italic;
+  }
+
+  .markdown-content :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+  }
+
+  .markdown-content :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5rem 0;
+  }
+
+  .markdown-content :global(th),
+  .markdown-content :global(td) {
+    border: 1px solid var(--border-color);
+    padding: 0.75rem;
+    text-align: left;
+  }
+
+  .markdown-content :global(th) {
+    background: var(--bg-tertiary);
+    font-weight: 600;
+  }
+
+  .markdown-content :global(hr) {
+    border: none;
+    border-top: 1px solid var(--border-color);
+    margin: 2rem 0;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .cookbook-container {
+      padding: 1rem;
+    }
+
+    .guides-header h1 {
+      font-size: 2rem;
+    }
+
+    .guides-subtitle {
+      font-size: 1rem;
+    }
+
+    .guides-grid {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .guide-content {
+      padding: 1.5rem;
+    }
+
+    .guide-header h1 {
+      font-size: 1.75rem;
+    }
+
+    .guide-footer {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+</style>
+
diff --git a/src/Main.svelte b/src/Main.svelte
index 17890ff..b8e01ba 100644
--- a/src/Main.svelte
+++ b/src/Main.svelte
@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import App from "./App.svelte";
   import Providers from "./Providers.svelte";
+  import Cookbook from "./Cookbook.svelte";
   import RequestForm from "./RequestForm.svelte";
   import { initAnalytics, trackPageView, trackTabChange } from "./analytics";
 
@@ -258,10 +259,7 @@
   {:else if activeTab === "providers"}
     <Providers />
   {:else if activeTab === "cookbook"}
-    <div class="cookbook-placeholder">
-      <h2>Cookbook</h2>
-      <p>Coming soon...</p>
-    </div>
+    <Cookbook />
   {/if}
 
   <!-- Request Form Modal -->
@@ -700,25 +698,5 @@
       white-space: nowrap;
     }
   }
-
-  /* Cookbook Placeholder */
-  .cookbook-placeholder {
-    max-width: 1400px;
-    margin: 3rem auto;
-    padding: 0 2rem;
-    text-align: center;
-  }
-
-  .cookbook-placeholder h2 {
-    font-size: 2rem;
-    font-weight: 700;
-    color: var(--text-color);
-    margin-bottom: 1rem;
-  }
-
-  .cookbook-placeholder p {
-    font-size: 1.125rem;
-    color: var(--text-secondary);
-  }
 </style>
 

From a68358e9469191a5e747ec2f7511d3ae3d65eeec Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Thu, 15 Jan 2026 20:46:03 +0530
Subject: [PATCH 3/3] fix: route to docs

---
 src/Cookbook.svelte | 341 +++-----------------------------------------
 1 file changed, 23 insertions(+), 318 deletions(-)

diff --git a/src/Cookbook.svelte b/src/Cookbook.svelte
index 89982e4..57153d8 100644
--- a/src/Cookbook.svelte
+++ b/src/Cookbook.svelte
@@ -1,74 +1,42 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { marked } from "marked";
 
-  interface GuideMetadata {
+  interface Guide {
     title: string;
     description: string;
+    url: string;
     date: string;
     version: string;
     tags: string[];
   }
 
-  interface Guide {
-    folder: string;
-    metadata: GuideMetadata;
-    markdownContent?: string;
-  }
-
   let guides: Guide[] = [];
   let loading = true;
   let error: string | null = null;
-  let selectedGuide: Guide | null = null;
-  let renderedMarkdown = "";
 
-  const GITHUB_API_BASE = "https://api.github.com/repos/BerriAI/litellm/contents/cookbook/ai_coding_tool_guides";
-  const GITHUB_RAW_BASE = "https://raw.githubusercontent.com/BerriAI/litellm/main/cookbook/ai_coding_tool_guides";
+  const INDEX_URL = "https://raw.githubusercontent.com/BerriAI/litellm/refs/heads/main/cookbook/ai_coding_tool_guides/index.json";
 
   async function fetchGuides() {
     try {
       loading = true;
       error = null;
 
-      // Fetch the list of folders in the cookbook directory
-      const response = await fetch(GITHUB_API_BASE);
+      const response = await fetch(INDEX_URL);
       if (!response.ok) {
         throw new Error(`Failed to fetch guides: ${response.statusText}`);
       }
 
-      const items = await response.json();
+      const data = await response.json();
       
-      // Filter only directories
-      const folders = items.filter((item: any) => item.type === "dir");
-
-      // Fetch metadata for each folder
-      const guidesData = await Promise.all(
-        folders.map(async (folder: any) => {
-          try {
-            const indexUrl = `${GITHUB_RAW_BASE}/${folder.name}/index.json`;
-            const indexResponse = await fetch(indexUrl);
-            
-            if (!indexResponse.ok) {
-              console.warn(`No index.json found for ${folder.name}`);
-              return null;
-            }
-
-            const metadata = await indexResponse.json();
-            return {
-              folder: folder.name,
-              metadata,
-            };
-          } catch (err) {
-            console.error(`Error fetching metadata for ${folder.name}:`, err);
-            return null;
-          }
-        })
-      );
-
-      // Filter out nulls and sort by date (newest first)
-      guides = guidesData
-        .filter((g): g is Guide => g !== null)
-        .sort((a, b) => new Date(b.metadata.date).getTime() - new Date(a.metadata.date).getTime());
+      // Handle both array and single object responses
+      if (Array.isArray(data)) {
+        guides = data;
+      } else {
+        guides = [data];
+      }
+
+      // Sort by date (newest first)
+      guides = guides.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 
       loading = false;
     } catch (err) {
@@ -78,33 +46,9 @@
     }
   }
 
-  async function openGuide(guide: Guide) {
-    try {
-      selectedGuide = guide;
-      renderedMarkdown = "";
-
-      // Fetch the markdown content
-      const markdownUrl = `${GITHUB_RAW_BASE}/${guide.folder}/guide.md`;
-      const response = await fetch(markdownUrl);
-      
-      if (!response.ok) {
-        throw new Error(`Failed to fetch guide content: ${response.statusText}`);
-      }
-
-      const markdownText = await response.text();
-      guide.markdownContent = markdownText;
-      
-      // Render markdown to HTML
-      renderedMarkdown = marked(markdownText) as string;
-    } catch (err) {
-      console.error("Error loading guide:", err);
-      renderedMarkdown = `<p style="color: var(--text-color);">Failed to load guide content.</p>`;
-    }
-  }
-
-  function closeGuide() {
-    selectedGuide = null;
-    renderedMarkdown = "";
+  function openGuide(guide: Guide) {
+    // Open the guide URL in a new tab
+    window.open(guide.url, '_blank', 'noopener,noreferrer');
   }
 
   function formatDate(dateString: string): string {
@@ -133,36 +77,6 @@
       <p>{error}</p>
       <button class="retry-button" on:click={fetchGuides}>Retry</button>
     </div>
-  {:else if selectedGuide}
-    <!-- Guide Detail View -->
-    <div class="guide-detail">
-      <button class="back-button" on:click={closeGuide}>
-        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <polyline points="15 18 9 12 15 6"></polyline>
-        </svg>
-        Back to Guides
-      </button>
-
-      <article class="guide-content">
-        <header class="guide-header">
-          <h1>{selectedGuide.metadata.title}</h1>
-          <p class="guide-description">{selectedGuide.metadata.description}</p>
-          <div class="guide-meta">
-            <span class="guide-date">{formatDate(selectedGuide.metadata.date)}</span>
-            <span class="guide-version">v{selectedGuide.metadata.version}</span>
-          </div>
-          <div class="guide-tags">
-            {#each selectedGuide.metadata.tags as tag}
-              <span class="tag">{tag}</span>
-            {/each}
-          </div>
-        </header>
-
-        <div class="markdown-content">
-          {@html renderedMarkdown}
-        </div>
-      </article>
-    </div>
   {:else}
     <!-- Guides List View -->
     <div class="guides-header">
@@ -180,16 +94,16 @@
       <div class="guides-grid">
         {#each guides as guide}
           <div class="guide-card" on:click={() => openGuide(guide)} on:keydown={(e) => e.key === 'Enter' && openGuide(guide)} role="button" tabindex="0">
-            <h2 class="guide-title">{guide.metadata.title}</h2>
-            <p class="guide-description">{guide.metadata.description}</p>
+            <h2 class="guide-title">{guide.title}</h2>
+            <p class="guide-description">{guide.description}</p>
             <div class="guide-footer">
-              <span class="guide-date">{formatDate(guide.metadata.date)}</span>
+              <span class="guide-date">{formatDate(guide.date)}</span>
               <div class="guide-tags-preview">
-                {#each guide.metadata.tags.slice(0, 2) as tag}
+                {#each guide.tags.slice(0, 2) as tag}
                   <span class="tag-small">{tag}</span>
                 {/each}
-                {#if guide.metadata.tags.length > 2}
-                  <span class="tag-small">+{guide.metadata.tags.length - 2}</span>
+                {#if guide.tags.length > 2}
+                  <span class="tag-small">+{guide.tags.length - 2}</span>
                 {/if}
               </div>
             </div>
@@ -368,207 +282,6 @@
     font-weight: 500;
   }
 
-  /* Guide Detail View */
-  .guide-detail {
-    max-width: 900px;
-    margin: 0 auto;
-  }
-
-  .back-button {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem 1rem;
-    background: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    color: var(--text-color);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    margin-bottom: 2rem;
-  }
-
-  .back-button:hover {
-    background: var(--bg-tertiary);
-    border-color: var(--border-color-strong);
-  }
-
-  .guide-content {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 3rem;
-  }
-
-  .guide-header {
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-    border-bottom: 1px solid var(--border-color);
-  }
-
-  .guide-header h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--text-color);
-    margin-bottom: 1rem;
-  }
-
-  .guide-header .guide-description {
-    font-size: 1.125rem;
-    color: var(--text-secondary);
-    margin-bottom: 1rem;
-  }
-
-  .guide-meta {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 1rem;
-  }
-
-  .guide-version {
-    padding: 0.25rem 0.75rem;
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-    border-radius: 4px;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  .guide-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
-
-  .tag {
-    padding: 0.375rem 0.75rem;
-    background: var(--bg-tertiary);
-    color: var(--text-secondary);
-    border-radius: 6px;
-    font-size: 0.875rem;
-    font-weight: 500;
-  }
-
-  /* Markdown Content Styling */
-  .markdown-content {
-    color: var(--text-color);
-    line-height: 1.7;
-  }
-
-  .markdown-content :global(h1),
-  .markdown-content :global(h2),
-  .markdown-content :global(h3),
-  .markdown-content :global(h4),
-  .markdown-content :global(h5),
-  .markdown-content :global(h6) {
-    color: var(--text-color);
-    font-weight: 600;
-    margin-top: 2rem;
-    margin-bottom: 1rem;
-    line-height: 1.3;
-  }
-
-  .markdown-content :global(h1) {
-    font-size: 2rem;
-  }
-
-  .markdown-content :global(h2) {
-    font-size: 1.5rem;
-  }
-
-  .markdown-content :global(h3) {
-    font-size: 1.25rem;
-  }
-
-  .markdown-content :global(p) {
-    margin-bottom: 1rem;
-  }
-
-  .markdown-content :global(a) {
-    color: var(--litellm-primary);
-    text-decoration: none;
-    transition: color 0.2s ease;
-  }
-
-  .markdown-content :global(a:hover) {
-    color: var(--litellm-dark);
-    text-decoration: underline;
-  }
-
-  .markdown-content :global(code) {
-    background: var(--code-bg);
-    color: var(--code-text);
-    padding: 0.2rem 0.4rem;
-    border-radius: 4px;
-    font-size: 0.875em;
-    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  }
-
-  .markdown-content :global(pre) {
-    background: var(--code-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 1rem;
-    overflow-x: auto;
-    margin: 1.5rem 0;
-  }
-
-  .markdown-content :global(pre code) {
-    background: none;
-    padding: 0;
-    font-size: 0.875rem;
-  }
-
-  .markdown-content :global(ul),
-  .markdown-content :global(ol) {
-    margin-bottom: 1rem;
-    padding-left: 2rem;
-  }
-
-  .markdown-content :global(li) {
-    margin-bottom: 0.5rem;
-  }
-
-  .markdown-content :global(blockquote) {
-    border-left: 4px solid var(--litellm-primary);
-    padding-left: 1rem;
-    margin: 1.5rem 0;
-    color: var(--text-secondary);
-    font-style: italic;
-  }
-
-  .markdown-content :global(img) {
-    max-width: 100%;
-    height: auto;
-    border-radius: 8px;
-    margin: 1.5rem 0;
-  }
-
-  .markdown-content :global(table) {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 1.5rem 0;
-  }
-
-  .markdown-content :global(th),
-  .markdown-content :global(td) {
-    border: 1px solid var(--border-color);
-    padding: 0.75rem;
-    text-align: left;
-  }
-
-  .markdown-content :global(th) {
-    background: var(--bg-tertiary);
-    font-weight: 600;
-  }
-
-  .markdown-content :global(hr) {
-    border: none;
-    border-top: 1px solid var(--border-color);
-    margin: 2rem 0;
-  }
-
   /* Responsive Design */
   @media (max-width: 768px) {
     .cookbook-container {
@@ -588,14 +301,6 @@
       gap: 1rem;
     }
 
-    .guide-content {
-      padding: 1.5rem;
-    }
-
-    .guide-header h1 {
-      font-size: 1.75rem;
-    }
-
     .guide-footer {
       flex-direction: column;
       align-items: flex-start;