TemplatesReal-world Examples

Marketing Plan & Implement Agent

Loading pattern preview

Problems solved

Technical challenges this implementation handles out of the box.
  • Extract brand context from a URL or manual intake
  • Plan marketing work with human-approved todos
  • Execute the plan with research and scraping tools
  • Pass brandContext at runtime via callOptions and prepareCall
  • Share runtime context with tools through experimental_context

Use cases

Products and workflows this pattern is designed to support.
  • Marketing campaign plan-and-execute agents
  • Competitor research implementation loops
  • Content strategy agents with approval gates
  • SEO research that moves from plan to action

Setup

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

Getting started

Pick how you want to pull this pattern in. Then wire env vars and routes the same way.

  1. 1

    Download → Next.js app

    Use Download → Next.js app in the preview toolbar. You get a zip scaffold (Pro downloads rewrite preview `/view/.../api/*` paths to `/api/*` automatically).

  2. 2

    Extract the zip and install dependencies

    Unzip the archive, then run `pnpm install` (or npm / yarn) in the project folder.

  3. 3

    Fill .env.local

    The download includes .env.local placeholders when needed. Add real values for: OPENAI_API_KEY, FIRECRAWL_API_KEY.

  4. 4

    Customize the agent and tool files

    Adapt prompts, tools, and stop conditions in the generated project for your product.

  5. 5

    Run the app and open the pattern route

    Run `pnpm dev`, open the setup/checklist page if present, then navigate to the generated pattern route and verify responses.

Environment variables

Capabilities

AI SDK APIs

useChatgatewayToolLoopAgenttoolgenerateObjecthasToolCallstepCountIscreateAgentUIStreamResponseInferAgentUIMessagecallOptionsSchemaprepareCallexperimental_context

Providers

OpenAI

External services

Firecrawl

Files added

24 files
  • app/page.tsx
  • app/layout.tsx
  • app/api/agent-usecase-marketing-plan/route.ts
  • app/api/agent-usecase-marketing-implement/route.ts
  • lib/marketing-plan-types.ts
  • lib/marketing-plan-actions.ts
  • lib/cheerio-scraper.ts
  • lib/utils/format-brand-context.ts
  • lib/ai/plan/plan-agent.ts
  • lib/ai/plan/tools/index.ts
  • lib/ai/plan/tools/ask-multiple-choice.ts
  • lib/ai/plan/tools/ask-text-input.ts
  • lib/ai/plan/tools/generate-plan.ts
  • lib/ai/plan/tools/refine-plan.ts
  • lib/ai/implement/implement-agent.ts
  • lib/ai/implement/tools/index.ts
  • lib/ai/implement/tools/read-plan.ts
  • lib/ai/implement/tools/update-plan.ts
  • lib/ai/implement/tools/read-todo.ts
  • lib/ai/implement/tools/update-todo.ts
  • lib/ai/implement/tools/finalize.ts
  • lib/ai/implement/tools/firecrawl.ts
  • lib/ai/implement/tools/url-scraper.ts
  • README.md

Dependencies

20 total

npm packages

11
AISDKcheeriofirecrawl-aisdklucide-reactNext.jsReactsonnerstreamdownuse-stick-to-bottomZod@mendable/firecrawl-js

Shadcn IconRegistry components

9
buttoncollapsibleemptyinputtextareatooltiptabslabelresizable

Critical files

  • agent-usecase-marketing-plan/route.ts

    Plan phase API route using createAgentUIStreamResponse with callOptions to pass brandContext at runtime.

  • agent-usecase-marketing-implement/route.ts

    Implement phase API route passing both brandContext and plan via callOptions.

  • plan/plan-agent.ts

    Plan builder ToolLoopAgent with callOptionsSchema + prepareCall for runtime brand context injection into instructions and experimental_context.

  • tools/ask-multiple-choice.ts

    Brand-context-aware multiple choice tool. Reads brandContext from experimental_context to tailor AI-generated questions.

  • tools/generate-plan.ts

    Plan generation tool with brand context awareness using generateObject with planSchema.

  • tools/refine-plan.ts

    Plan refinement tool with brand-context-aware iteration.

  • tools/ask-text-input.ts

    Brand-context-aware text input tool for gathering open-ended requirements.

  • implement/implement-agent.ts

    Autonomous implementation agent with prepareStep for phased workflow (triage, process todos, research, synthesis, finalize). Most advanced agent pattern: callOptionsSchema, prepareCall, prepareStep, stopWhen.

  • tools/finalize.ts

    Implementation finalization tool that reads plan from experimental_context and signals completion.

  • tools/update-plan.ts

    Tool for updating plan sections from experimental_context.

  • tools/update-todo.ts

    Tool for updating todo status with validation against plan.

  • tools/read-plan.ts

    Tool for reading current plan state from experimental_context.

  • tools/read-todo.ts

    Tool for reading/filtering todos by ID or status from the plan context.

  • tools/firecrawl.ts

    Firecrawl web search tool for real-time web research during plan implementation.

  • lib/marketing-plan-types.ts

    Complete type system including Zod schemas (BrandContext, Plan, Todo) and all type definitions for both plan and implement phases.

  • utils/format-brand-context.ts

    Utility that formats BrandContext into markdown for injection into agent instructions.

Requirements

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