# fullstackrecipes > Skills and setup guides for building full stack AI apps with Next.js, React, TypeScript, Vercel, Neon, Drizzle, Better Auth, Resend, Stripe, AI SDK, Workflow Development Kit, and Bun. ## What is fullstackrecipes? fullstackrecipes provides step-by-step setup guides ("recipes") for adding features to your Next.js application. Each recipe is designed to be copy-pasted into your AI coding assistant (Cursor, Claude, Copilot, etc.) for implementation. Key features: - Complete, production-ready code patterns - Shadcn registry for installable utilities - Cookbooks that bundle related recipes together - Templates that represent the final state - Skills that document best practices for working with the stack ## How to Use 1. **Fetch the Markdown**: Every page has a Markdown twin — append `.md` to any URL (for example `curl https://fullstackrecipes.com/recipes/neon-drizzle-setup.md`) and hand the output to your AI assistant. 2. **Skills**: Install the agent skills to your coding agent for workflows and dev best practices via `bunx skills add`. 3. **Shadcn Registry**: Install reusable utilities via `bunx shadcn@latest add`. --- ## Fetch recipes as Markdown Every page on the site has a Markdown twin. Append `.md` to any URL to get the raw content for your coding agent — no MCP server required. ```bash # This index curl https://fullstackrecipes.com/llms.txt # Any recipe or cookbook (use the slugs listed below) curl https://fullstackrecipes.com/recipes/.md # This landing page as Markdown curl https://fullstackrecipes.com/index.md ``` --- ## Cookbooks Cookbooks are curated bundles of multiple recipes for complete feature implementations. - [Base App Setup](https://fullstackrecipes.com/recipes/base-app-setup.md) - Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK. - [Environment Variable Management](https://fullstackrecipes.com/recipes/env-management.md) - Complete better-env workflow: typed config schema, Vercel sync, and prebuild validation. - [Observability & Monitoring](https://fullstackrecipes.com/recipes/observability-monitoring.md) - Complete observability stack with structured logging, error tracking, and web analytics. - [Testing](https://fullstackrecipes.com/recipes/testing.md) - Complete testing setup with Neon database branching, Playwright browser tests, integration tests, and unit tests. Isolated branches with automatic TTL cleanup. - [Ralph Loop](https://fullstackrecipes.com/recipes/ralph-loop.md) - Run a coding agent in an autonomous loop via a /ralph slash command. A preflight check verifies every CLI is installed, linked, and authenticated, then the agent breaks a wide prompt into tasks with first-principles thinking and builds, tests, and ships each one through the dev workflow. - [Authentication](https://fullstackrecipes.com/recipes/authentication.md) - Complete authentication system with Better Auth, email verification, password reset, protected routes, and account management. - [URL State Management](https://fullstackrecipes.com/recipes/url-state-management.md) - Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs. - [Stripe Subscriptions](https://fullstackrecipes.com/recipes/stripe-subscriptions.md) - Complete subscription billing system with Stripe integration, feature flags for plan gating, webhook handling, and billing portal. - [AI Chat](https://fullstackrecipes.com/recipes/ai-chat.md) - Build a complete AI chat application with database persistence, chat list management, and automatic title generation. - [Multi-Agent Workflows](https://fullstackrecipes.com/recipes/ai-agent-workflow.md) - Build resumable multi-agent workflows with durable execution, tool loops, and automatic stream recovery on client reconnection. --- ## Recipes - [Building with fullstackrecipes](https://fullstackrecipes.com/recipes/use-fullstackrecipes.md) - Discover and follow recipes by fetching their Markdown for setup guides, skills, and cookbooks. The meta-skill for using fullstackrecipes effectively. - [Next.js on Vercel](https://fullstackrecipes.com/recipes/nextjs-on-vercel.md) - Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push. - [Code Health, Linting & Formatting](https://fullstackrecipes.com/recipes/code-health-setup.md) - Configure Prettier for formatting, TypeScript for typechecking, and Fallow for code health (dead code, duplication, complexity, architecture drift). Skips ESLint/Biome to avoid config complexity. - [AI Coding Agent Configuration](https://fullstackrecipes.com/recipes/agent-setup.md) - Configure AI coding agents like Cursor, GitHub Copilot, or Claude Code with project-specific patterns, coding guidelines, and MCP servers for consistent AI-assisted development. - [Assertion Helper](https://fullstackrecipes.com/recipes/assert.md) - TypeScript assertion function for runtime type narrowing with descriptive error messages. Based on tiny-invariant. - [Type-Safe Environment Configuration with better-env](https://fullstackrecipes.com/recipes/config-schema-setup.md) - Use better-env config modules for type-safe server/public env access, feature flags, and either-or credential constraints. - [Environment Variable Management with better-env + Vercel](https://fullstackrecipes.com/recipes/env-workflow-vercel.md) - Sync local env files with Vercel environments using better-env pull/load commands while preserving local overrides. - [Build-Time Environment Validation with better-env](https://fullstackrecipes.com/recipes/env-validation.md) - Validate all env-backed config modules with better-env before build and in CI. - [Neon + Drizzle Setup](https://fullstackrecipes.com/recipes/neon-drizzle-setup.md) - Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions. - [Drizzle Queries](https://fullstackrecipes.com/recipes/drizzle-queries.md) - Write type-safe database queries with Drizzle ORM. Covers select, insert, update, delete, relational queries, and adding new tables. - [Shadcn UI & Theming](https://fullstackrecipes.com/recipes/shadcn-ui-setup.md) - Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration. - [Shiki Code Blocks](https://fullstackrecipes.com/recipes/shiki-code-blocks.md) - Syntax highlight code blocks with Shiki. Supports server-side rendering in RSC and automatic light/dark theme switching. - [AI SDK & Simple Chat](https://fullstackrecipes.com/recipes/ai-sdk-setup.md) - Install the Vercel AI SDK with AI Elements components. Build a streaming chat interface with the useChat hook. - [Pino Logging Setup](https://fullstackrecipes.com/recipes/pino-logging-setup.md) - Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services. - [Sentry Setup](https://fullstackrecipes.com/recipes/sentry-setup.md) - Configure Sentry for error tracking, performance monitoring, and log aggregation. Integrates with Pino to forward logs to Sentry automatically. - [Vercel Web Analytics](https://fullstackrecipes.com/recipes/vercel-analytics-setup.md) - Add privacy-focused web analytics with Vercel Web Analytics. Track page views, visitors, and custom events with zero configuration. - [OG Image Generation](https://fullstackrecipes.com/recipes/og-image-generation.md) - Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time. - [Logging Best Practices](https://fullstackrecipes.com/recipes/logging-best-practices.md) - Use structured logging with Pino throughout your application. Covers log levels, context, and workflow-safe logging patterns. - [Sentry Best Practices](https://fullstackrecipes.com/recipes/sentry-best-practices.md) - Capture exceptions, add context, create performance spans, and use structured logging with Sentry. - [Analytics Best Practices](https://fullstackrecipes.com/recipes/analytics-best-practices.md) - Track custom events and conversions with Vercel Web Analytics. Covers common events, form tracking, and development testing. - [Resend Setup](https://fullstackrecipes.com/recipes/resend-setup.md) - Configure Resend for transactional emails like password resets and email verification. - [Neon Test Branches](https://fullstackrecipes.com/recipes/neon-test-branches.md) - Create isolated Neon database branches for testing. Schema-only branches with auto-cleanup via TTL, test server orchestration, and environment variable management. - [Unit Tests with Bun](https://fullstackrecipes.com/recipes/unit-tests.md) - Configure unit testing with Bun's built-in test runner. Fast, Jest-compatible syntax, co-located test files, and mocking support. - [Integration Tests](https://fullstackrecipes.com/recipes/integration-tests.md) - Test API routes by importing handlers directly with Bun's test runner. Fast, reliable tests without HTTP overhead. - [Browser Tests with Playwright](https://fullstackrecipes.com/recipes/playwright-tests.md) - End-to-end browser testing with Playwright. Test user interactions, form validation, navigation, and visual feedback with full browser automation. - [Testing Best Practices](https://fullstackrecipes.com/recipes/testing-best-practices.md) - Testing strategy and workflow. Tests run in parallel with isolated data per suite. Prioritize Playwright for UI, integration tests for APIs, unit tests for logic. - [Ralph Loop Workflow](https://fullstackrecipes.com/recipes/ralph-loop-workflow.md) - Run a coding agent in an autonomous loop via a /ralph slash command. A preflight check confirms every CLI is installed, linked, and authenticated before the agent breaks a wide prompt into tasks and builds, tests, and ships each one. - [Better Auth Setup](https://fullstackrecipes.com/recipes/better-auth-setup.md) - Add user authentication using Better Auth with Drizzle ORM and Neon Postgres. Base setup with email/password authentication. - [Better Auth Emails](https://fullstackrecipes.com/recipes/better-auth-emails.md) - Add email verification, password reset, and account management emails to Better Auth using Resend. - [Better Auth Components](https://fullstackrecipes.com/recipes/better-auth-components.md) - Add UI components and pages for authentication flows including sign in, sign up, forgot password, reset password, and email verification. - [Better Auth Profile & Account](https://fullstackrecipes.com/recipes/better-auth-profile.md) - Add a complete account settings page with profile editing, password changes, email updates, session management, and account deletion. - [Better Auth Protected Routes](https://fullstackrecipes.com/recipes/better-auth-protected-routes.md) - Add server-side route protection to enforce authentication on specific pages while keeping others public. - [Authentication Best Practices](https://fullstackrecipes.com/recipes/authentication-best-practices.md) - Use Better Auth for client and server-side authentication. Covers session access, protected routes, sign in/out, and fetching user data. - [Feature Flags with Flags SDK](https://fullstackrecipes.com/recipes/feature-flags-setup.md) - Implement feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration. - [URL State with nuqs](https://fullstackrecipes.com/recipes/nuqs-setup.md) - Sync React state to URL query parameters for shareable filters, search queries, and deep links to modal dialogs. Preserves UI state on browser back/forward navigation. - [URL State Patterns](https://fullstackrecipes.com/recipes/url-state-patterns.md) - Manage React state in URL query parameters with nuqs. Covers Suspense boundaries, parsers, clearing state, and deep-linkable dialogs. - [AI Chat Persistence with Neon](https://fullstackrecipes.com/recipes/ai-chat-persistence.md) - Persist AI chat conversations to Neon Postgres with full support for AI SDK message parts including tools, reasoning, and streaming. Uses UUID v7 for chronologically-sortable IDs. - [Chat List & Management](https://fullstackrecipes.com/recipes/chat-list.md) - Build a chat list page with search, rename, and delete functionality. Uses nuqs for URL-synced filters and deep-linkable modal dialogs. - [Stripe Subscriptions DB Sync](https://fullstackrecipes.com/recipes/stripe-sync.md) - Complete subscription system with Stripe, Vercel Flags for plan configuration, webhook handling for syncing subscription state to Postgres, usage tracking, and billing portal integration. - [Workflow Development Kit Setup](https://fullstackrecipes.com/recipes/workflow-setup.md) - Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration. - [Resumable AI Response Streams](https://fullstackrecipes.com/recipes/resumable-ai-streams.md) - Add automatic stream recovery to AI chat with WorkflowChatTransport, start/resume API endpoints, and the useResumableChat hook. - [Custom Durable Agent](https://fullstackrecipes.com/recipes/custom-durable-agent.md) - Build a custom durable AI agent with full control over streamText options, provider configs, and tool loops. Compatible with the Workflow Development Kit. - [Workflow Best Practices](https://fullstackrecipes.com/recipes/workflow-best-practices.md) - Create and run durable workflows with steps, streaming, and agent execution. Covers starting, resuming, and persisting workflow results. - [Automatic Chat Naming](https://fullstackrecipes.com/recipes/chat-naming.md) - Generate descriptive chat titles from the first message using a fast LLM. Runs as a background workflow step after the main response to avoid delaying the experience. --- ## Shadcn Registry Install reusable utilities directly: ```bash bunx shadcn@latest add https://fullstackrecipes.com/r/assert.json bunx shadcn@latest add https://fullstackrecipes.com/r/logger.json bunx shadcn@latest add https://fullstackrecipes.com/r/use-resumable-chat.json bunx shadcn@latest add https://fullstackrecipes.com/r/durable-agent.json bunx shadcn@latest add https://fullstackrecipes.com/r/workflow-stream.json ``` --- ## Links - Homepage: https://fullstackrecipes.com - Index: https://fullstackrecipes.com/llms.txt