### Setup Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Runs the initial setup script for the project, which may include installing dependencies or configuring environment variables. ```bash pnpm setup ``` -------------------------------- ### Configure and Run App Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md After creating the app, copy the example environment file, start the Docker Compose services, apply database migrations, and run the development server. ```bash cp env.example .env docker compose up -d pnpm db:migrate pnpm dev ``` -------------------------------- ### Starter Prompt for Coding Agent Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Use this as the initial message to your coding agent after installing the starter kit. It guides the agent on how to approach planning and implementation, emphasizing the replacement of boilerplate code and adherence to project instructions. ```text I am using the Agentic Coding Starter Kit. Treat the existing app as boilerplate that should be replaced by the product I describe. 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. What I want to build: [Describe your app here] ``` -------------------------------- ### Example App Description for Starter Prompt Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md An example of how to describe the desired application within the starter prompt. ```text What I want to build: 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. ``` -------------------------------- ### Non-Interactive Setup Skipping Install and Git Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Scaffold a project non-interactively, skipping dependency installation and Git repository initialization for faster setup. ```bash npx create-agentic-app@latest my-app -y -p npm --skip-install --skip-git ``` -------------------------------- ### Install react-markdown Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/react-markdown.md Install the react-markdown package using npm. ```sh npm install react-markdown ``` -------------------------------- ### Install AI SDK Dependencies (bun) Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/ai/streaming.md Install the AI SDK, its React hooks, and the OpenRouter provider using bun. Zod is also included for data validation. ```bash bun add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` -------------------------------- ### Environment Variables Example Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Example environment variables for configuring the database, authentication, AI integration, and file storage. Update these values for your specific environment. ```env # Database POSTGRES_URL=postgresql://dev_user:dev_password@localhost:5432/postgres_dev # Authentication - Better Auth BETTER_AUTH_SECRET=your-random-secret # AI Integration via OpenRouter OPENROUTER_API_KEY= OPENROUTER_MODEL="openai/gpt-5-mini" # Optional - for vector search only OPENAI_EMBEDDING_MODEL="text-embedding-3-large" # App URL NEXT_PUBLIC_APP_URL="http://localhost:3000" # File storage BLOB_READ_WRITE_TOKEN= # Polar payment processing POLAR_WEBHOOK_SECRET=polar_ POLAR_ACCESS_TOKEN=polar_ ``` -------------------------------- ### Agent Instruction Prompt Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Example prompt to instruct a coding agent to add Google OAuth to the existing Better Auth setup. This includes enabling email/password login, adding the Google provider, updating the UI, and documenting environment variables. ```text 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. ``` -------------------------------- ### Start and Migrate Database Locally Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Use these commands to start the PostgreSQL database in detached mode and apply database migrations for local development. ```bash docker compose up -d pnpm db:migrate ``` -------------------------------- ### Production Server Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Starts the production-ready server after the project has been built. ```bash pnpm start ``` -------------------------------- ### Install AI SDK Dependencies (yarn) Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/ai/streaming.md Install the AI SDK, its React hooks, and the OpenRouter provider using yarn. Zod is also included for data validation. ```bash yarn add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` -------------------------------- ### Install AI SDK Dependencies Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Install the AI SDK, its React hooks, the OpenRouter provider, and Zod for schema validation. Choose the package manager that suits your project. ```bash pnpm add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` ```bash npm install ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` ```bash yarn add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` ```bash bun add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` -------------------------------- ### Install AI SDK Dependencies (npm) Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/ai/streaming.md Install the AI SDK, its React hooks, and the OpenRouter provider using npm. Zod is also included for data validation. ```bash npm install ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` -------------------------------- ### Install Polar Dependencies Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/betterauth/polar.md Install the necessary packages for Better Auth and Polar integration using pnpm. ```bash pnpm add better-auth @polar-sh/better-auth @polar-sh/sdk ``` -------------------------------- ### Agent Request for Spec Creation Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Example agent request to create a specification for a feature, emphasizing parallel implementation waves and manual setup steps. ```text Create a spec for the billing and subscriptions feature we just planned. Break it into parallel implementation waves and include any manual setup steps. ``` -------------------------------- ### Deploy to Vercel Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Install the Vercel CLI and deploy the application to production. Ensure all required production environment variables are set. ```bash npm install -g vercel vercel --prod ``` -------------------------------- ### Start PostgreSQL Database Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md If the application cannot connect to Postgres, confirm Docker is running and use this command to start the database service. ```bash docker compose up -d ``` -------------------------------- ### Install AI SDK Dependencies (pnpm) Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/ai/streaming.md Install the AI SDK, its React hooks, and the OpenRouter provider using pnpm. Zod is also included for data validation. ```bash pnpm add ai @ai-sdk/react @openrouter/ai-sdk-provider zod ``` -------------------------------- ### Run the Chatbot Application Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Start your Next.js application using the provided command to test the chatbot interface. Access it via http://localhost:3000 in your browser. ```bash pnpm run dev ``` -------------------------------- ### Development Server Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Starts the development server using Turbopack for fast hot-reloading. ```bash pnpm dev ``` -------------------------------- ### Auth Route Handler Setup Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Mounts the Better Auth HTTP surface under `/api/auth/` for handling sign-in, sign-up, sign-out, sessions, OAuth callbacks, password reset, and email verification. This setup requires no changes as it's already wired up. ```typescript // src/app/api/auth/[...all]/route.ts (already wired up — no changes needed) import { toNextJsHandler } from "better-auth/next-js"; import { auth } from "@/lib/auth"; export const { GET, POST } = toNextJsHandler(auth); // Example HTTP calls handled automatically: // POST /api/auth/sign-in/email { email, password } // POST /api/auth/sign-up/email { name, email, password } // POST /api/auth/sign-out // GET /api/auth/session → { user, session } | null // POST /api/auth/forget-password { email, redirectTo } // POST /api/auth/reset-password { token, newPassword } // GET /api/auth/verify-email?token=… // Verify the route is responding: curl http://localhost:3000/api/auth/session # → {"user":null,"session":null} (when not logged in) ``` -------------------------------- ### Example Agent Skill Invocations (Claude Code) Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Illustrates how to invoke specific agent skills using a command-line interface. These examples show the command and a brief description of the expected outcome. ```text /create-spec # Then describe the feature; the agent writes specs/{feature}/README.md, # requirements.md, tasks/*.md, and action-required.md. ``` ```text /implement-feature # Reads the spec and implements wave by wave, pausing for review between waves. ``` ```text /ship-it # Runs: pnpm lint && pnpm typecheck && pnpm build # Reports errors and suggests fixes before deployment. ``` -------------------------------- ### Scaffold New Project with create-agentic-app CLI Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Use this CLI to bootstrap a new Next.js project with an agentic development workflow. It handles template copying and dependency installation. Customize with flags for package manager, skipping install, or skipping git initialization. ```bash npx create-agentic-app@latest my-app cd my-app ``` ```bash npx create-agentic-app@latest . --package-manager pnpm --yes ``` ```bash npx create-agentic-app@latest my-app --skip-install --skip-git ``` ```bash cp env.example .env # fill in POSTGRES_URL, BETTER_AUTH_SECRET, etc. docker compose up -d # start local PostgreSQL pnpm db:migrate # apply Drizzle migrations pnpm dev # start Next.js dev server at http://localhost:3000 ``` -------------------------------- ### Available Scripts (npm/pnpm) Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Lists common scripts available for development, building, linting, type checking, formatting, database operations, and setup. ```bash pnpm dev # Start the development server with Turbopack pnpm build # Run migrations, then build for production pnpm build:ci # Build without running migrations pnpm start # Start the production server pnpm lint # Run ESLint pnpm typecheck # Run TypeScript without emitting files pnpm check # Run lint and typecheck pnpm format # Format the repository pnpm format:check # Check formatting pnpm setup # Run the setup script pnpm db:generate # Generate Drizzle migrations pnpm db:migrate # Run Drizzle migrations pnpm db:studio # Open Drizzle Studio ``` -------------------------------- ### Clear npx Cache and Install Latest Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Instruct users to clear their npx cache and install the latest version of the create-agentic-app package if they are encountering issues with old versions. ```bash npx clear-npx-cache npx create-agentic-app@latest my-project # or use specific version npx create-agentic-app@1.1.4 my-project ``` -------------------------------- ### React Markdown with GitHub Flavored Markdown Example Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/react-markdown.md Demonstrates using remark-gfm for task lists and tables in markdown. ```js import Markdown from "react-markdown"; import remarkGfm from "remark-gfm"; const markdown = ` * [x] todo * [ ] done | Column 1 | Column 2 | |----------|----------| | Cell 1 | Cell 2 | `; {markdown} ``` -------------------------------- ### Agent Request for Feature Implementation Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Example agent request to implement a previously created feature specification. ```text Implement the billing and subscriptions spec from specs/billing-subscriptions. ``` -------------------------------- ### Generate Array Example Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/structured-data.md Shows how to use the `output: "array"` strategy with `streamObject` to generate and stream an array of objects. ```APIDOC ### Array If you want to generate an array of objects, you can set the output strategy to `array`. When you use the `array` output strategy, the schema specifies the shape of an array element. With `streamObject`, you can also stream the generated array elements using `elementStream`. ```ts highlight="7,18" import { openai } from "@ai-sdk/openai"; import { streamObject } from "ai"; import { z } from "zod"; const { elementStream } = streamObject({ model: openai("gpt-4.1"), output: "array", schema: z.object({ name: z.string(), class: z.string() .describe("Character class, e.g. warrior, mage, or thief."), description: z.string(), }), prompt: "Generate 3 hero descriptions for a fantasy role playing game.", }); for await (const hero of elementStream) { console.log(hero); } ``` ``` -------------------------------- ### Project Scripts for Development and Build Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Lists available npm scripts for managing the project, including starting the development server, building for production, running linters, type checking, formatting, and database operations. ```bash pnpm dev # Start dev server with Turbopack at http://localhost:3000 ``` ```bash pnpm build # Run db:migrate then next build (production) ``` ```bash pnpm build:ci # next build without migrations (for CI environments) ``` ```bash pnpm start # Start the production server ``` ```bash pnpm lint # ESLint ``` ```bash pnpm typecheck # TypeScript type check (no emit) ``` ```bash pnpm check # lint + typecheck ``` ```bash pnpm format # Prettier write ``` ```bash pnpm format:check # Prettier check ``` ```bash pnpm db:generate # Generate a new Drizzle migration from schema changes ``` ```bash pnpm db:migrate # Apply pending migrations ``` ```bash pnpm db:studio # Open Drizzle Studio ``` ```bash pnpm setup # Run the interactive setup script ``` ```bash pnpm sync-template # Sync root files into create-agentic-app/template/ ``` -------------------------------- ### Non-Interactive Project Setup with pnpm Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md This command scaffolds a new project non-interactively, automatically confirming prompts and selecting pnpm as the package manager. ```bash npx create-agentic-app@latest my-app -y -p pnpm ``` -------------------------------- ### Generate Object Example Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/structured-data.md Demonstrates how to use the `generateObject` function to generate a structured JSON object based on a Zod schema and a prompt. ```APIDOC ## Generate Object The `generateObject` generates structured data from a prompt. The schema is also used to validate the generated data, ensuring type safety and correctness. ```ts import { generateObject } from "ai"; import { z } from "zod"; const { object } = await generateObject({ model: "openai/gpt-4.1", schema: z.object({ recipe: z.object({ name: z.string(), ingredients: z.array(z.object({ name: z.string(), amount: z.string() })), steps: z.array(z.string()), }), }), prompt: "Generate a lasagna recipe.", }); ``` ``` -------------------------------- ### Create Agentic App CLI Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Use the CLI to create a new agentic app. This command scaffolds the project and installs dependencies. ```bash npx create-agentic-app@latest my-app cd my-app ``` ```bash npx create-agentic-app@latest . ``` -------------------------------- ### Replace Setup Checklist Wrapper with shadcn Card Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/specs/ui-polish-responsive/tasks/task-10-setup-checklist.md Replace the existing `div` wrapper with shadcn's `Card`, `CardHeader`, and `CardContent` components. This change aims to improve visual consistency with the rest of the application. Ensure the title, button, error message, and checklist items are correctly nested within the new Card structure. ```tsx
Setup checklist

