Setup

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

Requirements

Complexity
Beginner

Environment variables

Capabilities

AI SDK APIs

streamTextconvertToCoreMessagestooluseChat

Providers

openai

External services

markdown.new

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

    OPENAI_API_KEY

  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/tool-scrape-markdown-new/route.ts
  • components/markdown-new-scrape-demo.tsx
  • /tools/markdown-new.ts
  • /tools/markdown-new-ui.tsx

Dependencies

Shadcn IconRegistry components

alertemptyinput-groupseparator

Files to customize

  • tool-scrape-markdown-new/route.ts

    API route implementing a web scraping assistant using streamText with markdown.new tools. Contains the AI pipeline with system prompt, tool binding, and step count limits.

  • tools/markdown-new.ts

    Core scraping engine using Cloudflare markdown.new. Implements scrapeUrl (fetches from markdown.new, parses title/url/markdown). Strips protocol from URLs before sending.