AI Chat Demo

一个功能完整的 AI 聊天界面演示项目，集成了前端 React 应用和后端 Python FastAPI 服务，支持多种 AI 模型、实时流式响应、工具调用和思维链推理等高级功能。

✨ 功能特性

🧠 智能对话

• 多模型支持 - 支持 GPT-5 Mini、Gemini 2.5 Flash、DeepSeek V3.2 等多种 AI 模型
• 实时流式响应 - 基于 Vercel AI SDK 的流式聊天体验
• 网络搜索 - 集成 Perplexity 进行实时网络搜索
• Markdown 渲染 - 支持代码高亮、表格、列表等格式
• 文件上传 - 支持图片、PDF、文档等多种文件类型
• 拖拽上传 - 直观的文件拖拽上传体验

🤖 AI 功能展示

• 思索过程 - 实时显示 AI 的思考和推理过程
• 思维链推理 - 展示复杂问题的分步解决过程
• 工具调用 - 可视化 AI 工具使用过程和结果
• 多步骤任务 - 支持 AI 执行复杂的多步骤任务
• 天气查询 - 内置天气查询工具演示

💫 现代化界面

• 响应式设计 - 完美适配桌面和移动设备
• 深色模式 - 支持明暗主题切换
• 平滑动画 - 优雅的过渡和微交互效果
• 无障碍支持 - 符合 WCAG 标准的可访问性设计
• AI Elements - 完整的 AI 专用组件库

🛠 技术栈

前端

• 框架: Next.js 15.5.4 (App Router)
• React: 19.1.0
• TypeScript: 5.x
• 样式: Tailwind CSS 4.x
• AI SDK: Vercel AI SDK (@ai-sdk/react)
• 组件库: Radix UI + shadcn/ui + AI Elements
• 代码质量: Biome (ESLint + Prettier 替代方案)
• 包管理: pnpm

后端

• 框架: FastAPI
• AI 集成: LangChain + LangGraph
• 模型支持:
  • DeepSeek (通过 OpenRouter)
  • Perplexity (网络搜索)
• 环境管理: uv (Python 包管理器)
• 日志: Loguru
• 配置: python-dotenv

🚀 快速开始

环境准备

1. Node.js - 确保安装了 Node.js 18+
2. Python - 确保安装了 Python 3.13+
3. pnpm - 推荐使用 pnpm 作为包管理器
4. uv - Python 包管理器

安装依赖

前端依赖

pnpm install

后端依赖

uv sync

环境配置

1. 创建环境变量文件：

# 在项目根目录创建 .env 文件
touch .env

2. 在 .env 中配置你的 API Key：

OPENAI_API_KEY=your_openai_api_key_here

💡 获取 API Key:

• 访问 OpenAI Platform 获取 OpenAI API 密钥
• 或者访问 OpenRouter 获取统一的 API 密钥

启动服务

启动后端服务

# 使用 uv 启动 Python 后端
pnpm python_server
# 或者直接使用 uv
uv run uvicorn src.api.main:app --reload

启动前端服务

# 新开一个终端窗口
pnpm dev

访问 http://localhost:3000 查看应用。

📁 项目结构

ai-chat-demo/
├── src/
│   ├── api/                    # Python 后端服务
│   │   ├── main.py            # FastAPI 主应用
│   │   ├── agent.py           # LangGraph AI 代理
│   │   └── utils.py           # 工具函数
│   ├── app/                   # Next.js App Router
│   │   ├── layout.tsx         # 根布局
│   │   ├── page.tsx           # 聊天页面
│   │   └── globals.css        # 全局样式
│   ├── components/
│   │   ├── ui/                # shadcn/ui 基础组件
│   │   └── ai-elements/       # AI 专用组件库
│   │       ├── conversation.tsx     # 对话容器
│   │       ├── message.tsx          # 消息组件
│   │       ├── prompt-input.tsx     # 输入框组件
│   │       ├── reasoning.tsx        # 思索过程组件
│   │       ├── chain-of-thought.tsx # 思维链组件
│   │       ├── tool.tsx             # 工具调用组件
│   │       ├── code-block.tsx       # 代码块组件
│   │       └── ...                  # 其他 AI 组件
│   └── lib/
│       └── utils.ts           # 工具函数
├── pyproject.toml             # Python 项目配置
├── package.json               # Node.js 项目配置
├── components.json            # shadcn/ui 配置
├── biome.json                 # Biome 配置
├── next.config.ts             # Next.js 配置
└── README.md                  # 项目说明

