diff --git a/docs/components/copyable-diff.tsx b/docs/components/copyable-diff.tsx
new file mode 100644
index 000000000..86cee7d62
--- /dev/null
+++ b/docs/components/copyable-diff.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { Check, Clipboard } from "lucide-react";
+import { useState } from "react";
+
+export function CopyableDiff({ code }: { code: string }) {
+  const [copied, setCopied] = useState(false);
+  const lines = code.replace(/^\n|\n$/g, "").split("\n");
+  const finalCode = lines
+    .filter((line) => !line.startsWith("-"))
+    .map((line) => (/^[+=]/.test(line) ? line.slice(1) : line))
+    .join("\n");
+
+  async function copy() {
+    await navigator.clipboard.writeText(finalCode);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1500);
+  }
+
+  return (
+    <figure className="not-prose relative my-4 overflow-hidden rounded-xl border bg-fd-card text-sm shadow-sm">
+      <button
+        type="button"
+        aria-label={copied ? "Copied" : "Copy final code"}
+        onClick={copy}
+        className="absolute top-2 right-2 z-10 inline-flex size-7 items-center justify-center rounded-md text-fd-muted-foreground backdrop-blur hover:bg-fd-accent hover:text-fd-accent-foreground"
+      >
+        {copied ? <Check className="size-4" /> : <Clipboard className="size-4" />}
+      </button>
+      <pre className="overflow-auto py-3.5 font-mono text-[0.8125rem]">
+        <code>
+          {lines.map((line, index) => {
+            const marker = line[0];
+            const changed = marker === "+" || marker === "-";
+            const content = changed || marker === "=" ? line.slice(1) : line;
+
+            return (
+              <span
+                key={index}
+                className={`block min-w-max px-4 ${
+                  marker === "+"
+                    ? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+                    : marker === "-"
+                      ? "bg-red-500/10 text-red-700 dark:text-red-300"
+                      : ""
+                }`}
+              >
+                <span className="mr-3 inline-block w-2 select-none opacity-70">
+                  {changed ? marker : " "}
+                </span>
+                {content || " "}
+              </span>
+            );
+          })}
+        </code>
+      </pre>
+    </figure>
+  );
+}
diff --git a/docs/content/docs/openui-lang/quickstart.mdx b/docs/content/docs/openui-lang/quickstart.mdx
index 7934e182b..e1b0ec369 100644
--- a/docs/content/docs/openui-lang/quickstart.mdx
+++ b/docs/content/docs/openui-lang/quickstart.mdx
@@ -1,99 +1,334 @@
 ---
 title: Quick Start
-description: Bootstrap a GenUI chat app in under a minute.
+description: Build a Recipe Remix agent with OpenUI Cloud in about 10 minutes.
 ---
 
-<video
-  src="/videos/openui-lang/chat-quickstart.mp4"
-  autoPlay
-  loop
-  muted
-  playsInline
-  className="w-full rounded-lg"
-/>
+import { CopyableDiff } from "@/components/copyable-diff";
 
-## Create the app
+Build a Recipe Remix agent that reads your pantry, searches for real recipes,
+finds an image, and renders the results as interactive Generative UI.
 
-```bash tab="pnpm" tab-group="pkg"
-pnpx @openuidev/cli@latest create --name genui-chat-app
-```
+![Recipe Remix calling the pantry tool and rendering three interactive recipe cards](/images/openui-lang/recipe-remix-quickstart.gif)
+
+The Cloud starter already includes streaming chat, conversation history, web
+search, image search, reports, presentations, and an example function tool.
+You will keep those features and add one tool and one component.
+
+You need Node.js 20 or later and a Thesys account.
 
