ai-chat

Build a complete AI chat application with database persistence, chat list management, and automatic title generation.

9 stars

Best use case

ai-chat is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Build a complete AI chat application with database persistence, chat list management, and automatic title generation.

Teams using ai-chat should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ai-chat/SKILL.md --create-dirs "https://raw.githubusercontent.com/andrelandgraf/fullstackrecipes/main/skills/ai-chat/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/ai-chat/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How ai-chat Compares

Feature / Agentai-chatStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Build a complete AI chat application with database persistence, chat list management, and automatic title generation.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# AI Chat

Build a complete AI chat application with database persistence, chat list management, and automatic title generation.

## Prerequisites

Complete these recipes first (in order):

### Type-Safe Environment Configuration with better-env

Use better-env config modules for type-safe server/public env access, feature flags, and either-or credential constraints.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/config-schema-setup
```

### Neon + Drizzle Setup

Connect a Next.js app to Neon Postgres using Drizzle ORM with optimized connection pooling for Vercel serverless functions.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/neon-drizzle-setup
```

### Next.js on Vercel

Create a Next.js app running on Bun, configure the development environment, and deploy to Vercel with automatic deployments on push.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
```

### Shadcn UI & Theming

Add Shadcn UI components with dark mode support using next-themes. Includes theme provider and CSS variables configuration.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/shadcn-ui-setup
```

### Authentication

Complete authentication system with Better Auth, email verification, password reset, protected routes, and account management.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/authentication
```

### URL State with nuqs

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.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup
```

### Pino Logging Setup

Configure structured logging with Pino. Outputs human-readable colorized logs in development and structured JSON in production for log aggregation services.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/pino-logging-setup
```

### Workflow Development Kit Setup

Install and configure the Workflow Development Kit for resumable, durable AI agent workflows with step-level persistence, stream resumption, and agent orchestration.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/workflow-setup
```

## Cookbook - Complete These Recipes in Order

### AI Chat Persistence with Neon

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.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/ai-chat-persistence
```

### Chat List & Management

Build a chat list page with search, rename, and delete functionality. Uses nuqs for URL-synced filters and deep-linkable modal dialogs.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/chat-list
```

### Automatic Chat Naming

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.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/chat-naming
```

Related Skills

chat-naming

9
from andrelandgraf/fullstackrecipes

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.

chat-list

9
from andrelandgraf/fullstackrecipes

Build a chat list page with search, rename, and delete functionality. Uses nuqs for URL-synced filters and deep-linkable modal dialogs.

ai-chat-persistence

9
from andrelandgraf/fullstackrecipes

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.

url-state-management

9
from andrelandgraf/fullstackrecipes

Sync React state to URL query parameters for shareable filters, search, and deep-linkable dialogs with nuqs.

testing

9
from andrelandgraf/fullstackrecipes

Complete testing setup with Neon database branching, Playwright browser tests, integration tests, and unit tests. Isolated branches with automatic TTL cleanup.

stripe-subscriptions

9
from andrelandgraf/fullstackrecipes

Complete subscription billing system with Stripe integration, feature flags for plan gating, webhook handling, and billing portal.

ralph-loop

9
from andrelandgraf/fullstackrecipes

Complete setup for automated agent-driven development. Define features as user stories with testable acceptance criteria, then run AI agents in a loop until all stories pass.

observability-monitoring

9
from andrelandgraf/fullstackrecipes

Complete observability stack with structured logging, error tracking, and web analytics.

env-management

9
from andrelandgraf/fullstackrecipes

Complete better-env workflow: typed config schema, Vercel sync, and prebuild validation.

base-app-setup

9
from andrelandgraf/fullstackrecipes

Complete setup guide for a Next.js app with Shadcn UI, Neon Postgres, Drizzle ORM, and AI SDK.

authentication

9
from andrelandgraf/fullstackrecipes

Complete authentication system with Better Auth, email verification, password reset, protected routes, and account management.

ai-agent-workflow

9
from andrelandgraf/fullstackrecipes

Build resumable multi-agent workflows with durable execution, tool loops, and automatic stream recovery on client reconnection.