Next.js with AI Elements and AI SDK v5

A full-stack boilerplate using Next.js App Router for the frontend and Next.js API Routes for the backend, integrating AI SDK with OpenRouter (powered by OpenAI). This setup demonstrates how to build AI-powered experiences with a strong developer experience — including file creation via AI tools and a clean shadcn/ui + AI Elements interface.

Features

Next.js App Router for a modern frontend architecture.
Next.js API Routes handling AI requests and file generation.
AI SDK integrated with OpenRouter (OpenAI provider) for text and file generation.
AI Elements (from AI SDK) styled with shadcn/ui for a seamless developer UX.
File Creation Tool that generates downloadable files directly from AI output.
Modular architecture for scalability and clean separation of concerns.
TypeScript support for type-safe and maintainable development.

Technical Stack

Frontend: Next.js (App Router) + shadcn/ui + AI Elements
Backend: Next.js API Routes (AI interaction + file creation)
AI Provider: OpenRouter (OpenAI models)
AI SDK: Vercel AI SDK v5
Language: TypeScript

How It Works

This boilerplate demonstrates:

Prompt Handling: The user interacts with AI Elements components to provide input.
AI SDK Integration: Requests are sent to OpenRouter, leveraging OpenAI models.
File Creation Tool: The AI output is converted into a downloadable file (e.g., Markdown, JSON, or text) using the backend API.
UI Feedback: The interface provides real-time streaming and confirmation states.

Use Case

Perfect for developers building AI-driven content generation apps, such as:

AI documentation assistants
Report or article generators
Template-based file creation tools

This boilerplate shows how to combine Next.js, AI SDK, and OpenRouter to create intelligent tools that not only generate content — but also turn it into tangible files for users to use. 🚀

Boilerplate