-```bash tab="bun" tab-group="pkg"
-bunx @openuidev/cli@latest create --name genui-chat-app
+## 1. Create the app
+
+```bash
+npx @openuidev/cli@latest create \
+  --name recipe-remix \
+  --template openui-cloud
 ```
 
-```bash tab="yarn" tab-group="pkg"
-yarn dlx @openuidev/cli@latest create --name genui-chat-app
+Follow the prompts. The CLI signs you in, creates the project, installs its
+dependencies, starts the agent, and opens it in your browser. Open the generated
+`recipe-remix` folder in your editor for the next steps.
+
+## 2. Replace the starter prompts
+
+Open `src/lib/starters.tsx` and replace the existing `STARTERS` array with:
+
+```tsx
+export const STARTERS = [
+  {
+    displayText: "Cook from my pantry",
+    prompt: "What can I make for dinner with what I already have?",
+    icon: <></>,
+  },
+  {
+    displayText: "Find a high-protein dinner",
+    prompt: "What are three quick, high-protein vegetarian dinners I could make?",
+    icon: <></>,
+  },
+  {
+    displayText: "Remix a comfort food",
+    prompt: "Can you give me three lighter or quicker spins on mac and cheese?",
+    icon: <></>,
+  },
+];
 ```
 
-```bash tab="npm" tab-group="pkg"
-npx @openuidev/cli@latest create --name genui-chat-app
+Update these lines in `src/components/cloud-chat.tsx`:
+
+<CopyableDiff
+  code={`=<AgentInterface.Welcome
+-  title="Good to see you"
+-  description="What's on your mind today?"
+-  promptTemplates={PROMPT_TEMPLATES}
++  title="Recipe Remix"
++  description="Turn what you have into something delicious."
+=  glowAnimation
+=/>`}
+/>
+
+This removes the general-purpose prompt templates while keeping the three
+recipe starters.
+
+## 3. Add a pantry tool
+
+Create `src/lib/tools/get-recipe-profile.ts`:
+
+```ts
+export const getRecipeProfileTool = {
+  type: "function" as const,
+  name: "get_recipe_profile",
+  description:
+    "Read the cook's pantry and recipe preferences. Call this before recommending pantry recipes.",
+  parameters: {
+    type: "object",
+    properties: {},
+    required: [],
+    additionalProperties: false,
+  },
+  strict: true,
+};
+
+export async function executeGetRecipeProfile(): Promise<string> {
+  return JSON.stringify({
+    pantry: ["black beans", "corn", "canned tomatoes", "rice", "cheddar"],
+    diet: "vegetarian",
+    cuisine: "American",
+    maxMinutes: 30,
+    servings: 2,
+  });
+}
 ```
 
-Then move into the project:
+Change the values in `executeGetRecipeProfile()` to match your kitchen.
 
-```bash
-cd genui-chat-app
+Open `src/app/api/chat/route.ts` and update the imports:
+
+<CopyableDiff
+  code={`=import { runFunctionToolLoop } from "@/lib/tool-loop";
++import { executeGetRecipeProfile, getRecipeProfileTool } from "@/lib/tools/get-recipe-profile";
+=import { executeGetWeather, getWeatherTool } from "@/lib/tools/get-weather";`}
+/>
+
+Register the executor beside the existing weather tool:
+
+<CopyableDiff
+  code={`=const functionTools = {
+=  [getWeatherTool.name]: executeGetWeather,
++  [getRecipeProfileTool.name]: executeGetRecipeProfile,
+=};`}
+/>
+
+Then add its declaration to the existing `tools` array:
+
+<CopyableDiff
+  code={`=tools: [
+=  artifactTool({ artifacts: ["slides", "report"] }) as unknown as Tool,
+=  { type: "web_search" },
+=  { type: "image_search" } as unknown as Tool,
+=  getWeatherTool,
++  getRecipeProfileTool,
+=],`}
+/>
+
+The generated route already runs the tool loop. Adding the declaration and
+executor is enough.
+
+## 4. Add a recipe component
+
+Create `src/lib/recipe-library.tsx`:
+
+<div className="[&_.fd-scroll-container]:overflow-x-hidden [&_.fd-scroll-container]:overflow-y-auto [&_pre]:!w-full [&_pre]:!min-w-0 [&_pre]:whitespace-pre-wrap [&_code]:break-words">
+
+```tsx
+import { createLibrary, defineComponent, useTriggerAction } from "@openuidev/react-lang";
+import { chatLibrary } from "@openuidev/thesys";
+import { z } from "zod/v4";
+
+const cardStyle = {
+  display: "grid",
+  gridTemplateRows: "120px auto 66px 1fr auto",
+  gap: 8,
+  height: "100%",
+  padding: 12,
+  border: "1px solid #e5e7eb",
+  borderRadius: 12,
+} as const;
+const actionStyle = {
+  padding: "5px 8px",
+  borderRadius: 8,
+  fontSize: 13,
+  fontWeight: 600,
+  textDecoration: "none",
+  cursor: "pointer",
+} as const;
+
+const RecipeRemix = defineComponent({
+  name: "RecipeRemix",
+  description: "Three sourced recipe suggestions.",
+  props: z.object({
+    recipes: z.array(
+      z.object({
+        title: z.string(),
+        time: z.string(),
+        servings: z.number().int().positive(),
+        ingredients: z.array(z.string()),
+        sourceUrl: z.string(),
+        imageUrl: z.string().optional(),
+      }),
+    ),
+  }),
+  component: function RecipeRemix({ props }) {
+    const triggerAction = useTriggerAction();
+
+    return (
+      <section
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+          gap: 12,
+          width: "100%",
+        }}
+      >
+        <h2 style={{ gridColumn: "1 / -1", margin: 0, fontSize: 24, fontWeight: 600 }}>
+          Recipe Remix
+        </h2>
+        {props.recipes.map((recipe) => (
+          <article key={recipe.title} style={cardStyle}>
+            <div style={{ overflow: "hidden", borderRadius: 8, background: "#f3f4f6" }}>
+              {recipe.imageUrl?.startsWith("https://") && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={recipe.imageUrl}
+                  alt=""
+                  onError={(event) => (event.currentTarget.hidden = true)}
+                  style={{ display: "block", width: "100%", height: "100%", objectFit: "cover" }}
+                />
+              )}
+            </div>
+            <div style={{ display: "flex", gap: 6 }}>
+              <span
+                style={{
+                  padding: "2px 8px",
+                  borderRadius: 999,
+                  background: "#eff6ff",
+                  color: "#1d4ed8",
+                }}
+              >
+                {recipe.time}
+              </span>
+              <span style={{ padding: "2px 8px", borderRadius: 999, background: "#f3f4f6" }}>
+                Serves {recipe.servings}
+              </span>
+            </div>
+            <h3 style={{ margin: 0 }}>{recipe.title}</h3>
+            <div>
+              <strong>Ingredients</strong>
+              <ul style={{ margin: 0, paddingLeft: 20, fontSize: 14 }}>
+                {recipe.ingredients.map((ingredient) => (
+                  <li key={ingredient}>{ingredient}</li>
+                ))}
+              </ul>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: "auto" }}>
+              <a
+                href={recipe.sourceUrl}
+                target="_blank"
+                rel="noreferrer"
+                style={{ ...actionStyle, border: "1px solid #d1d5db", color: "#111827" }}
+              >
+                Source ↗
+              </a>
+              <button
+                style={{ ...actionStyle, border: 0, background: "#111827", color: "white" }}
+                onClick={() => triggerAction(`Make ${recipe.title} faster and simpler`)}
+              >
+                Remix this
+              </button>
+            </div>
+          </article>
+        ))}
+      </section>
+    );
+  },
+});
+
+export const recipeLibrary = createLibrary({
+  root: chatLibrary.root ?? "Card",
+  componentGroups: chatLibrary.componentGroups,
+  components: [...Object.values(chatLibrary.components), RecipeRemix],
+});
 ```
 
