Agent Case Share
返回 Task
产品建设平台建设

从 0 到 1 搭建一个 AI Agent 行业案例分享平台

一篇记录需求梳理、技术选型、开发执行和后续规划的公众号推文。

平台管理员 · 2026年6月1日

从 0 到 1 搭建一个 AI Agent 行业案例分享平台

最近我想做一个网站，用来分享各行各业使用 AI Agent 完成真实任务的案例。

这个平台的定位不是普通博客，而是一个围绕 任务场景、解决方案、文章沉淀、项目仓库和用户讨论 组织起来的内容社区。

简单来说，它要回答一个问题：

AI Agent 到底能在真实行业里完成哪些任务？别人是怎么做的？有没有文章、代码和复盘可以参考？

这篇文章整理一下我从需求梳理、技术选型，到最终完成第一个可运行 MVP 的全过程。

一、最初的需求

最开始的想法比较清晰：

我需要一个网站，主要用于分享各种使用 AI Agent 完成行业任务的 case。

核心需求包括：

  1. 用户可以注册、登录
  2. 用户可以发布 AI Agent 项目案例
  3. 一个 Task 可以由多篇文章组成
  4. 支持对文章或案例进行评论
  5. 支持发布项目仓库链接
  6. 支持行业分类、标签、搜索
  7. 后续可以扩展成更完整的 AI Agent 案例社区

这里面最重要的概念是 Task。

一个 Task 不是一篇文章，而是一个完整任务案例。比如：

  • 用 AI Agent 自动完成客服质检
  • 用 AI Agent 辅助生成经营分析周报
  • 用 AI Agent 整理法律文书
  • 用 AI Agent 自动分析销售线索

每个 Task 下面可以有多篇文章，用来拆解：

  • 业务背景
  • Agent 工作流
  • 使用的模型和工具
  • Prompt / Workflow 设计
  • 项目仓库
  • 效果复盘
  • 遇到的问题

所以，这个平台更像是一个面向 AI Agent 实践者的案例库。

二、技术选型：为什么选择 Next.js

一开始我考虑过 Django、FastAPI、Next.js 等方案。

Django 的优点是后台管理、用户系统、ORM 都非常成熟，适合内容平台。但对于当前阶段来说，我更想要一个轻量、快速、前后端一体的方案。

最后选择了：

Next.js
TypeScript
Prisma
SQLite
NextAuth.js
Tailwind CSS
Markdown

这个组合的好处是：

  1. 前后端放在一个项目里，开发体验简单
  2. 页面、接口、数据库访问可以统一管理
  3. 本地开发只需要 Node.js，不需要一开始就安装 MySQL
  4. SQLite 足够支撑 MVP
  5. 后续上线可以切换 PostgreSQL
  6. Next.js 适合做内容展示、用户中心、发布表单和评论系统

最终确定的 MVP 技术栈是：

框架：Next.js
语言：TypeScript
数据库：SQLite
ORM：Prisma
认证：NextAuth.js
样式：Tailwind CSS
内容格式：Markdown

本地开发阶段只需要：

Node.js
npm
Git
VS Code / Cursor

暂时不需要安装 MySQL、PostgreSQL 或 Python。

三、项目初始化过程

项目目录是：

D:\Agent_case_share_platform\Agent_share

一开始使用 create-next-app 初始化项目时遇到了第一个问题：

当前目录名里有大写字母，create-next-app 不允许项目包名包含大写字母。

于是先在一个小写子目录里初始化：

npx create-next-app@latest agent-share-platform

之后再把项目文件移动到根目录。

第二个问题是机器上没有安装 pnpm，所以改用 npm 管理依赖。

安装基础依赖后，又补充了项目需要的包：

npm install @prisma/client next-auth bcryptjs react-markdown remark-gfm lucide-react clsx
npm install -D prisma tsx

其中：

  • @prisma/client：数据库访问
  • next-auth：登录认证
  • bcryptjs：密码加密
  • react-markdown：Markdown 渲染
  • remark-gfm：支持 GitHub 风格 Markdown
  • lucide-react：图标
  • clsx：样式 class 合并
  • tsx：执行 TypeScript seed 脚本

四、数据库模型设计

平台的核心模型包括：

User
Task
Article
Repository
Comment
Tag
TaskTag

简单理解：

  • User：用户
  • Task：一个 AI Agent 任务案例
  • Article：Task 下的文章
  • Repository：关联项目仓库
  • Comment：评论
  • Tag：标签
  • TaskTag：Task 和标签的关联表

Task 是平台的核心。

一个 Task 可以包含：

标题
摘要
行业
难度
Agent 技术栈
封面图
多篇文章
多个项目仓库
多个评论
多个标签

文章使用 Markdown 存储，方便后续支持技术文档、代码块、流程说明等内容。

五、Prisma 和 SQLite

本地数据库采用 SQLite。

.env 配置如下：

DATABASE_URL="file:./dev.db"
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="replace-this-development-secret"

使用 Prisma 创建数据库：

npx prisma db push

再写入 seed 数据：

