Setup

Requirements, wiring steps, and what this pattern adds to your project.

Requirements

Complexity
Advanced
Setup time
~10 minutes
Node
24+
Memory
512MB

Environment variables

Capabilities

AI SDK APIs

generateObjectstreamTextgateway

Providers

google

External services

firecrawlupstash

Getting started

Install and export live in the preview toolbar — this section covers what lands in your project and how to wire it up.

  1. 1

    Install from the preview toolbar

    Shadcn Icon

    Use the install command above — Pro patterns include a short-lived token.

  2. 2

    Add environment variables to .env.local

    FIRECRAWL_API_KEY, AI_GATEWAY_API_KEY, UPSTASH_REDIS_REST_URL, UPSTASH_REDIS_REST_TOKEN

  3. 3

    Point client fetches at your API routes

    Replace preview `/view/.../api/...` paths with `/api/...` in the installed files.

  4. 4

    Customize the agent and tool files

    Use Copy for AI in the toolbar, then adapt prompts, tools, and stop conditions.

  5. 5

    Export for your stack from the toolbar

    Copy the Next.js bundle or the verified Hono portable server export.

  6. 6

    Run your dev server and test the live preview

Files added

  • app/page.tsx
  • app/layout.tsx
  • app/api/firecrawl-landing-page-teardown-pdf-generate/route.ts
  • app/api/pdf/route.ts
  • lib/catalog.ts
  • lib/examples.ts
  • lib/rate-limit.ts
  • lib/request-utils.ts
  • +2 more files

Dependencies

Shadcn IconRegistry components

buttonemptyresizablesheettextarea

Files to customize

  • firecrawl-landing-page-teardown-pdf-generate/route.ts

    Core pipeline: input validation, Firecrawl markdown scraping, structured CRO extraction via generateObject, and deterministic JSON Render PDF streaming.

  • lib/teardown-types.ts

    Strict Zod schema for all fixed CRO report sections, used to enforce deterministic analysis output before PDF generation.