Skip to content

chore(demo): add LLMGateway showcase deck#107

Open
smakosh wants to merge 1 commit into
1weiho:mainfrom
smakosh:feat/llmgateway-demo
Open

chore(demo): add LLMGateway showcase deck#107
smakosh wants to merge 1 commit into
1weiho:mainfrom
smakosh:feat/llmgateway-demo

Conversation

@smakosh
Copy link
Copy Markdown

@smakosh smakosh commented May 12, 2026

Summary

  • New 6-page deck under apps/demo/slides/llmgateway/ showcasing LLMGateway — cover, the provider-sprawl problem, the gateway pitch, an AI SDK code sample, a model grid, and a closing CTA.
  • Same visual vocabulary as the vercel-ai-sdk deck (eyebrow numbering, fade-up motion, glow blobs, mono code panel) so it sits alongside the other product showcases, with a violet accent (#a78bfa) to differentiate it.
  • Lists LLMGateway alongside the other providers in the existing vercel-ai-sdk deck. Replaces the + more tile so the 5-column grid stays balanced at exactly 20 entries — the 20+ supported headline already signals there are more.

Why

LLMGateway publishes a Vercel AI SDK provider (@llmgateway/ai-sdk-provider) similar to OpenRouter — a single key + endpoint that fans out to OpenAI, Anthropic, Google, Groq, etc. It fits naturally next to the existing OpenRouter entry in the provider list, and a dedicated deck slots into the product-showcase pattern alongside vercel-ai-sdk, raycast-api, claude-code-intro, vercel-labs-2026.

Test plan

  • pnpm check — biome clean (only the pre-existing noImgElement warning in apps/web/lib/layout.shared.tsx)
  • pnpm exec open-slide build from apps/demo — full demo deck builds successfully
  • All 6 pages fit the 1920×1080 canvas (no overflow)
  • Boot pnpm dev, navigate to /slides/llmgateway, page through all 6 pages
  • Verify the updated vercel-ai-sdk providers page still lays out as a clean 5×4 grid

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features
    • Introduced LLMGateway slide presentation with multiple themed slides, animations, and code visualization
    • Added LLMGateway to the list of supported providers

Review Change Stack

Adds a 6-page deck under apps/demo/slides/llmgateway/ covering the problem,
pitch, AI SDK provider code sample, model breadth, and a closing CTA.

Also lists LLMGateway alongside the other AI SDK providers in the
vercel-ai-sdk deck (replacing the "+ more" tile to keep the 5×4 grid balanced).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 12, 2026

@smakosh is attempting to deploy a commit to the Yiwei Ho Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 12, 2026

Walkthrough

This PR adds a complete LLMGateway slide deck presentation with six content pages using a custom design system and animation framework. It simultaneously updates the Vercel AI SDK slide to include LLMGateway in its provider list and removes the '+ more' placeholder styling.

Changes

LLMGateway Slide Deck

Layer / File(s) Summary
Design system and animation framework
apps/demo/slides/llmgateway/index.tsx (lines 1–143)
Defines a DesignSystem theme with palette, font families, and type scale. Injects CSS keyframes for fade animations and provides reusable animation helpers (fade, fadeUp, fadeIn). Adds decorative background components (grid background, glow blobs) and an eyebrow header renderer used across slides.
Slide content pages
apps/demo/slides/llmgateway/index.tsx (lines 144–748)
Implements six slide pages in sequence: Cover (animated introduction with year and descriptor), Problem (five providers/SDKs/bills with provider chips and npm install), Pitch (single-gateway proxy concept), Code (syntax-highlighted TypeScript drop-in example), Models (grid of model chips with link footer), and Closing. Exports slide metadata and default page array.

Vercel AI SDK Provider Update

Layer / File(s) Summary
Add LLMGateway provider and update styling
apps/demo/slides/vercel-ai-sdk/index.tsx (lines 836–910)
Adds LLMGateway to the providers array and removes the '+ more' placeholder entry, resulting in explicit providers: , Ollama, OpenRouter, LLMGateway, Cerebras, Hugging Face. Removes conditional accent highlighting of the placeholder and applies uniform palette.textSoft color to all provider cards.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A gateway to models, six slides shining bright,
With fades and glows dancing in polished light,
From cover to closing, a story unfolds,
LLMGateway joins the demo's precious holds! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately and concisely describes the main change: adding a new LLMGateway showcase deck to the demo application.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/demo/slides/llmgateway/index.tsx`:
- Line 144: Remove all decorative section-divider banner comments (the lines
that start with "// ───" and similar banners such as "// ─── 01 · Cover ───")
from this TSX module; search for and delete every instance of that banner
pattern (including the occurrences that label sections like "01 · Cover") so the
file and component definitions (e.g., the default React component and any
exported helpers in this file) no longer contain those decorative comments and
conform to the repository comment policy.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 48c865ef-4051-4d2c-96e1-1800f0cd78c1

📥 Commits

Reviewing files that changed from the base of the PR and between 9a0e2d1 and 1de6059.

📒 Files selected for processing (2)
  • apps/demo/slides/llmgateway/index.tsx
  • apps/demo/slides/vercel-ai-sdk/index.tsx

</div>
);

// ─── 01 · Cover ───────────────────────────────────────────────────────────────
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

Remove section-divider banner comments in this TSX file.

These comments are decorative and don’t capture non-obvious constraints; please remove them to match repository comment policy.

As per coding guidelines "**/*.{ts,tsx,js,jsx}: Default to writing no comments... don't use section-divider banners..."

Also applies to: 240-240, 334-334, 383-383, 558-558, 660-660

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/demo/slides/llmgateway/index.tsx` at line 144, Remove all decorative
section-divider banner comments (the lines that start with "// ───" and similar
banners such as "// ─── 01 · Cover ───") from this TSX module; search for and
delete every instance of that banner pattern (including the occurrences that
label sections like "01 · Cover") so the file and component definitions (e.g.,
the default React component and any exported helpers in this file) no longer
contain those decorative comments and conform to the repository comment policy.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant