Quick Start - Capx AI

Create Your First App

Step 1: Generate Project

Run the Capx Compose scaffolding tool:

npx capx-compose@latest my-ai-app --plugins=vercel-ai

This creates a Next.js project with:

Vercel AI SDK integration
OpenAI GPT streaming chat
TypeScript configuration
Tailwind CSS styling
Working example pages

Step 2: Navigate to Project

cd my-ai-app

Step 3: Configure Environment

Create your environment file:

cp .env.example .env.local

Edit .env.local and add your OpenAI API key:

OPENAI_API_KEY=sk-...

Get your API key from OpenAI Platform.

Step 4: Install Dependencies

If dependencies weren’t auto-installed:

npm install

Step 5: Start Development Server

npm run dev

Open http://localhost:3000 to see your app!

What You Get

Your generated project includes:

Working AI Chat Interface

Navigate to /vercel-ai to see a complete chat interface with:

Streaming responses from OpenAI
Message history
Loading states
Error handling

Project Structure

my-ai-app/
├── src/
│   ├── pages/
│   │   ├── index.tsx         # Home page
│   │   ├── vercel-ai.tsx     # AI chat interface
│   │   └── api/
│   │       └── chat.ts       # AI chat endpoint
│   ├── components/           # Reusable components
│   └── styles/              # CSS styles
├── public/                  # Static assets
├── .env.example            # Environment template
└── package.json           # Dependencies

Pre-configured Features

Next.js 14+ with App Router support
TypeScript for type safety
Tailwind CSS for styling
Vercel AI SDK for streaming
OpenAI Integration ready to use

​Create Your First App

​Step 1: Generate Project

​Step 2: Navigate to Project

​Step 3: Configure Environment

​Step 4: Install Dependencies

​Step 5: Start Development Server

​What You Get

​Working AI Chat Interface

​Project Structure

​Pre-configured Features