-## Add your API key
+</div>
 
-The generated app uses OpenAI by default, but works with any OpenAI-compatible provider (e.g., OpenRouter, Azure OpenAI, Anthropic via proxy).
+Generate the serializable component specification used by the API route:
 
 ```bash
-echo "OPENAI_API_KEY=sk-your-key-here" > .env
+npx @openuidev/cli@latest generate \
+  --spec src/lib/recipe-library.tsx \
+  --out src/lib/recipe-library-spec.json
 ```
 
-## Start the dev server
+Now update the imports in `src/app/api/chat/route.ts`:
 
-```bash tab="pnpm" tab-group="pkg"
-pnpm dev
-```
+<CopyableDiff
+  code={`=import { requiredEnv } from "@/lib/env";
+=import { resolveRequestedModel } from "@/lib/models";
++import recipeLibrarySpec from "@/lib/recipe-library-spec.json";
+=import { runFunctionToolLoop } from "@/lib/tool-loop";`}
+/>
 
-```bash tab="bun" tab-group="pkg"
-bun dev
-```
+Below the imports, add:
 
-```bash tab="yarn" tab-group="pkg"
-yarn dev
+```ts
+const recipeInstructions = `
+You are a practical recipe remix assistant.
+Use web search before recommending recipes and include real source URLs.
+Use image search to include a relevant recipe image when available.
+For each recipe, set imageUrl to an HTTPS URL returned by image search when available.
+Call get_recipe_profile when the user asks what they can cook from their pantry.
+Use the profile's servings value for every recipe.
+Return exactly three concise recipes and clearly label substitutions.
+Render the final recipe recommendations using exactly one RecipeRemix component.
+Do not return recipe recommendations as a prose-only response.
+Never claim that a recipe is allergen-safe.
+`;
 ```
 
-```bash tab="npm" tab-group="pkg"
-npm run dev
-```
+Update the `instructions` field inside `createParams`:
 
-## What's included
+<CopyableDiff
+  code={`-instructions: generateSystemPrompt(),
++instructions: generateSystemPrompt({
++  library: recipeLibrarySpec,
++  instructions: recipeInstructions,
++}),`}
+/>
 
-The CLI generates a Next.js app with everything wired up:
+Finally, update `src/components/cloud-chat.tsx`:
 
-```
-src/
-  app/
-    page.tsx          # AgentInterface chat (thread history) with the built-in component library
-    api/chat/
-      route.ts        # Backend route with OpenAI streaming + example tools
-  library.ts          # Re-exports openuiChatLibrary and openuiChatPromptOptions
-  generated/
-    system-prompt.txt        # Generated for static or legacy prompt integrations
-    system-prompt.spec.json  # Generated library spec
-```
+<CopyableDiff code={`+import { recipeLibrary } from "@/lib/recipe-library";`} />
 
-- **`page.tsx`**: Renders the `AgentInterface` chat (an artifact chat surface with thread history) with `openuiChatLibrary` for Generative UI rendering. It provides an `llm` whose `send` posts messages to the route and whose `streamProtocol` is `openAIAdapter()`. Storage is optional — omit it and threads are kept in memory (wiped on reload).
-- **`route.ts`**: A backend API route that uses `generateSystemPrompt` with the generated spec, then streams the response from the LLM.
-- **`library.ts`**: Your component library entrypoint. The `openui generate` CLI reads this file to produce both the prompt and the library spec.
+Then update the `componentLibrary` prop:
 
-The `dev` and `build` scripts automatically regenerate both artifacts before starting. Use the emitted spec in your route:
+<CopyableDiff
+  code={`-componentLibrary={chatLibrary}
++componentLibrary={recipeLibrary}`}
+/>
 
-```json
-"generate:prompt": "openui generate src/library.ts --out src/generated/system-prompt.txt",
-"dev": "pnpm generate:prompt && next dev"
-```
+<Callout type="info">
+  `recipeLibrary` extends the built-in `chatLibrary`, so the existing inline components remain
+  available alongside `RecipeRemix`. Cloud's search tools and artifact renderers also remain
+  available. See [Extend a built-in library](/docs/openui-lang/overview#extend-a-built-in-library).
+</Callout>
 
-```ts
-import { generateSystemPrompt, type LibrarySpec } from "@openuidev/lang-core";
-import librarySpec from "../../../generated/system-prompt.spec.json";
+## 5. Try it
 
-const systemPrompt = generateSystemPrompt({
-  library: librarySpec as LibrarySpec,
-});
-```
+The agent is already running. Return to the browser and click **Cook from my
+pantry**. It should call your pantry tool, search for recipes, and render three
+recipe cards. Click **Remix this** to start a follow-up turn.
+
+## Next steps
+
+- [Add more tools](/docs/agent/core-concepts/tools)
+- [Define more components](/docs/openui-lang/defining-components)
+- [Add component interactions](/docs/openui-lang/interactivity)
diff --git a/docs/public/images/openui-lang/recipe-remix-quickstart.gif b/docs/public/images/openui-lang/recipe-remix-quickstart.gif
new file mode 100644
index 000000000..cc8dea351
Binary files /dev/null and b/docs/public/images/openui-lang/recipe-remix-quickstart.gif differ