ai-chat

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

AI Chat

AI聊天

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

构建一个具备数据库持久化、聊天列表管理和自动标题生成功能的完整AI聊天应用。

Prerequisites

前置要求

Complete these recipes first (in order):

请按顺序完成以下步骤：

Type-Safe Environment Configuration

类型安全的环境配置

Type-safe environment variable validation using Zod with a Drizzle-like schema API. Supports server/public fields, feature flags, either-or constraints, and client-side protection.

bash

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

使用Zod和类Drizzle的Schema API实现类型安全的环境变量验证。支持服务器/公共字段、功能标志、二选一约束以及客户端保护。

bash

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

Neon + Drizzle Setup

Neon + Drizzle 配置

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应用连接到Neon Postgres，使用Drizzle ORM并针对Vercel无服务器函数优化连接池。

bash

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

Next.js on Vercel

Vercel 上的 Next.js

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

创建一个基于Bun运行的Next.js应用，配置开发环境，并部署到Vercel，实现推送时自动部署。

bash

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

Shadcn UI & Theming

Shadcn UI 与主题配置

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

添加Shadcn UI组件，使用next-themes支持暗黑模式。包含主题提供器和CSS变量配置。

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

使用Better Auth搭建完整的身份验证系统，包含邮箱验证、密码重置、受保护路由和账户管理功能。

bash

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

URL State with nuqs

基于nuqs的URL状态管理

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

将React状态同步到URL查询参数，实现可分享的筛选器、搜索查询和模态对话框的深度链接。在浏览器前进/后退导航时保留UI状态。

bash

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

Pino Logging Setup

Pino 日志配置

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

使用Pino配置结构化日志。在开发环境输出人类可读的彩色日志，在生产环境输出结构化JSON日志，以便日志聚合服务处理。

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

安装并配置工作流开发工具包（Workflow Development Kit），用于支持可恢复、持久化的AI Agent工作流，具备步骤级持久化、流恢复和Agent编排功能。

bash

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

Cookbook - Complete These Recipes in Order

操作指南 - 按顺序完成以下步骤

AI Chat Persistence with Neon

基于Neon的AI聊天持久化

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

将AI聊天对话持久化到Neon Postgres，全面支持AI SDK消息组件（包括工具、推理和流处理）。使用UUID v7实现可按时间排序的ID。

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

构建具备搜索、重命名和删除功能的聊天列表页面。使用nuqs实现与URL同步的筛选器和可深度链接的模态对话框。

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

使用轻量LLM从第一条消息生成描述性的聊天标题。作为主响应后的后台工作流步骤运行，避免延迟用户体验。

bash

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