fix header

make model configurable (#17 )
* make model configurable * update examples * fix lint * update env var name * fix
2026-10-03 04:18:15 +08:00 · 2026-01-21 12:18:11 -06:00 · 2026-01-16 22:45:16 -06:00 · 2026-01-16 22:10:07 -06:00
11 changed files with 72 additions and 21 deletions
@@ -1,4 +1,9 @@
-# AI Gateway API Key (required for /api/generate endpoint)
-# Uses Vercel AI Gateway - automatically authenticated when deployed on Vercel
+# Vercel AI Gateway
+# Automatically authenticated when deployed on Vercel
 # For local development, get your key from https://vercel.com/ai-gateway
 AI_GATEWAY_API_KEY=
+
+# AI Model Configuration
+# Override the default model used for UI generation
+# Default: anthropic/claude-haiku-4.5
+AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
@@ -78,6 +78,7 @@ EXAMPLE (Blog with responsive grid):
 Generate JSONL:`;

 const MAX_PROMPT_LENGTH = 140;
+const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";

 export async function POST(req: Request) {
  const { prompt } = await req.json();
@@ -85,7 +86,7 @@ export async function POST(req: Request) {
  const sanitizedPrompt = String(prompt || "").slice(0, MAX_PROMPT_LENGTH);

  const result = streamText({
-    model: "anthropic/claude-opus-4.5",
+    model: process.env.AI_GATEWAY_MODEL || DEFAULT_MODEL,
    system: SYSTEM_PROMPT,
    prompt: sanitizedPrompt,
    temperature: 0.7,
@@ -33,7 +33,7 @@ export async function POST(req: Request) {
    : '';

  const result = streamText({
-    model: 'anthropic/claude-opus-4.5',
+    model: 'anthropic/claude-haiku-4.5',
    system: systemPrompt + contextPrompt,
    prompt,
  });
@@ -100,7 +100,7 @@ export async function POST(req: Request) {
  const systemPrompt = generateCatalogPrompt(catalog);

  const result = streamText({
-    model: 'anthropic/claude-opus-4.5',
+    model: 'anthropic/claude-haiku-4.5',
    system: systemPrompt,
    prompt,
  });
@@ -79,7 +79,7 @@ function App() {
  const { prompt } = await req.json();
  
  const result = streamText({
-    model: 'anthropic/claude-opus-4.5',
+    model: 'anthropic/claude-haiku-4.5',
    system: generateCatalogPrompt(catalog),
    prompt,
  });
@@ -5,6 +5,7 @@

 :root {
  --radius: 0.5rem;
+  --ds-gray-500: oklch(0.836 0 0);
  /* Monochrome light theme */
  --background: oklch(1.0 0 0);
  --foreground: oklch(0.1 0 0);
@@ -28,6 +29,7 @@
 }

 .dark {
+  --ds-gray-500: oklch(0.39 0 0);
  /* Monochrome dark theme */
  --background: oklch(0.0 0 0);
  --foreground: oklch(0.98 0 0);
@@ -201,7 +201,7 @@ export function CodeBlock({
        </div>
      )}
      <div
-        className="text-[11px] leading-relaxed [&_pre]:bg-transparent! [&_pre]:p-0! [&_pre]:m-0! [&_pre]:border-none! [&_pre]:rounded-none! [&_pre]:text-[11px]! [&_pre]:overflow-visible! [&_code]:bg-transparent! [&_code]:p-0! [&_code]:rounded-none! [&_code]:text-[11px]!"
+        className="text-[13px] leading-relaxed [&_pre]:bg-transparent! [&_pre]:p-0! [&_pre]:m-0! [&_pre]:border-none! [&_pre]:rounded-none! [&_pre]:text-[13px]! [&_pre]:overflow-visible! [&_code]:bg-transparent! [&_code]:p-0! [&_code]:rounded-none! [&_code]:text-[13px]!"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </div>
@@ -3,18 +3,53 @@ import { ThemeToggle } from "./theme-toggle";

 export function Header() {
  return (
-    <header className="sticky top-0 z-50 backdrop-blur-sm border-b border-border bg-background/80">
-      <div className="max-w-5xl mx-auto px-6 h-14 flex justify-between items-center">
-        <Link
-          href="/"
-          className="font-semibold hover:opacity-70 transition-opacity"
-        >
-          json-render
-        </Link>
-        <nav className="flex gap-4 items-center text-sm">
+    <header className="sticky top-0 z-50 bg-background">
+      <div className="flex h-14 items-center justify-between px-4 gap-6">
+        <div className="flex items-center gap-2">
+          <Link href="https://vercel.com" title="Made with love by Vercel">
+            <svg
+              data-testid="geist-icon"
+              height="18"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="18"
+              style={{ color: "currentcolor" }}
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 1L16 15H0L8 1Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </Link>
+          <span className="text-(--ds-gray-500)">
+            <svg
+              data-testid="geist-icon"
+              height="16"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="16"
+              style={{ color: "currentcolor" }}
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </span>
+          <Link href="/">
+            <span className="font-medium tracking-tight text-lg">
+              json-render
+            </span>
+          </Link>
+        </div>
+        <nav className="flex items-center gap-4">
          <Link
            href="/docs"
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            Docs
          </Link>
@@ -22,7 +57,7 @@ export function Header() {
            href="https://github.com/vercel-labs/json-render"
            target="_blank"
            rel="noopener noreferrer"
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
          >
            GitHub
          </a>
@@ -1,4 +1,9 @@
-# AI Gateway API Key (required for /api/generate endpoint)
-# Uses Vercel AI Gateway - automatically authenticated when deployed on Vercel
+# Vercel AI Gateway
+# Automatically authenticated when deployed on Vercel
 # For local development, get your key from https://vercel.com/ai-gateway
 AI_GATEWAY_API_KEY=
+
+# AI Model Configuration
+# Override the default model used for dashboard generation
+# Default: anthropic/claude-haiku-4.5
+AI_GATEWAY_MODEL=anthropic/claude-haiku-4.5
@@ -58,6 +58,8 @@ EXAMPLE - Revenue Dashboard:

 Generate JSONL patches now:`;

+const DEFAULT_MODEL = "anthropic/claude-haiku-4.5";
+
 export async function POST(req: Request) {
  const { prompt, context } = await req.json();

@@ -69,7 +71,7 @@ export async function POST(req: Request) {
  }

  const result = streamText({
-    model: "anthropic/claude-opus-4.5",
+    model: process.env.AI_GATEWAY_MODEL || DEFAULT_MODEL,
    system: SYSTEM_PROMPT,
    prompt: fullPrompt,
    temperature: 0.7,
@@ -1,6 +1,7 @@
 {
  "$schema": "https://turborepo.dev/schema.json",
  "ui": "tui",
+  "globalEnv": ["AI_GATEWAY_MODEL"],
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
Author	SHA1	Message	Date
Chris Tate	bde3556a90	fix header	2026-01-21 12:18:11 -06:00
Chris Tate	43756783fe	make model configurable (#17 ) * make model configurable * update examples * fix lint * update env var name * fix	2026-01-16 22:45:16 -06:00
Chris Tate	af9dd04085	codegen (#15 ) * codegen * fixes * fix lint * address feedback	2026-01-16 22:10:07 -06:00