{completed}/{steps.length} completed

{error ?
{error}
: null} {data ? (
Last checked: {new Date(data.timestamp).toLocaleString()}
) : null}
``` -------------------------------- ### Project Structure Overview Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Overview of the starter kit's project directory structure, highlighting key files and folders. ```text src/ ├── (auth)/ │ ├── forgot-password/ │ ├── login/ │ ├── register/ │ └── reset-password/ ├── api/ │ ├── auth/ │ ├── chat/ │ └── diagnostics/ ├── chat/ ├── dashboard/ ├── profile/ ├── layout.tsx └── page.tsx ├── components/ │ ├── auth/ │ ├── ui/ │ ├── site-footer.tsx │ └── site-header.tsx ├── hooks/ └── lib/ ├── auth.ts ├── auth-client.ts ├── db.ts ├── env.ts ├── schema.ts ├── session.ts ├── storage.ts └── utils.ts ``` -------------------------------- ### Important Root Files Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Lists important root files in the starter kit and their purpose. ```text - AGENTS.md: coding-agent behavior rules - CLAUDE.md: Claude entrypoint for the same guidance - DESIGN.md: UI design system and component guidance - drizzle.config.ts: Drizzle migration configuration - docker-compose.yml: local PostgreSQL service - env.example: environment variable template - components.json: shadcn/ui configuration ``` -------------------------------- ### Create New App with CLI Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Use this command to create a new application using the agentic-coding-starter-kit CLI. It sets up a new project directory with the starter files. ```bash npx create-agentic-app@latest my-app cd my-app ``` -------------------------------- ### Create New Project in Subdirectory Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Use this command to scaffold a new agentic application in a specified subdirectory. ```bash npx create-agentic-app@latest my-app ``` -------------------------------- ### Agent Prompt for UI Replacement Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/README.md Provide this prompt to the agent to instruct it to replace the starter UI with the actual product UI, avoiding boilerplate elements. ```text 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. ``` -------------------------------- ### Set POLAR_WEBHOOK_SECRET Environment Variable Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/betterauth/polar.md Example of how to set the POLAR_WEBHOOK_SECRET environment variable for the Webhooks plugin. ```bash ``` -------------------------------- ### Create Environment File Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Create a .env.local file in the project root to store environment variables. ```bash touch .env.local ``` -------------------------------- ### Production Build Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Runs migrations and then builds the project for production deployment. ```bash pnpm build ``` -------------------------------- ### Create New Project in Current Directory Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Use this command to scaffold a new agentic application in the current directory. ```bash npx create-agentic-app@latest . ``` -------------------------------- ### Stream Object Example Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/structured-data.md Illustrates how to use the `streamObject` function to stream structured data as it is generated, useful for interactive applications. ```APIDOC ## Stream Object Given the added complexity of returning structured data, model response time can be unacceptable for your interactive use case. With the [`streamObject`](/docs/reference/ai-sdk-core/stream-object) function, you can stream the model's response as it is generated. ```ts import { streamObject } from "ai"; const { partialObjectStream } = streamObject({ // ... }); // use partialObjectStream as an async iterable for await (const partialObject of partialObjectStream) { console.log(partialObject); } ``` ``` -------------------------------- ### Diagnostics API Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Public endpoint to retrieve the application's configuration health. This is used by the frontend to display setup status. ```APIDOC ## GET /api/diagnostics ### Description Public endpoint (no auth required) that returns the configuration health of the app. Used by the homepage `SetupChecklist` component to show setup status before a user logs in. ### Method GET ### Endpoint /api/diagnostics ### Response #### Success Response (200) - **timestamp** (string) - The timestamp of the health check. - **env** (object) - An object indicating the status of environment variables. - **POSTGRES_URL** (boolean) - Status of POSTGRES_URL. - **BETTER_AUTH_SECRET** (boolean) - Status of BETTER_AUTH_SECRET. - **GOOGLE_CLIENT_ID** (boolean) - Status of GOOGLE_CLIENT_ID. - **GOOGLE_CLIENT_SECRET** (boolean) - Status of GOOGLE_CLIENT_SECRET. - **OPENROUTER_API_KEY** (boolean) - Status of OPENROUTER_API_KEY. - **NEXT_PUBLIC_APP_URL** (boolean) - Status of NEXT_PUBLIC_APP_URL. - **database** (object) - Database connection and schema status. - **connected** (boolean) - Indicates if the database is connected. - **schemaApplied** (boolean) - Indicates if the database schema has been applied. - **auth** (object) - Authentication status. - **configured** (boolean) - Indicates if authentication is configured. - **routeResponding** (boolean) - Indicates if the authentication route is responding. - **ai** (object) - AI service status. - **configured** (boolean) - Indicates if the AI service is configured. - **storage** (object) - Storage service status. - **configured** (boolean) - Indicates if the storage service is configured. - **type** (string) - The type of storage configured (e.g., "local"). - **overallStatus** (string) - Overall health status of the application. Possible values: "ok", "warn", "error". ### Response Example ```json { "timestamp": "2025-01-15T10:30:00.000Z", "env": { "POSTGRES_URL": true, "BETTER_AUTH_SECRET": true, "GOOGLE_CLIENT_ID": false, "GOOGLE_CLIENT_SECRET": false, "OPENROUTER_API_KEY": true, "NEXT_PUBLIC_APP_URL": true }, "database": { "connected": true, "schemaApplied": true }, "auth": { "configured": false, "routeResponding": true }, "ai": { "configured": true }, "storage": { "configured": false, "type": "local" }, "overallStatus": "warn" } ``` ``` -------------------------------- ### Navigate to App Directory Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Change the current directory to the newly created Next.js application folder. ```bash cd my-ai-app ``` -------------------------------- ### Diagnostics API Health Check Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Public endpoint to check application configuration health. Used by the homepage to display setup status. ```bash curl http://localhost:3000/api/diagnostics ``` ```json { "timestamp": "2025-01-15T10:30:00.000Z", "env": { "POSTGRES_URL": true, "BETTER_AUTH_SECRET": true, "GOOGLE_CLIENT_ID": false, "GOOGLE_CLIENT_SECRET": false, "OPENROUTER_API_KEY": true, "NEXT_PUBLIC_APP_URL": true }, "database": { "connected": true, "schemaApplied": true }, "auth": { "configured": false, "routeResponding": true }, "ai": { "configured": true }, "storage": { "configured": false, "type": "local" }, "overallStatus": "warn" } ``` -------------------------------- ### Test Local Package Before Publishing Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md This command links the local package for testing and then creates a new app in a test directory to verify functionality. ```bash cd create-agentic-app npm link cd /path/to/test/directory create-agentic-app my-test-app ``` -------------------------------- ### Grid Layout for Feature Cards Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/DESIGN.md Applies a responsive grid layout for feature cards, starting with a single column and expanding to four columns on larger screens. ```html grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 ``` -------------------------------- ### Generate Structured Output with generateText Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/structured-data.md Use `generateText` with the `experimental_output` setting to get structured data. This feature is experimental and may change. Ensure your model supports structured outputs. ```typescript const { experimental_output } = await generateText({ // ... experimental_output: Output.object({ schema: z.object({ name: z.string(), age: z.number().nullable().describe("Age of the person."), contact: z.object({ type: z.literal("email"), value: z.string(), }), occupation: z.object({ type: z.literal("employed"), company: z.string(), position: z.string(), }), }), }), prompt: "Generate an example person for testing.", }); ``` -------------------------------- ### Drizzle ORM Database Client Setup Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Access your PostgreSQL database with a type-safe Drizzle ORM client. Supports standard query operations and includes CLI scripts for schema migration management. ```typescript import { db } from "@/lib/db"; import { user, session } from "@/lib/schema"; import { eq } from "drizzle-orm"; // Select all users const users = await db.select().from(user); // Find a user by email const [found] = await db .select() .from(user) .where(eq(user.email, "alice@example.com")) .limit(1); // Insert a custom record (for app tables you add on top of the auth schema) // await db.insert(myTable).values({ id: crypto.randomUUID(), ... }); // Run migrations with the CLI scripts // pnpm db:generate → generates a new migration file in ./drizzle // pnpm db:migrate → applies pending migrations // pnpm db:studio → opens Drizzle Studio UI ``` -------------------------------- ### Sync Template from Main Project Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md This command is used by maintainers to copy changes from the main project into the template directory within `create-agentic-app/`. ```bash npm run sync ``` -------------------------------- ### Render Tool Calls in Chat UI Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/docs/technical/ai/streaming.md Update your React component to handle and display custom part types, such as tool calls and their results. This setup allows for visual feedback on tool usage within the chat interface. ```tsx "use client"; import { useChat } from "@ai-sdk/react"; import { useState } from "react"; export default function Chat() { const [input, setInput] = useState(""); const { messages, sendMessage } = useChat(); return (
{messages.map((message) => (
{message.role === "user" ? "User: " : "AI: "} {message.parts.map((part, i) => { switch (part.type) { case "text": return
{part.text}
; case "tool-weather": case "tool-convertFahrenheitToCelsius": return (
                    {JSON.stringify(part, null, 2)}
                  
); } })}
))}
{ e.preventDefault(); sendMessage({ text: input }); setInput(""); }} > setInput(e.currentTarget.value)} />
); } ``` -------------------------------- ### Display Tool Invocation in UI Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Update your UI component to handle and display different message part types, including custom tool invocations. This example shows how to render text parts and a JSON representation for 'tool-weather' parts. ```typescript "use client"; import { useChat } from "@ai-sdk/react"; import { useState } from "react"; export default function Chat() { const [input, setInput] = useState(""); const { messages, sendMessage } = useChat(); return (
{messages.map((message) => (
{message.role === "user" ? "User: " : "AI: "} {message.parts.map((part, i) => { switch (part.type) { case "text": return
{part.text}
; case "tool-weather": return (
                    {JSON.stringify(part, null, 2)}
                  
); } })}
))}
{ e.preventDefault(); sendMessage({ text: input }); setInput(""); }} > setInput(e.currentTarget.value)} />
); } ``` -------------------------------- ### Better Auth Client Operations for React Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Provides named exports for common authentication operations used in Client Components and browser-side code. Includes examples for user registration, sign-in, session access, sign-out, password reset requests, and password reset confirmation. ```typescript import { signIn, signOut, signUp, useSession, getSession, requestPasswordReset, resetPassword, sendVerificationEmail, } from "@/lib/auth-client"; // Register a new user const result = await signUp.email({ name: "Alice", email: "alice@example.com", password: "securepassword", callbackURL: "/dashboard", // redirect after successful signup }); if (result.error) console.error(result.error.message); // Sign in const { data, error } = await signIn.email({ email: "alice@example.com", password: "securepassword", }); // Access session in a Client Component function Header() { const { data: session, isPending } = useSession(); if (isPending) return ; if (!session) return Sign in; return

