Scaffold an AI web app, then use the version-specific SDK and UI references.
Workflow
Infer the app type, required tools, persistence and visual direction from the
request. Ask only for decisions that materially affect the result.
In an existing app, inspect its lockfile, SDK major, shadcn base and aliases.
Keep those choices unless migration is requested. Use ai-sdk to resolve
version-specific APIs before installing packages.
For a new Next.js app, use Bun and the shadcn CLI:
bunx --bun shadcn@latest init --name my-ai-app --template next
Select the SDK major before installing compatible provider and React
packages. The bundled templates target AI SDK 6: ai@6,
@ai-sdk/react@3, and provider packages compatible with v6 (for example
@ai-sdk/anthropic@3). For v7, use ai-sdk-7 and its migration guidance;
do not copy v6 response methods into v7 code.
Add only the AI Elements components the app needs. Inspect their installed
source for props; registry components can evolve independently of the SDK.
Configure the selected provider's server-side environment variables and a
model ID verified from the project's config or provider catalog.
Implement the route and UI with matching stream protocols. Validate incoming
messages, authenticate protected operations, and return safe client errors.
Run typecheck/build and verify streaming, a second conversation turn, tool
execution/approval, failure handling and mobile layout in a browser.