Fix previousSpec property name and lazy rate limiting

- Fix property name mismatch: playground now passes previousSpec
  instead of previousTree to match what useUIStream hook expects
- Make rate limiting lazy-initialized to avoid runtime errors when
  Redis env vars (KV_REST_API_URL, KV_REST_API_TOKEN) are not set
- Rate limiting gracefully becomes a no-op when Redis is unavailable

Author: ctate

apps/web/app/api/generate/route.ts

@@ -44,19 +44,19 @@ export async function POST(req: Request) {
   }
 
   const { prompt, context } = await req.json();
-  const previousTree = context?.previousTree;
+  const previousSpec = context?.previousSpec;
 
   const sanitizedPrompt = String(prompt || "").slice(0, MAX_PROMPT_LENGTH);
 
   // Build the user prompt, including previous tree for iteration
   let userPrompt = sanitizedPrompt;
   if (
-    previousTree &&
-    previousTree.root &&
-    Object.keys(previousTree.elements || {}).length > 0
+    previousSpec &&
+    previousSpec.root &&
+    Object.keys(previousSpec.elements || {}).length > 0
   ) {
     userPrompt = `CURRENT UI STATE (already loaded, DO NOT recreate existing elements):
-${JSON.stringify(previousTree, null, 2)}
+${JSON.stringify(previousSpec, null, 2)}
 
 USER REQUEST: ${sanitizedPrompt}
 

apps/web/components/playground.tsx

@@ -50,7 +50,7 @@ export function Playground() {
   // Track the currently generating version ID
   const generatingVersionIdRef = useRef<string | null>(null);
 
-  // Track the current tree for use as previousTree in next generation
+  // Track the current tree for use as previousSpec in next generation
   const currentTreeRef = useRef<Spec | null>(null);
 
   const {
@@ -163,7 +163,7 @@ export function Playground() {
     setStreamLines([]); // Reset stream lines for new generation
 
     // Pass the current tree as context so the API can iterate on it
-    await send(inputValue.trim(), { previousTree: currentTreeRef.current });
+    await send(inputValue.trim(), { previousSpec: currentTreeRef.current });
   }, [inputValue, isStreaming, send]);
 
   const handleKeyDown = useCallback(

apps/web/lib/rate-limit.ts

@@ -1,21 +1,54 @@
 import { Ratelimit } from "@upstash/ratelimit";
 import { Redis } from "@upstash/redis";
 
-const redis = new Redis({
-  url: process.env.KV_REST_API_URL!,
-  token: process.env.KV_REST_API_TOKEN!,
-});
+// Lazy initialization to avoid errors when Redis env vars are not configured
+let _minuteRateLimit: Ratelimit | null = null;
+let _dailyRateLimit: Ratelimit | null = null;
+
+function getRedis(): Redis | null {
+  const url = process.env.KV_REST_API_URL;
+  const token = process.env.KV_REST_API_TOKEN;
+
+  if (!url || !token) {
+    return null;
+  }
+
+  return new Redis({ url, token });
+}
+
+// No-op rate limiter for when Redis is not configured
+const noopRateLimiter = {
+  limit: async () => ({ success: true, limit: 0, remaining: 0, reset: 0 }),
+};
 
 // 10 requests per minute (sliding window)
-export const minuteRateLimit = new Ratelimit({
-  redis,
-  limiter: Ratelimit.slidingWindow(10, "1 m"),
-  prefix: "ratelimit:minute",
-});
+export const minuteRateLimit = {
+  limit: async (identifier: string) => {
+    if (!_minuteRateLimit) {
+      const redis = getRedis();
+      if (!redis) return noopRateLimiter.limit();
+      _minuteRateLimit = new Ratelimit({
+        redis,
+        limiter: Ratelimit.slidingWindow(10, "1 m"),
+        prefix: "ratelimit:minute",
+      });
+    }
+    return _minuteRateLimit.limit(identifier);
+  },
+};
 
 // 100 requests per day (fixed window)
-export const dailyRateLimit = new Ratelimit({
-  redis,
-  limiter: Ratelimit.fixedWindow(100, "1 d"),
-  prefix: "ratelimit:daily",
-});
+export const dailyRateLimit = {
+  limit: async (identifier: string) => {
+    if (!_dailyRateLimit) {
+      const redis = getRedis();
+      if (!redis) return noopRateLimiter.limit();
+      _dailyRateLimit = new Ratelimit({
+        redis,
+        limiter: Ratelimit.fixedWindow(100, "1 d"),
+        prefix: "ratelimit:daily",
+      });
+    }
+    return _dailyRateLimit.limit(identifier);
+  },
+};