Hello, {session.user.name}

; } // Sign out await signOut(); // Request a password reset (link logged to terminal in dev) await requestPasswordReset({ email: "alice@example.com", redirectTo: "/reset-password" }); // Confirm the reset with the token from the URL await resetPassword({ token: searchParams.get("token")!, newPassword: "newpassword" }); ``` -------------------------------- ### Complete Publishing Workflow Commands Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md A concise sequence of commands for maintainers to sync the template, update the version, and publish the package to npm. ```bash cd create-agentic-app npm run sync npm version patch npm publish ``` -------------------------------- ### Define Better Auth Database Schema with Drizzle Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Defines the core Drizzle schema for Better Auth tables (`user`, `session`, `account`, `verification`). Uses `text` primary keys for auth tables as required by Better Auth, and suggests `uuid` for custom app tables. Includes setup for indexes and timestamps. ```typescript import { pgTable, text, timestamp, boolean, index } from "drizzle-orm/pg-core"; // Built-in auth tables (do not rename or remove columns) export const user = pgTable("user", { id: text("id").primaryKey(), // managed by Better Auth name: text("name").notNull(), email: text("email").notNull().unique(), emailVerified: boolean("email_verified").default(false).notNull(), image: text("image"), createdAt: timestamp("created_at").defaultNow().notNull(), updatedAt: timestamp("updated_at").defaultNow().$onUpdate(() => new Date()).notNull(), }, (t) => [ index("user_email_idx").on(t.email) ]); // Extend the schema with your own tables using UUIDs: // import { uuid } from "drizzle-orm/pg-core"; // // export const post = pgTable("post", { // id: uuid("id").primaryKey().defaultRandom(), // title: text("title").notNull(), // authorId: text("author_id").notNull().references(() => user.id, { onDelete: "cascade" }), // createdAt: timestamp("created_at").defaultNow().notNull(), // }); // // Then: pnpm db:generate && pnpm db:migrate ``` -------------------------------- ### Initialize Checkout Session Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/betterauth/polar.md Initiate a checkout session using the `authClient.checkout` method. You can provide product IDs or slugs, and optionally a reference ID for organization tracking. ```APIDOC ## Initialize Checkout Session ### Description Initiate a checkout session using the `authClient.checkout` method. You can provide product IDs or slugs, and optionally a reference ID for organization tracking. ### Method `authClient.checkout(options)` ### Parameters #### Request Body - **products** (string[]) - Required - Array of Polar Product IDs. - **slug** (string) - Optional - The slug of a product defined in the Checkout Config. - **referenceId** (string) - Optional - A reference ID to associate with the checkout, order, and subscription. ### Request Example (Product ID) ```typescript await authClient.checkout({ products: ["e651f46d-ac20-4f26-b769-ad088b123df2"] }); ``` ### Request Example (Slug) ```typescript await authClient.checkout({ slug: "pro" }); ``` ### Request Example (with Organization Support) ```typescript const organizationId = (await authClient.organization.list())?.data?.[0]?.id; await authClient.checkout({ products: ["e651f46d-ac20-4f26-b769-ad088b123df2"], slug: 'pro', referenceId: organizationId }); ``` ``` -------------------------------- ### Publish Package to npm Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Navigate to the package directory and run this command to publish the agentic-app package to npm. ```bash cd create-agentic-app npm publish ``` -------------------------------- ### Dry Run Package Contents Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/README.md Before publishing, use this command to list the files that will be included in the npm package, allowing for verification. ```bash npm pack --dry-run | grep "template/" ``` -------------------------------- ### Create Next.js App Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/ai/streaming.md Use this command to create a new Next.js application with the App Router and Tailwind CSS. ```bash pnpm create next-app@latest my-ai-app ``` -------------------------------- ### Configure Better Auth Server with Drizzle and Email/Password Source: https://context7.com/leonvanzyl/agentic-coding-starter-kit/llms.txt Sets up the Better Auth server using the Drizzle adapter for PostgreSQL. Enables email/password login and email verification. In development, password reset and verification emails are logged to the console; replace these callbacks with a real email provider for production. ```typescript import { betterAuth } from "better-auth"; import { drizzleAdapter } from "better-auth/adapters/drizzle"; import { db } from "./db"; export const auth = betterAuth({ database: drizzleAdapter(db, { provider: "pg" }), emailAndPassword: { enabled: true, sendResetPassword: async ({ user, url }) => { // In production: send an email via Resend, Postmark, etc. // In development: the reset URL is printed to the terminal. console.log(`PASSWORD RESET for ${user.name}: ${url}`); }, }, emailVerification: { sendOnSignUp: true, sendVerificationEmail: async ({ user, url }) => { console.log(`EMAIL VERIFICATION for ${user.name}: ${url}`); }, }, }); // To add Google OAuth: // import { googleProvider } from "better-auth/providers/google"; // export const auth = betterAuth({ // ... // socialProviders: { // google: { // clientId: process.env.GOOGLE_CLIENT_ID!, // clientSecret: process.env.GOOGLE_CLIENT_SECRET!, // }, // }, // }); ``` -------------------------------- ### Grid Layout for Quick Actions Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/DESIGN.md Defines a responsive grid for quick action items, using three columns on medium screens and one on smaller screens. ```html grid grid-cols-1 md:grid-cols-3 gap-4 ``` -------------------------------- ### Drizzle Studio Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Opens the Drizzle Studio GUI for inspecting and interacting with the database. ```bash pnpm db:studio ``` -------------------------------- ### Initialize Checkout Session Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/docs/technical/betterauth/polar.md Initiate a checkout session using the BetterAuth client. This can be done by passing Polar Product IDs or configured slugs. The user will be redirected to the product checkout. ```typescript await authClient.checkout({ // Any Polar Product ID can be passed here products: ["e651f46d-ac20-4f26-b769-ad088b123df2"], // Or, if you setup "products" in the Checkout Config, you can pass the slug slug: "pro", }); ``` -------------------------------- ### Import tw-animate-css Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/create-agentic-app/template/specs/ui-polish-responsive/tasks/task-01-globals-css.md Import the tw-animate-css package after the tailwindcss import to enable its animation utilities. ```css @import "tailwindcss"; @import "tw-animate-css"; ``` -------------------------------- ### Code Formatting Script Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/blob/master/README.md Formats the entire repository according to the defined code style. ```bash pnpm format ```