🎯 核心功能说明

AI Elements 组件系统

项目使用了一套完整的 AI Elements 组件库，每个组件都针对特定的 AI 功能进行了优化：

• Conversation - 智能对话容器，自动滚动管理
• Message - 用户和助手消息展示
• PromptInput - 支持文件上传的智能输入框
• Reasoning - AI 思索过程的可视化展示
• ChainOfThought - 复杂推理过程的步骤化展示
• Tool - 工具调用过程的详细展示
• Response - 流式响应内容展示
• Sources - 网络搜索来源展示

后端 AI 代理

• LangGraph 集成 - 使用 LangGraph 构建复杂的 AI 工作流
• 多模型支持 - 支持 DeepSeek 和 Perplexity 模型
• 工具调用 - 内置天气查询等工具
• 流式响应 - 实时流式输出，支持思索过程和工具调用
• 网络搜索 - 集成 Perplexity 进行实时网络搜索

文件上传支持

• 支持多种文件类型：图片、PDF、文档等
• 拖拽上传和点击上传
• 实时预览上传的图片
• 文件大小和数量限制

🔧 开发命令

前端命令

# 启动开发服务器 (使用 Turbopack)
pnpm dev

# 构建生产版本 (使用 Turbopack)
pnpm build

# 启动生产服务器
pnpm start

# 代码检查
pnpm lint

# 代码格式化
pnpm format

后端命令

# 启动 Python 后端服务
pnpm python_server

# 或者直接使用 uv
uv run uvicorn src.api.main:app --reload

# 安装新的 Python 依赖
uv add package_name

# 同步依赖
uv sync

🎨 自定义配置

添加新的 AI 工具

在 src/api/agent.py 中添加新工具：

@tool
def new_tool(param: str):
    """新工具的描述
    
    Args:
        param: 参数描述
    """
    return f"工具执行结果: {param}"

# 在 graph 中添加工具
graph.add_node("tools", ToolNode([get_weather, new_tool]))

添加新的 AI 模型

在 src/app/page.tsx 中的 models 数组添加新模型：

const models = [
  {
    name: "新模型名称",
    value: "provider/model-name",
  },
  // ... 其他模型
];

自定义 AI Elements

所有 AI Elements 组件都支持高度自定义，可以通过 props 修改外观和行为：

<Reasoning isStreaming={isLoading} defaultOpen={true}>
  <ReasoningTrigger />
  <ReasoningContent>自定义思索内容</ReasoningContent>
</Reasoning>

🌱 部署

前端部署 (Vercel)

1. 将代码推送到 GitHub
2. 在 Vercel 中导入项目
3. 配置环境变量 OPENAI_API_KEY
4. 自动部署完成

后端部署

后端可以部署到任何支持 Python 的平台：

# 构建
uv build

# 运行
uv run uvicorn src.api.main:app --host 0.0.0.0 --port 8000

Docker 部署

# 前端 Dockerfile
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

# 后端 Dockerfile
FROM python:3.13-slim
WORKDIR /app
COPY pyproject.toml uv.lock ./
RUN pip install uv && uv sync
COPY . .
EXPOSE 8000
CMD ["uv", "run", "uvicorn", "src.api.main:app", "--host", "0.0.0.0", "--port", "8000"]

📝 开发说明

• 项目使用 Biome 进行代码格式化和检查
• 所有组件都支持 TypeScript 类型检查
• 遵循 shadcn/ui 组件库设计规范
• 使用 Tailwind CSS 进行样式管理
• 后端使用 uv 进行 Python 包管理
• 支持 热重载 开发体验

🔗 相关链接

• Next.js 文档
• Vercel AI SDK
• shadcn/ui
• Radix UI
• Tailwind CSS
• FastAPI 文档
• LangChain 文档
• LangGraph 文档
• uv 文档

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License