npm run db:seed

seed 数据里包含了演示管理员账号：

admin@example.com
demo123456

以及两个示例案例：

  1. AI Agent 自动完成客服质检与改进建议
  2. AI Agent 生成经营分析周报初稿

这样项目启动后，不是一个空网站，而是可以直接看到真实案例结构。

六、功能实现

目前已经完成了一个可运行的 MVP。

1. 首页

首页展示平台定位、核心数据统计和最新案例。

包括：

  • 已发布 Task 数量
  • 文章数量
  • 项目仓库数量
  • 评论数量
  • 最新 AI Agent 案例

2. 案例库

案例库支持：

  • 浏览所有公开 Task
  • 按行业筛选
  • 按关键词搜索
  • 查看文章数量和仓库数量

3. Task 详情页

Task 详情页展示：

  • 案例标题
  • 行业
  • 难度
  • 标签
  • Agent 技术栈
  • 多篇文章列表
  • 项目仓库链接
  • Task 评论区

4. 文章阅读页

文章页支持 Markdown 渲染。

每篇文章都归属于一个 Task，并支持独立评论。

5. 用户注册和登录

使用 NextAuth.js 的 Credentials 登录方式。

注册后，用户可以成为作者并发布案例。

6. 发布案例

发布页支持一次性创建：

Task
首篇文章
项目仓库链接
标签

这相当于先做了一个最短创作路径。

后续可以继续扩展成：

  • 多文章编辑
  • 草稿箱
  • 审核流
  • 图片上传
  • 附件上传
  • 项目版本管理

7. 评论系统

现在支持：

  • 对 Task 评论
  • 对 Article 评论

评论前需要登录。

七、开发过程中遇到的问题

1. create-next-app 项目名限制

因为当前目录名里有大写字母，初始化失败。

解决方式是先在小写目录初始化，再移动到目标目录。

2. pnpm 不存在

初始化时选择了 pnpm，但本机没有安装 pnpm。

解决方式是改用 npm。

3. React 版本依赖冲突

模板生成时写入的 React 版本和 npm registry 当前版本不一致，导致依赖解析失败。

解决方式是把：

"react": "19.2.4",
"react-dom": "19.2.4"

修正为当前可安装版本：

"react": "19.2.6",
"react-dom": "19.2.6"

4. Prisma 7 配置变化

Prisma 最新版本改了数据库 URL 的配置方式，不再支持旧 schema 写法。

为了更快完成 MVP，改用 Prisma 6 稳定版本：

npm install @prisma/client@6.19.0
npm install -D prisma@6.19.0

这样可以继续使用更简单的 SQLite 配置方式。

5. Next.js 远程图片配置

示例案例使用了 Unsplash 图片，需要在 next.config.ts 中允许远程图片域名：

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "images.unsplash.com",
    },
  ],
}

6. 登录页 useSearchParams 构建问题

Next.js 构建时报错，提示 useSearchParams 需要 Suspense 边界。

解决方式是把 callbackUrl 从服务端页面参数传给客户端登录表单，避免在客户端直接读取 search params。

八、最终验证结果

项目完成后，执行了：

npm run lint
npm run build

结果都通过。

本地开发服务也已经启动：

http://127.0.0.1:3000

可以直接访问网站。

九、当前 MVP 已完成内容

目前已经完成：

Next.js + TypeScript + Tailwind 项目
Prisma + SQLite 数据库
用户注册
用户登录
Task 案例列表
Task 详情页
文章阅读页
Markdown 渲染
项目仓库展示
Task 评论
文章评论
案例发布表单
Seed 示例数据
本地开发服务

常用命令：

npm run dev
npm run build
npm run lint
npm run db:push
npm run db:seed
npm run db:studio

十、下一步可以继续扩展什么

这个版本已经是一个可运行的 MVP，但距离一个完整平台还有很多可以继续完善的地方。

后续可以继续做：

  1. 文章编辑和删除
  2. Task 多文章管理
  3. 草稿 / 发布 / 隐藏状态
  4. 管理员后台
  5. 评论审核和删除
  6. 图片上传
  7. 附件上传
  8. GitHub 仓库信息自动抓取
  9. 全文搜索
  10. 用户主页
  11. 收藏和点赞
  12. 案例审核机制
  13. Markdown 编辑器预览
  14. AI 自动生成摘要、标签和目录
  15. PostgreSQL 生产数据库切换
  16. Docker 部署

总结

这次从 0 到 1 搭建了一个 AI Agent 行业案例分享平台。

它的核心思路是：

用 Task 承载一个真实任务案例，用多篇文章拆解完整过程，用项目仓库提供可复用代码，用评论沉淀讨论和反馈。

技术上选择了 Next.js 作为轻量全栈方案，配合 Prisma 和 SQLite，快速完成了一个可以本地运行、可以注册登录、可以发布内容、可以评论的 MVP。

相比一开始就引入复杂后端、MySQL、后台系统，这种方案更适合早期验证产品方向。

先让平台跑起来，再逐步增强内容管理、搜索、审核、上传和部署能力。