create-agentic-app 1.1.59 → 1.1.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/template/.agents/skills/ai-sdk/SKILL.md +78 -0
- package/template/.agents/skills/ai-sdk/references/ai-gateway.md +66 -0
- package/template/.agents/skills/ai-sdk/references/common-errors.md +443 -0
- package/template/.agents/skills/ai-sdk/references/devtools.md +52 -0
- package/template/.agents/skills/ai-sdk/references/type-safe-agents.md +204 -0
- package/template/.claude/skills/ai-sdk/SKILL.md +78 -0
- package/template/.claude/skills/ai-sdk/references/ai-gateway.md +66 -0
- package/template/.claude/skills/ai-sdk/references/common-errors.md +443 -0
- package/template/.claude/skills/ai-sdk/references/devtools.md +52 -0
- package/template/.claude/skills/ai-sdk/references/type-safe-agents.md +204 -0
- package/template/AGENTS.md +1 -0
- package/template/README.md +258 -310
- package/template/package.json +9 -8
- package/template/skills-lock.json +6 -0
package/template/README.md
CHANGED
|
@@ -1,440 +1,388 @@
|
|
|
1
|
-
# Agentic Coding
|
|
1
|
+
# Agentic Coding Starter Kit
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A production-oriented starter kit for building AI-powered web apps with an agentic development workflow. It gives you a working Next.js app, authentication, PostgreSQL, Drizzle ORM, AI SDK integration, shadcn/ui components, and project instructions that help coding agents plan, split, implement, review, and verify changes.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
The goal is simple: install the starter, describe the product you want to build, and let your coding agent help turn the boilerplate into your actual POC, MVP, or internal tool.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- **🗃️ Database**: Drizzle ORM with PostgreSQL
|
|
9
|
-
- **🤖 AI Integration**: Vercel AI SDK with OpenRouter (access to 100+ AI models)
|
|
10
|
-
- **📁 File Storage**: Automatic local/Vercel Blob storage with seamless switching
|
|
11
|
-
- **🎨 UI Components**: shadcn/ui with Tailwind CSS
|
|
12
|
-
- **⚡ Modern Stack**: Next.js 16, React 19, TypeScript
|
|
13
|
-
- **📱 Responsive**: Mobile-first design approach
|
|
7
|
+
## What You Get
|
|
14
8
|
|
|
15
|
-
|
|
9
|
+
- **Next.js 16 and React 19** with the App Router
|
|
10
|
+
- **TypeScript** and a strict project setup
|
|
11
|
+
- **Better Auth** with email/password enabled by default
|
|
12
|
+
- **PostgreSQL and Drizzle ORM** for schema and migrations
|
|
13
|
+
- **AI SDK and OpenRouter** for chat and AI features
|
|
14
|
+
- **shadcn/ui, Tailwind CSS, and Lucide icons** for the UI foundation
|
|
15
|
+
- **Local or Vercel Blob file storage** through one storage abstraction
|
|
16
|
+
- **Agent instructions** through `AGENTS.md` and `CLAUDE.md`
|
|
17
|
+
- **Agent skills** for specs, implementation, reviews, security scans, UI work, and shipping
|
|
16
18
|
|
|
17
|
-
|
|
19
|
+
## Quick Start
|
|
18
20
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
<a href="https://youtu.be/JQ86N3WOAh4" target="_blank" rel="noopener noreferrer">🔗 Watch on YouTube</a>
|
|
22
|
-
|
|
23
|
-
## ☕ Support This Project
|
|
24
|
-
|
|
25
|
-
If this boilerplate helped you build something awesome, consider buying me a coffee!
|
|
26
|
-
|
|
27
|
-
[](https://www.buymeacoffee.com/leonvanzyl)
|
|
28
|
-
|
|
29
|
-
## 📋 Prerequisites
|
|
30
|
-
|
|
31
|
-
Before you begin, ensure you have the following installed on your machine:
|
|
32
|
-
|
|
33
|
-
- **Node.js**: Version 18.0 or higher (<a href="https://nodejs.org/" target="_blank">Download here</a>)
|
|
34
|
-
- **Git**: For cloning the repository (<a href="https://git-scm.com/" target="_blank">Download here</a>)
|
|
35
|
-
- **PostgreSQL**: Either locally installed or access to a hosted service like Vercel Postgres
|
|
36
|
-
|
|
37
|
-
## 🛠️ Quick Setup
|
|
38
|
-
|
|
39
|
-
### Automated Setup (Recommended)
|
|
40
|
-
|
|
41
|
-
Get started with a single command:
|
|
21
|
+
Create a new app with the CLI:
|
|
42
22
|
|
|
43
23
|
```bash
|
|
44
24
|
npx create-agentic-app@latest my-app
|
|
45
25
|
cd my-app
|
|
46
26
|
```
|
|
47
27
|
|
|
48
|
-
Or create in the current directory:
|
|
28
|
+
Or create the app in the current directory:
|
|
49
29
|
|
|
50
30
|
```bash
|
|
51
31
|
npx create-agentic-app@latest .
|
|
52
32
|
```
|
|
53
33
|
|
|
54
|
-
|
|
55
|
-
- Copy all boilerplate files
|
|
56
|
-
- Install dependencies with your preferred package manager (pnpm/npm/yarn)
|
|
57
|
-
- Set up your environment file
|
|
58
|
-
|
|
59
|
-
**Next steps after running the command:**
|
|
60
|
-
|
|
61
|
-
1. Update `.env` with your API keys and database credentials
|
|
62
|
-
2. Start the database: `docker compose up -d`
|
|
63
|
-
3. Run migrations: `npm run db:migrate`
|
|
64
|
-
4. Start dev server: `npm run dev`
|
|
65
|
-
|
|
66
|
-
### Manual Setup (Alternative)
|
|
67
|
-
|
|
68
|
-
If you prefer to set up manually:
|
|
69
|
-
|
|
70
|
-
**1. Clone or Download the Repository**
|
|
71
|
-
|
|
72
|
-
**Option A: Clone with Git**
|
|
34
|
+
Then configure and run the app:
|
|
73
35
|
|
|
74
36
|
```bash
|
|
75
|
-
|
|
76
|
-
|
|
37
|
+
cp env.example .env
|
|
38
|
+
docker compose up -d
|
|
39
|
+
pnpm db:migrate
|
|
40
|
+
pnpm dev
|
|
77
41
|
```
|
|
78
42
|
|
|
79
|
-
|
|
80
|
-
Download the repository as a ZIP file and extract it to your desired location.
|
|
43
|
+
Open [http://localhost:3000](http://localhost:3000).
|
|
81
44
|
|
|
82
|
-
|
|
45
|
+
The CLI copies the starter files, installs dependencies with your selected package manager, and prepares the environment file. If you use `npm`, replace the `pnpm` commands above with `npm run`.
|
|
83
46
|
|
|
84
|
-
|
|
85
|
-
npm install
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
**3. Environment Setup**
|
|
47
|
+
## Prerequisites
|
|
89
48
|
|
|
90
|
-
|
|
49
|
+
- Node.js 18 or newer
|
|
50
|
+
- Git
|
|
51
|
+
- PostgreSQL, either through the included Docker Compose file or a hosted provider
|
|
52
|
+
- A package manager: `pnpm`, `npm`, or `yarn`
|
|
53
|
+
- Optional: an OpenRouter API key for AI chat features
|
|
54
|
+
- Optional: a Vercel account for deployment, hosted Postgres, and Blob storage
|
|
91
55
|
|
|
92
|
-
|
|
93
|
-
cp env.example .env
|
|
94
|
-
```
|
|
56
|
+
## Environment Variables
|
|
95
57
|
|
|
96
|
-
|
|
58
|
+
Start from `env.example` and update values for your environment:
|
|
97
59
|
|
|
98
60
|
```env
|
|
99
61
|
# Database
|
|
100
|
-
POSTGRES_URL=
|
|
62
|
+
POSTGRES_URL=postgresql://dev_user:dev_password@localhost:5432/postgres_dev
|
|
101
63
|
|
|
102
64
|
# Authentication - Better Auth
|
|
103
|
-
BETTER_AUTH_SECRET=
|
|
65
|
+
BETTER_AUTH_SECRET=your-random-secret
|
|
104
66
|
|
|
105
|
-
#
|
|
106
|
-
|
|
107
|
-
GOOGLE_CLIENT_SECRET="your-google-client-secret"
|
|
108
|
-
|
|
109
|
-
# AI Integration via OpenRouter (Optional - for chat functionality)
|
|
110
|
-
# Get your API key from: https://openrouter.ai/settings/keys
|
|
111
|
-
# View available models at: https://openrouter.ai/models
|
|
112
|
-
OPENROUTER_API_KEY="sk-or-v1-your-openrouter-api-key-here"
|
|
67
|
+
# AI Integration via OpenRouter
|
|
68
|
+
OPENROUTER_API_KEY=
|
|
113
69
|
OPENROUTER_MODEL="openai/gpt-5-mini"
|
|
114
70
|
|
|
115
|
-
#
|
|
71
|
+
# Optional - for vector search only
|
|
72
|
+
OPENAI_EMBEDDING_MODEL="text-embedding-3-large"
|
|
73
|
+
|
|
74
|
+
# App URL
|
|
116
75
|
NEXT_PUBLIC_APP_URL="http://localhost:3000"
|
|
117
76
|
|
|
118
|
-
# File
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
77
|
+
# File storage
|
|
78
|
+
BLOB_READ_WRITE_TOKEN=
|
|
79
|
+
|
|
80
|
+
# Polar payment processing
|
|
81
|
+
POLAR_WEBHOOK_SECRET=polar_
|
|
82
|
+
POLAR_ACCESS_TOKEN=polar_
|
|
122
83
|
```
|
|
123
84
|
|
|
124
|
-
|
|
85
|
+
For local development, the default database URL works with the included `docker-compose.yml`. For production, use the database URL from your hosting provider.
|
|
125
86
|
|
|
126
|
-
Generate
|
|
87
|
+
Generate a strong `BETTER_AUTH_SECRET` before deploying. The starter ships with a development value only so you can get moving quickly.
|
|
127
88
|
|
|
128
|
-
|
|
129
|
-
npm run db:generate
|
|
130
|
-
npm run db:migrate
|
|
131
|
-
```
|
|
89
|
+
## Default Auth
|
|
132
90
|
|
|
133
|
-
**
|
|
91
|
+
The starter now defaults to **email and password authentication** through Better Auth. This keeps the first setup small and helps you start building POCs and MVPs without creating OAuth credentials up front.
|
|
134
92
|
|
|
135
|
-
|
|
136
|
-
npm run dev
|
|
137
|
-
```
|
|
93
|
+
The current auth setup includes:
|
|
138
94
|
|
|
139
|
-
|
|
95
|
+
- user registration
|
|
96
|
+
- email/password login
|
|
97
|
+
- protected routes
|
|
98
|
+
- password reset flow
|
|
99
|
+
- email verification flow
|
|
140
100
|
|
|
141
|
-
|
|
101
|
+
In development, verification and password reset links are logged to the terminal instead of being sent through an email provider. When you are ready for production, ask your coding agent to connect an email service and update the Better Auth email callbacks.
|
|
142
102
|
|
|
143
|
-
###
|
|
103
|
+
### Adding Google OAuth
|
|
144
104
|
|
|
145
|
-
|
|
146
|
-
2. Navigate to the **Storage** tab
|
|
147
|
-
3. Click **Create** → **Postgres**
|
|
148
|
-
4. Choose your database name and region
|
|
149
|
-
5. Copy the `POSTGRES_URL` from the `.env.local` tab
|
|
150
|
-
6. Add it to your `.env` file
|
|
105
|
+
Google OAuth is no longer the default, but adding it back is straightforward. Ask your coding agent:
|
|
151
106
|
|
|
152
|
-
|
|
107
|
+
```text
|
|
108
|
+
Add Google OAuth to this Better Auth setup. Keep email/password login enabled, add the Google provider, update the auth UI, and document the required Google environment variables.
|
|
109
|
+
```
|
|
153
110
|
|
|
154
|
-
|
|
155
|
-
2. Create a new project or select an existing one
|
|
156
|
-
3. Navigate to **Credentials** → **Create Credentials** → **OAuth 2.0 Client ID**
|
|
157
|
-
4. Set application type to **Web application**
|
|
158
|
-
5. Add authorized redirect URIs:
|
|
159
|
-
- `http://localhost:3000/api/auth/callback/google` (development)
|
|
160
|
-
- `https://yourdomain.com/api/auth/callback/google` (production)
|
|
161
|
-
6. Copy the **Client ID** and **Client Secret** to your `.env` file
|
|
111
|
+
Your agent should update the Better Auth config, add the required `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` variables, and adjust the login UI.
|
|
162
112
|
|
|
163
|
-
|
|
113
|
+
## Build With an Agent
|
|
164
114
|
|
|
165
|
-
|
|
166
|
-
2. Sign up or log in to your account
|
|
167
|
-
3. Navigate to **Settings** → **Keys** or visit <a href="https://openrouter.ai/settings/keys" target="_blank">Keys Settings</a>
|
|
168
|
-
4. Click **Create Key** and give it a name
|
|
169
|
-
5. Copy the API key and add it to your `.env` file as `OPENROUTER_API_KEY`
|
|
170
|
-
6. Browse available models at <a href="https://openrouter.ai/models" target="_blank">OpenRouter Models</a>
|
|
115
|
+
This starter is designed to be used with coding agents. The generated project includes instructions that tell agents how to plan, ask questions, split work, use sub-agents when useful, follow the design system, and verify changes.
|
|
171
116
|
|
|
172
|
-
|
|
117
|
+
- `AGENTS.md` is the main instruction file for Codex, Cursor, and other agent-compatible tools.
|
|
118
|
+
- `CLAUDE.md` points Claude users to the same project guidance.
|
|
119
|
+
- `.agents/skills/` and `.claude/skills/` include optional workflows for more specialized tasks.
|
|
120
|
+
- `DESIGN.md` defines the UI design system agents should follow.
|
|
173
121
|
|
|
174
|
-
The
|
|
122
|
+
The default workflow does not require slash commands or a separate spec file.
|
|
175
123
|
|
|
176
|
-
|
|
177
|
-
- Leave `BLOB_READ_WRITE_TOKEN` empty or unset in your `.env` file
|
|
178
|
-
- Files are automatically stored in `public/uploads/`
|
|
179
|
-
- Files are served at `/uploads/` URL path
|
|
180
|
-
- No external service or configuration needed
|
|
124
|
+
### Recommended Default Workflow
|
|
181
125
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
126
|
+
1. Install the starter and open the project in your coding-agent environment.
|
|
127
|
+
2. Switch your agent tool to planning mode.
|
|
128
|
+
3. Describe the app you want to build in plain language.
|
|
129
|
+
4. Let the agent ask clarifying questions and shape a clear plan.
|
|
130
|
+
5. Confirm the plan once the goal, scope, constraints, and success criteria are clear.
|
|
131
|
+
6. Switch your agent tool to edit mode.
|
|
132
|
+
7. Ask the agent to implement the approved plan.
|
|
133
|
+
8. The main agent should split the work into parallel streams, silos, or feature chunks that fit within context.
|
|
134
|
+
9. The agent should use sub-agents to implement those chunks in parallel where useful, then coordinate the results.
|
|
135
|
+
10. The agent should run quality checks such as lint, typecheck, and build.
|
|
136
|
+
11. Review the result in the browser and iterate.
|
|
188
137
|
|
|
189
|
-
The
|
|
138
|
+
You do not need a special command for this default workflow. The project instructions already tell the agent how to plan, split implementation work, use sub-agents, and verify the result.
|
|
190
139
|
|
|
191
|
-
##
|
|
140
|
+
## Starter Prompt
|
|
192
141
|
|
|
193
|
-
|
|
194
|
-
src/
|
|
195
|
-
├── app/ # Next.js app directory
|
|
196
|
-
│ ├── api/ # API routes
|
|
197
|
-
│ │ ├── auth/ # Authentication endpoints
|
|
198
|
-
│ │ └── chat/ # AI chat endpoint
|
|
199
|
-
│ ├── chat/ # AI chat page
|
|
200
|
-
│ ├── dashboard/ # User dashboard
|
|
201
|
-
│ └── page.tsx # Home page
|
|
202
|
-
├── components/ # React components
|
|
203
|
-
│ ├── auth/ # Authentication components
|
|
204
|
-
│ └── ui/ # shadcn/ui components
|
|
205
|
-
└── lib/ # Utilities and configurations
|
|
206
|
-
├── auth.ts # Better Auth configuration
|
|
207
|
-
├── auth-client.ts # Client-side auth utilities
|
|
208
|
-
├── db.ts # Database connection
|
|
209
|
-
├── schema.ts # Database schema
|
|
210
|
-
├── storage.ts # File storage abstraction
|
|
211
|
-
└── utils.ts # General utilities
|
|
212
|
-
```
|
|
142
|
+
Use this as a first message to your coding agent after installing the starter:
|
|
213
143
|
|
|
214
|
-
|
|
144
|
+
```text
|
|
145
|
+
I am using the Agentic Coding Starter Kit. Treat the existing app as boilerplate that should be replaced by the product I describe.
|
|
215
146
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
npm run lint # Run ESLint
|
|
221
|
-
npm run db:generate # Generate database migrations
|
|
222
|
-
npm run db:migrate # Run database migrations
|
|
223
|
-
npm run db:push # Push schema changes to database
|
|
224
|
-
npm run db:studio # Open Drizzle Studio (database GUI)
|
|
225
|
-
npm run db:dev # Push schema for development
|
|
226
|
-
npm run db:reset # Reset database (drop all tables)
|
|
147
|
+
Use the project instructions in AGENTS.md or CLAUDE.md. During planning, ask clarifying questions before making assumptions. During implementation, split the work into small chunks, use sub-agents where useful, follow DESIGN.md for UI, preserve the existing tech stack unless there is a good reason to change it, and run lint, typecheck, and build before finishing.
|
|
148
|
+
|
|
149
|
+
What I want to build:
|
|
150
|
+
[Describe your app here]
|
|
227
151
|
```
|
|
228
152
|
|
|
229
|
-
|
|
153
|
+
For example:
|
|
230
154
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
155
|
+
```text
|
|
156
|
+
What I want to build:
|
|
157
|
+
A lightweight CRM for solo consultants. It should let users manage clients, track deals, write notes, set follow-up reminders, and view a simple dashboard of open opportunities.
|
|
158
|
+
```
|
|
234
159
|
|
|
235
|
-
##
|
|
160
|
+
## When to Use Specs
|
|
236
161
|
|
|
237
|
-
|
|
162
|
+
For most POCs and MVPs, the normal agent workflow is enough. Use a spec when the feature is large, long-running, risky, or needs to be split across multiple implementation sessions.
|
|
238
163
|
|
|
239
|
-
|
|
164
|
+
The starter includes two skills for that workflow:
|
|
240
165
|
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
```
|
|
166
|
+
- `create-spec`: turns a planning conversation into `specs/{feature}/` with requirements, task files, dependency waves, and manual action notes.
|
|
167
|
+
- `implement-feature`: reads a spec folder and coordinates implementation wave by wave with review gates.
|
|
244
168
|
|
|
245
|
-
|
|
169
|
+
Use this workflow when:
|
|
246
170
|
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
171
|
+
- the feature spans many files or modules
|
|
172
|
+
- multiple agents should work in parallel
|
|
173
|
+
- the implementation may take more than one session
|
|
174
|
+
- you need resumable progress tracking
|
|
175
|
+
- you want a written implementation record before coding starts
|
|
250
176
|
|
|
251
|
-
|
|
252
|
-
4. Add your environment variables when prompted or via the Vercel dashboard
|
|
177
|
+
Example agent request:
|
|
253
178
|
|
|
254
|
-
|
|
179
|
+
```text
|
|
180
|
+
Create a spec for the billing and subscriptions feature we just planned. Break it into parallel implementation waves and include any manual setup steps.
|
|
181
|
+
```
|
|
255
182
|
|
|
256
|
-
|
|
183
|
+
Then:
|
|
257
184
|
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
- `GOOGLE_CLIENT_SECRET` - Google OAuth Client Secret
|
|
262
|
-
- `OPENROUTER_API_KEY` - OpenRouter API key (optional, for AI chat functionality)
|
|
263
|
-
- `OPENROUTER_MODEL` - Model name from OpenRouter (optional, defaults to openai/gpt-5-mini)
|
|
264
|
-
- `NEXT_PUBLIC_APP_URL` - Your production domain
|
|
265
|
-
- `BLOB_READ_WRITE_TOKEN` - Vercel Blob token (optional, uses local storage if not set)
|
|
185
|
+
```text
|
|
186
|
+
Implement the billing and subscriptions spec from specs/billing-subscriptions.
|
|
187
|
+
```
|
|
266
188
|
|
|
267
|
-
##
|
|
189
|
+
## Project Structure
|
|
268
190
|
|
|
269
|
-
|
|
191
|
+
```text
|
|
192
|
+
src/
|
|
193
|
+
├── app/
|
|
194
|
+
│ ├── (auth)/
|
|
195
|
+
│ │ ├── forgot-password/
|
|
196
|
+
│ │ ├── login/
|
|
197
|
+
│ │ ├── register/
|
|
198
|
+
│ │ └── reset-password/
|
|
199
|
+
│ ├── api/
|
|
200
|
+
│ │ ├── auth/
|
|
201
|
+
│ │ ├── chat/
|
|
202
|
+
│ │ └── diagnostics/
|
|
203
|
+
│ ├── chat/
|
|
204
|
+
│ ├── dashboard/
|
|
205
|
+
│ ├── profile/
|
|
206
|
+
│ ├── layout.tsx
|
|
207
|
+
│ └── page.tsx
|
|
208
|
+
├── components/
|
|
209
|
+
│ ├── auth/
|
|
210
|
+
│ ├── ui/
|
|
211
|
+
│ ├── site-footer.tsx
|
|
212
|
+
│ └── site-header.tsx
|
|
213
|
+
├── hooks/
|
|
214
|
+
└── lib/
|
|
215
|
+
├── auth.ts
|
|
216
|
+
├── auth-client.ts
|
|
217
|
+
├── db.ts
|
|
218
|
+
├── env.ts
|
|
219
|
+
├── schema.ts
|
|
220
|
+
├── session.ts
|
|
221
|
+
├── storage.ts
|
|
222
|
+
└── utils.ts
|
|
223
|
+
```
|
|
270
224
|
|
|
271
|
-
|
|
225
|
+
Important root files:
|
|
272
226
|
|
|
273
|
-
|
|
227
|
+
- `AGENTS.md`: coding-agent behavior rules
|
|
228
|
+
- `CLAUDE.md`: Claude entrypoint for the same guidance
|
|
229
|
+
- `DESIGN.md`: UI design system and component guidance
|
|
230
|
+
- `drizzle.config.ts`: Drizzle migration configuration
|
|
231
|
+
- `docker-compose.yml`: local PostgreSQL service
|
|
232
|
+
- `env.example`: environment variable template
|
|
233
|
+
- `components.json`: shadcn/ui configuration
|
|
274
234
|
|
|
275
|
-
|
|
235
|
+
## Available Scripts
|
|
276
236
|
|
|
277
|
-
|
|
237
|
+
```bash
|
|
238
|
+
pnpm dev # Start the development server with Turbopack
|
|
239
|
+
pnpm build # Run migrations, then build for production
|
|
240
|
+
pnpm build:ci # Build without running migrations
|
|
241
|
+
pnpm start # Start the production server
|
|
242
|
+
pnpm lint # Run ESLint
|
|
243
|
+
pnpm typecheck # Run TypeScript without emitting files
|
|
244
|
+
pnpm check # Run lint and typecheck
|
|
245
|
+
pnpm format # Format the repository
|
|
246
|
+
pnpm format:check # Check formatting
|
|
247
|
+
pnpm setup # Run the setup script
|
|
248
|
+
pnpm db:generate # Generate Drizzle migrations
|
|
249
|
+
pnpm db:migrate # Run Drizzle migrations
|
|
250
|
+
pnpm db:studio # Open Drizzle Studio
|
|
251
|
+
```
|
|
278
252
|
|
|
279
|
-
|
|
280
|
-
|---------|-------------|
|
|
281
|
-
| `/create-feature` | Create a new feature specification with requirements and implementation plan |
|
|
282
|
-
| `/publish-to-github` | Publish a feature to GitHub Issues and Projects |
|
|
283
|
-
| `/continue-feature` | Continue implementing the next task for a GitHub-published feature |
|
|
284
|
-
| `/checkpoint` | Create a comprehensive checkpoint commit with all changes |
|
|
253
|
+
The repository also contains Drizzle push/reset helper scripts for local experimentation. For schema changes you intend to keep, prefer:
|
|
285
254
|
|
|
286
|
-
|
|
255
|
+
```bash
|
|
256
|
+
pnpm db:generate
|
|
257
|
+
pnpm db:migrate
|
|
258
|
+
```
|
|
287
259
|
|
|
288
|
-
|
|
260
|
+
Do not use schema push as a replacement for migrations in real project work.
|
|
289
261
|
|
|
290
|
-
|
|
291
|
-
```bash
|
|
292
|
-
# Install (if needed)
|
|
293
|
-
brew install gh # macOS
|
|
294
|
-
# or see https://cli.github.com/
|
|
262
|
+
## Database Workflow
|
|
295
263
|
|
|
296
|
-
|
|
297
|
-
gh auth login
|
|
264
|
+
For local development:
|
|
298
265
|
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
266
|
+
```bash
|
|
267
|
+
docker compose up -d
|
|
268
|
+
pnpm db:migrate
|
|
269
|
+
```
|
|
302
270
|
|
|
303
|
-
|
|
271
|
+
When your app needs schema changes, ask your agent to update `src/lib/schema.ts`, generate a migration, and run it:
|
|
304
272
|
|
|
305
|
-
|
|
273
|
+
```bash
|
|
274
|
+
pnpm db:generate
|
|
275
|
+
pnpm db:migrate
|
|
276
|
+
```
|
|
306
277
|
|
|
307
|
-
|
|
278
|
+
If you deploy to Vercel or another hosted environment, set `POSTGRES_URL` in that environment before running migrations or building the app.
|
|
308
279
|
|
|
309
|
-
|
|
280
|
+
## AI Features
|
|
310
281
|
|
|
311
|
-
|
|
312
|
-
You: I want to add a user preferences page where users can update their display name,
|
|
313
|
-
email notifications, and theme preferences.
|
|
314
|
-
```
|
|
282
|
+
The starter uses the Vercel AI SDK with OpenRouter. Set these variables to enable AI chat:
|
|
315
283
|
|
|
316
|
-
|
|
284
|
+
```env
|
|
285
|
+
OPENROUTER_API_KEY=sk-or-v1-your-key
|
|
286
|
+
OPENROUTER_MODEL="openai/gpt-5-mini"
|
|
287
|
+
```
|
|
317
288
|
|
|
318
|
-
|
|
289
|
+
OpenRouter lets you switch models without changing the application code. Update `OPENROUTER_MODEL` when you want to try a different model.
|
|
319
290
|
|
|
320
|
-
|
|
321
|
-
/create-feature
|
|
322
|
-
```
|
|
291
|
+
## File Storage
|
|
323
292
|
|
|
324
|
-
|
|
325
|
-
- `requirements.md` - What the feature does and acceptance criteria
|
|
326
|
-
- `implementation-plan.md` - Phased tasks with checkboxes
|
|
293
|
+
The starter includes a storage abstraction that can use local storage in development or Vercel Blob in production.
|
|
327
294
|
|
|
328
|
-
|
|
295
|
+
For local development, leave `BLOB_READ_WRITE_TOKEN` empty. Files are stored under `public/uploads/`.
|
|
329
296
|
|
|
330
|
-
|
|
297
|
+
For Vercel Blob:
|
|
331
298
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
299
|
+
1. Create a Blob store in Vercel.
|
|
300
|
+
2. Copy the `BLOB_READ_WRITE_TOKEN`.
|
|
301
|
+
3. Add it to your production environment variables.
|
|
335
302
|
|
|
336
|
-
|
|
337
|
-
- An **Epic issue** with full requirements
|
|
338
|
-
- **Task issues** for each implementation step
|
|
339
|
-
- A **GitHub Project** to track progress
|
|
340
|
-
- **Labels** for organization
|
|
341
|
-
- A `github.md` file with all references
|
|
303
|
+
The app chooses the storage backend based on whether `BLOB_READ_WRITE_TOKEN` is configured.
|
|
342
304
|
|
|
343
|
-
|
|
305
|
+
## Deployment
|
|
344
306
|
|
|
345
|
-
|
|
307
|
+
Vercel is the recommended deployment target.
|
|
346
308
|
|
|
347
|
-
```
|
|
348
|
-
|
|
309
|
+
```bash
|
|
310
|
+
npm install -g vercel
|
|
311
|
+
vercel --prod
|
|
349
312
|
```
|
|
350
313
|
|
|
351
|
-
|
|
352
|
-
1. Finds the next unblocked task (respecting dependencies)
|
|
353
|
-
2. Updates the GitHub Project status to "In Progress"
|
|
354
|
-
3. Implements the task following project conventions
|
|
355
|
-
4. Runs lint and typecheck
|
|
356
|
-
5. Commits with `closes #{issue-number}`
|
|
357
|
-
6. Updates the issue with implementation details
|
|
358
|
-
7. Moves the task to "Done" on the Project board
|
|
314
|
+
Set the required production environment variables:
|
|
359
315
|
|
|
360
|
-
|
|
316
|
+
- `POSTGRES_URL`
|
|
317
|
+
- `BETTER_AUTH_SECRET`
|
|
318
|
+
- `NEXT_PUBLIC_APP_URL`
|
|
319
|
+
- `OPENROUTER_API_KEY`, if using AI features
|
|
320
|
+
- `OPENROUTER_MODEL`, if using AI features
|
|
321
|
+
- `BLOB_READ_WRITE_TOKEN`, if using Vercel Blob
|
|
322
|
+
- `POLAR_WEBHOOK_SECRET` and `POLAR_ACCESS_TOKEN`, if using Polar payments
|
|
361
323
|
|
|
362
|
-
|
|
324
|
+
The default `pnpm build` script runs database migrations before `next build`. If your CI or host should not run migrations during build, use `pnpm build:ci` and run migrations as a separate deployment step.
|
|
363
325
|
|
|
364
|
-
|
|
326
|
+
## Troubleshooting
|
|
365
327
|
|
|
366
|
-
|
|
367
|
-
/checkpoint
|
|
368
|
-
```
|
|
369
|
-
|
|
370
|
-
This stages all changes and creates a well-formatted commit with:
|
|
371
|
-
- Clear summary line
|
|
372
|
-
- Detailed description of changes
|
|
373
|
-
- Co-author attribution
|
|
328
|
+
### The app cannot connect to Postgres
|
|
374
329
|
|
|
375
|
-
|
|
330
|
+
Confirm Docker is running and start the database:
|
|
376
331
|
|
|
377
332
|
```bash
|
|
378
|
-
|
|
379
|
-
|
|
333
|
+
docker compose up -d
|
|
334
|
+
```
|
|
335
|
+
|
|
336
|
+
Then check that `POSTGRES_URL` in `.env` matches the database connection string.
|
|
380
337
|
|
|
381
|
-
|
|
382
|
-
You: I need to add API rate limiting to protect our endpoints...
|
|
338
|
+
### Auth reset or verification emails are not arriving
|
|
383
339
|
|
|
384
|
-
|
|
385
|
-
/create-feature
|
|
340
|
+
In development, links are logged to the terminal. This is intentional. Connect an email provider before using password reset or verification in production.
|
|
386
341
|
|
|
387
|
-
|
|
388
|
-
/publish-to-github
|
|
342
|
+
### AI chat is not working
|
|
389
343
|
|
|
390
|
-
|
|
391
|
-
/continue-feature
|
|
392
|
-
# ... Claude implements, commits, updates GitHub ...
|
|
344
|
+
Set `OPENROUTER_API_KEY` and restart the dev server. Also confirm `OPENROUTER_MODEL` is a model available to your OpenRouter account.
|
|
393
345
|
|
|
394
|
-
|
|
395
|
-
# ... next task ...
|
|
346
|
+
### My agent is preserving too much boilerplate
|
|
396
347
|
|
|
397
|
-
|
|
398
|
-
|
|
348
|
+
Tell the agent directly that the starter UI is scaffolding and should be replaced:
|
|
349
|
+
|
|
350
|
+
```text
|
|
351
|
+
Replace the starter UI with the actual product UI. Do not keep setup checklists, placeholder navigation, demo content, or boilerplate copy unless I explicitly ask for it.
|
|
399
352
|
```
|
|
400
353
|
|
|
401
|
-
###
|
|
354
|
+
### I need Google login
|
|
402
355
|
|
|
403
|
-
|
|
356
|
+
Ask your agent to add Google OAuth through Better Auth while keeping email/password enabled. You will need Google OAuth credentials and production callback URLs.
|
|
404
357
|
|
|
405
|
-
|
|
358
|
+
## Video Tutorial
|
|
406
359
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
.
|
|
410
|
-
├── checkpoint.md
|
|
411
|
-
├── continue-feature.md
|
|
412
|
-
├── create-feature.md
|
|
413
|
-
└── publish-to-github.md
|
|
414
|
-
```
|
|
360
|
+
Watch the original walkthrough:
|
|
361
|
+
|
|
362
|
+
[Agentic Coding Boilerplate Tutorial](https://youtu.be/JQ86N3WOAh4)
|
|
415
363
|
|
|
416
|
-
|
|
364
|
+
Some details in older videos may differ from the current starter. This README is the source of truth for the current default workflow.
|
|
417
365
|
|
|
418
|
-
##
|
|
366
|
+
## Support This Project
|
|
419
367
|
|
|
420
|
-
|
|
421
|
-
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
|
|
422
|
-
3. Commit your changes (`git commit -m 'Add amazing feature'`)
|
|
423
|
-
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
424
|
-
5. Open a Pull Request
|
|
368
|
+
If this starter kit helped you build something useful, you can support the project here:
|
|
425
369
|
|
|
426
|
-
|
|
370
|
+
[Buy me a coffee](https://www.buymeacoffee.com/leonvanzyl)
|
|
427
371
|
|
|
428
|
-
|
|
372
|
+
## Contributing
|
|
429
373
|
|
|
430
|
-
|
|
374
|
+
1. Fork this repository.
|
|
375
|
+
2. Create a feature branch.
|
|
376
|
+
3. Make your changes.
|
|
377
|
+
4. Run the relevant checks.
|
|
378
|
+
5. Open a pull request.
|
|
431
379
|
|
|
432
|
-
|
|
380
|
+
## License
|
|
433
381
|
|
|
434
|
-
|
|
435
|
-
2. Review the documentation above
|
|
436
|
-
3. Create a new issue with detailed information about your problem
|
|
382
|
+
This project is licensed under the MIT License.
|
|
437
383
|
|
|
438
|
-
|
|
384
|
+
## Need Help?
|
|
439
385
|
|
|
440
|
-
|
|
386
|
+
- Check the repository issues: [github.com/leonvanzyl/agentic-coding-starter-kit/issues](https://github.com/leonvanzyl/agentic-coding-starter-kit/issues)
|
|
387
|
+
- Review `AGENTS.md`, `CLAUDE.md`, and `DESIGN.md`
|
|
388
|
+
- Open a new issue with the exact setup steps, error output, and environment details
|