Add Recipe Remix Cloud quickstart

[zahlekhan]

Summary

• replace the finance quickstart with a Cloud-focused Recipe Remix tutorial
• add recipe starter prompts, a pantry function tool, and an interactive custom component
• use Cloud web and image search while preserving the built-in library and artifact renderers
• generate a serializable component spec so the API route does not import React renderers

Why

The quickstart now ends with a useful agent that demonstrates both ways users extend a Cloud starter: adding a server-side tool and adding a Generative UI component. The generated spec keeps the React component library on the client side and avoids Next.js React Server Component runtime failures.

Validation

• generated the spec with @openuidev/cli@latest in a fresh published Cloud scaffold
• npm run typecheck in the scaffold
• focused ESLint checks for the component, API route, and Next config
• npm run build in the scaffold with Next.js 16.3.1
• Prettier check for the quickstart MDX
• verified the final page in the local docs preview

[vercel]

@zahlekhan is attempting to deploy a commit to the thesys-devs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
openui-docs	Ready	Preview	Aug 19, 2026 1:52pm

[devin-ai-integration]

Ran this quickstart end to end on a fresh scaffold (@openuidev/cli create --template openui-cloud, Node 22, Next dev server) following steps 1–5 literally. The golden path works — one issue in the sample component code worth fixing before merge.

Final state (step 5: click "Cook from my pantry")

get_recipe_profile → web search → image search → one RecipeRemix panel with three complete cards (image, time, ingredients, Swap:, Source, Remix this). POST /api/chat 200, dev-server log clean.

Welcome screen after step 2 (title/starters swapped, prompt templates gone)

"Remix this" follow-up turn (also renders RecipeRemix)

Clicking Remix this sent exactly Make Curried Chickpeas with Spinach & Tomatoes faster and simpler and rendered a second panel. POST /api/chat 200.

Issue: the step-4 component code throws 3 runtime TypeErrors mid-stream

The component is re-rendered on every streaming delta with partial props, so fields the zod schema marks required still arrive null/undefined:

• Cannot read properties of null (reading 'map') — recipe.ingredients.map(...) (x2)
• Cannot read properties of undefined (reading 'startsWith') — recipe.sourceUrl.startsWith("https://")

The final render recovers and looks correct, but a reader following the doc gets a red Next.js error badge on their first turn. Suggest optional chaining in the snippet (matching the imageUrl?.startsWith guard that's already there):

- {recipe.ingredients.map((ingredient) => (
+ {recipe.ingredients?.map((ingredient) => (
...
- {recipe.sourceUrl.startsWith("https://") && (
+ {recipe.sourceUrl?.startsWith("https://") && (

Nit: step 2 removes PROMPT_TEMPLATES from the cloud-chat.tsx import but leaves the now-unused export in starters.tsx — worth a one-line note so readers don't think a deletion is missing.

Only next dev was exercised; production-build behavior of the streaming TypeErrors is untested.

Written by Devin