我做了一个 AI 原生的个人网站模板，全套开源

在这里插入图片描述

不是又一个 “Next.js 简历站”。
Next.js 16 + React 19 + AI SDK 6 + WebGPU，一个能跟你对话、能生成 UI、能看到 Agent 在思考的个人站点模板。
一条命令跑起来，代码全开源。

先看效果

在线 Demo：conorliu.com

开源仓库：hyxnj666-creator/ai-site-template

在这里插入图片描述

git clone https://github.com/hyxnj666-creator/ai-site-template.git
cd ai-site-template
pnpm install
pnpm dev

配个 OPENAI_API_KEY 就能跑，数据库是可选的，没配也会自动降级到 JSON 文件。

为什么又做一个个人网站模板

2025-2026，个人网站已经烂大街了。Vercel 一键部署、shadcn 复制粘贴、Framer Motion 加点动画，看起来都差不多。

但当我真的想把"AI 工程能力"放到自己站上的时候，发现能参考的模板几乎没有：

简历站只会堆静态内容
Portfolio 站只有一个 Chatbot 挂件
"AI 原生"的样板，大多停留在 streamText 的官方例子

我想要的是：

一个真的把 AI 作为一等公民的个人网站。
不是装饰性的 chat 气泡，而是每一个交互都能让 AI 参与、推理、渲染。

所以我做了一套——自己在用（conorliu.com），也做成了开源模板（ai-site-template），任何人都可以 fork 改成自己的。

它和其他个人网站模板有什么不同

先看 /ai 这一级导航——这里是整个站的 AI 能力矩阵：Neural Chat / Mission Control / Sentient Flow（Workflow）/ Knowledge Archive / Protocol Bridge（MCP）/ Model Arena / Agent OS Console——每一张卡都是一个可以独立走通的 AI 模块：

在这里插入图片描述

下面挨个拆开讲。

1. Generative UI：AI 不止会"说"，还会"画"

传统的 AI 网站：你问一句，它回一段话。

这里的 AI 会根据你的意图调用工具、生成 UI 组件：

你说"切到深色主题"→ AI 调用 switchTheme 工具，主题直接切过去
你说"带我去看技能图"→ AI 导航到 /about，顺手把技能雷达图渲染出来
你说"做一个登录页 demo"→ Agent 规划、拆步骤、生成 HTML Artifact，实时流式显示

这些不是硬编码的 if-else，是 AI SDK v6 的 tool() 调用机制 + 前端定义的 Generative UI 指令集。

tool({
  description: "Switch site theme between light and dark",
  inputSchema: z.object({ theme: z.enum(["light", "dark"]) }),
  execute: async ({ theme }) => {
    return { action: "theme_switched", theme };
  },
});

AI 决定什么时候调用，前端收到就执行。

2. Agent Mission Control：看到 AI 在思考

/ai/agent 是一个让你看得到 Agent 执行过程的控制台：

在这里插入图片描述

规划 ▸ 产物策略分析           ✓ 完成
执行 ▸ 执行清单              ✓ 完成
     ▸ 并行生成 2 个辅助产物   ▸ 执行中
产物 ▸ HTML Artifact         ✓ 完成
     ▸ Python 片段           ✓ 完成
反思 ▸ 最终答案               ✓ 完成

每一步都是 Server-Sent Events 实时流过来，步骤详情可折叠、可追溯。

技术上做了两个优化：

分级模型调度：规划和最终答复用 gpt-5.4-mini（快、便宜），主产物（HTML、Python）用 gpt-5.4（稳、质量高）
并行辅助产物：多个次要 Artifact 用 Promise.all 同时生成，比串行快 2-3 倍

在个人网站里能看到这种"Agent 执行可视化"，目前基本没见过。

3. WebGPU 粒子 + Canvas 2D 星座：两套背景叠着跑

Awwwards-level 的个人站经常会玩背景效果。大多数人用的是 Three.js + 现成 Shader。

这里用的是更轻的组合：

WebGPU 粒子流场：WGSL 手写 Shader，GPU 上跑粒子运动，鼠标位置作为力场输入
Canvas 2D 星座连线：粒子间距小于阈值时动态连线，CPU 上跑
Fallback：没有 WebGPU 的浏览器（Safari 部分版本、老 Firefox）自动回退到纯 Canvas 2D

两层叠加在一起，既有深度感，又不会太抢内容。手机上根据 matchMedia('(pointer: coarse)') 自动禁用 WebGPU 层，保性能。

// WGSL 片段：粒子受鼠标位置的牵引
let dir = normalize(mouse.xy - particle.pos);
let force = dir * 0.02;
particle.vel = particle.vel + force;
particle.pos = particle.pos + particle.vel;

4. 匿名多人光标：像 Figma 一样

打开网站，你会看到别人的光标在页面上飘——用 SSE 广播坐标，全程匿名，不存数据库。

内存 store 做状态分发
每个连接限流（x 次 / s）防刷
离开后 30s 自动清掉

效果上有点像 Figma 的多人光标，但在一个个人网站里出现，很有"有人在陪你逛"的临场感。

5. 自进化知识库（RAG）

/ai/knowledge 是一个 pgvector 做的 RAG：

文章、项目、简历定期切块 + embedding
Chat 里回答我相关问题时，会先做向量召回
新增/修改内容后自动 re-ingest，无需手动刷新

模板里这部分做成了可选：没配 DATABASE_URL 就降级到读 JSON 文件，零门槛跑起来；要 RAG 能力再启 Postgres + pgvector。

6. Model Arena：GPT vs Claude 并排对比

/ai/arena 是一个小工具：同一个 prompt，同时给 OpenAI 和 Anthropic 流式返回，两边并排显示。

流式对比，不是"等两边都跑完再显示"
速度、内容、风格差异一眼看出来
可以改成任意两个 provider / 两个模型

对想评估"到底该用哪个模型"的人特别直观。

7. Workflow Studio：可视化工作流编辑器

基于 @xyflow/react（React Flow）做的节点式工作流编辑器：

拖拽节点、连线
每个节点可以是 LLM 调用、工具调用、条件分支
运行时按 DAG 拓扑顺序执行，结果流式显示

放在个人网站上不是为了真用——是告诉访客：“我不仅会调 API，我知道 Agent 编排是怎么回事。”

8. ⌘K 命令面板：键盘党的主战场

基于 cmdk，全站任何地方按 ⌘K / Ctrl+K 调出，三种模式一个面板：

Navigate 模式：按名称跳页面，输入 “agent” 回车就到 /ai/agent
AI 模式：面板里直接跟 AI 对话，不用离开当前页
Terminal 模式：模拟终端，支持 help / clear / theme dark 这类命令

键盘党不用碰鼠标就能走完整个站点。

9. Multimodal Chat：文本 + 图片

/ai/chat 支持传图片进去问，走 AI SDK v6 的 multimodal content parts。

上传一张截图：“这个界面有什么可以优化的？”——直接回你十条改进建议。

在这里插入图片描述

10. Coding DNA：首页实时拉 GitHub

不是放个 <img src="github-stats.vercel.app">，而是自己走 GitHub GraphQL：

提交热力图、语言分布、最近活跃仓库
服务端聚合后缓存，前端做渐变动画
访客看到的是实时数据，不是静态截图

11. Agent OS Console：每一次对话都能回放

/ai/os 是一个可观测后台：

Sessions：所有 AI 会话的列表
Runs：每次请求的完整 trace（prompt、model、tokens、耗时）
Tool Calls：哪些工具被调用、入参、返回
Artifacts：生成过的每一份 HTML / Python / Markdown

本质上是把 LangSmith / Helicone 那种 observability 平台做了一个轻量版内嵌进网站。

12. Terminal 与 Evolution：程序员审美的小彩蛋

/terminal：全屏终端界面，支持几十条命令，有的真跑 API，有的是彩蛋
/evolution：自进化时间线——博客更新、GitHub 提交、站点变更自动归集成一条时间流，AI 定期生成周报总结

这两个页面的访问量不高，但看到的人都会截图发朋友圈。

技术栈

层	技术
框架	Next.js 16（App Router、RSC、Server Actions、View Transitions）
运行时	React 19、TypeScript 5（strict）
样式	Tailwind CSS 4（CSS-first，无 config 文件）、next-themes
动画	Motion 12（Framer Motion）、CSS Scroll-Driven Animations
AI	Vercel AI SDK 6、OpenAI、Anthropic、pgvector
图形	WebGPU（WGSL）+ Canvas 2D fallback
工作流	@xyflow/react
命令面板	cmdk（⌘K 全局面板）
数据库	PostgreSQL 16 + pgvector（可选）
Monorepo	pnpm workspaces + Turborepo

都是 2026 年最新的栈。Next.js 16 的 RSC + Server Actions 在这里被用得很充分，大量交互不需要额外写 API route。

目录结构

ai-site-template/
├── apps/
│   ├── web/                  # Next.js 16 主应用
│   │   ├── src/app/          # App Router（页面、布局、API）
│   │   ├── src/components/   # UI 组件
│   │   ├── src/hooks/        # 自定义 hooks
│   │   └── src/lib/          # 工具（认证、AI runtime、限流）
│   └── worker/               # 后台任务 runner
├── packages/
│   ├── ai/                   # AI runtime：agents、chat、arena、workflows、artifacts
│   ├── db/                   # PostgreSQL 客户端、repository、schema
│   ├── ui/                   # 设计系统：tokens、primitives、composites
│   ├── content/              # 站点文案、多语言、项目、时间线数据
│   ├── observability/        # LLM run 追踪、工具调用、访客会话
│   └── config/               # 共享 TS config
├── ARCHITECTURE.md           # 系统架构手册
└── CUSTOMIZATION.md          # 如何个性化（改名字、改主题、裁功能）

所有业务数据（文案、项目、技能、时间线）都在 packages/content/ 里集中管理，改内容不用去 UI 组件里翻。

快速开始

环境

Node.js 22+
pnpm 10+
PostgreSQL 16 + pgvector（可选）

跑起来

git clone https://github.com/hyxnj666-creator/ai-site-template.git
cd ai-site-template
pnpm install
cp .env.example apps/web/.env.local
# 编辑 apps/web/.env.local，至少填 OPENAI_API_KEY
pnpm dev

打开 http://localhost:3000，完整跑通。

核心环境变量

变量	必填	说明
`OPENAI_API_KEY`	是	OpenAI Key
`OPENAI_CHAT_MODEL`	是	主模型（如 `gpt-5.4`）
`OPENAI_FAST_CHAT_MODEL`	否	快速模型（如 `gpt-5.4-mini`）
`ANTHROPIC_API_KEY`	Arena 需要	Claude Key
`DATABASE_URL`	否	Postgres 连接串（走 RAG 才需要）
`GITHUB_ACCOUNT_USERNAME`	是	展示 Coding DNA 用
`ADMIN_BASIC_AUTH_PASSWORD`	是	管理后台密码

怎么改成你自己的

模板里有一份 CUSTOMIZATION.md 专门讲个性化，核心就几步：

改文案：packages/content/src/site-copy.ts 里的 hero、about、footer 等全在一起
改项目/技能/时间线：packages/content/src/projects.ts、skills.ts、timeline.ts
改主题：packages/ui/src/tokens/ 里的颜色、字体、发光半径都是 CSS 变量
裁功能：不要 Arena？删 /ai/arena 页面和相关 packages/ai/src/arena/ 即可，其他模块独立

设计上所有模块松耦合，删掉 Workflow Studio 不会让 Chat 挂掉，删掉 RAG 不会让首页挂掉。

页面总览

路由	内容
`/`	首页 — Hero、Capabilities、Coding DNA、Evolution Pulse
`/about`	关于页 + 职业时间线
`/ai/chat`	多模态 AI 对话（文本 + 图片）
`/ai/agent`	Agent Mission Control 控制台
`/ai/workflow`	可视化工作流编辑器
`/ai/knowledge`	RAG 知识库
`/ai/arena`	模型竞技场（GPT vs Claude）
`/ai/mcp`	MCP 工具编排
`/ai/os`	Agent OS 控制台
`/evolution`	成长时间线
`/lab`	实验室
`/terminal`	终端式交互
`/admin`	管理后台（HMAC 签名 Cookie 保护）

十几个页面，每一个都是"能跑的"，不是占位符。

部署

Vercel（推荐）

npx vercel

一条命令，5 分钟上线。

自部署（PM2 + Nginx）

本地打包后 SCP 到服务器，pm2 起：

pnpm build
# 服务器上
pm2 start node_modules/next/dist/bin/next --name ai-site-web -- start -p 3000

我自己的 conorliu.com 就是这么部署的，详细步骤仓库里有 DEPLOY.md。

自部署还附赠一个小彩蛋：通过 undici 的 ProxyAgent 设置全局 fetch 代理，国内服务器调用 OpenAI / Anthropic 也能稳定跑。

适合谁

前端 / 全栈开发者：想做个"能打"的个人站点，直接 fork
AI 方向求职者：把 AI 工程能力立起来，一个站顶十份简历
独立开发者：作品集 + 博客 + AI 助手集成到一起
想学 AI SDK v6 / Next.js 16 的同学：一个能跑的完整项目比文档直观多了
技术主播 / 写作者：有个"自己的 AI 展示平台"

还有一些容易被忽略的细节

这些不是"卖点章节"级别的，但都是能让用过的人说"这做得真细"的地方：

双后端降级：没配 DATABASE_URL 整站照常跑——所有 Repository 都同时实现了 DB 版和 JSON File 版，运行时按环境切换。这是"零门槛 fork 就能用"的关键
自动 Schema 迁移：所有 DDL 都是 CREATE IF NOT EXISTS，首次启动自动建表，不用跑 migrate 脚本
匿名访客实时计数：页脚小圆点 + 实时数字，SSE 推送，不存任何 PII
管理后台真的有安全：HMAC-SHA256 签名的 HTTP-only Cookie + constant-time 比较，不是简单的 password === xxx
全局 fetch 代理：instrumentation.ts 里用 undici 的 ProxyAgent 设全局 dispatcher，国内 ECS 调 OpenAI / Anthropic 稳定可达。这个坑国内自部署的同学都懂
Worker 后台进程：apps/worker/ 是独立的 PM2 进程，跑 GitHub 同步、博客抓取、周报生成。主进程不阻塞，任务失败不影响页面
Scroll-Driven Animations + View Transitions：用的是浏览器原生 API，没上 GSAP / Lenis。Hero 区的字体放大、路由切换时的卡片变形过渡都是 CSS 做的
AI 可触发 UI 变化：你说"切深色"，主题真的会切；你说"导航到 about"，真的会跳——通过 useAIActions 把 AI 的 tool-result 事件桥到前端 router.push / setTheme
Zod 校验所有 I/O 边界：API 入参、AI tool 的 inputSchema、Artifact 结构，全都是 Zod。类型安全从 TS 延伸到运行时
移动端自动降级：matchMedia('(pointer: coarse)') 判定，移动端禁用 WebGPU、关闭多光标、简化动画，保流畅度

一些设计上的取舍

为什么用 Next.js 16 + React 19，而不是更稳的 14/18

因为 RSC 和 Server Actions 在 AI 场景下真的香：

Server Action 直接 await AI stream，不用写 API route
RSC 可以把 “AI 生成的内容” 当作组件树一部分缓存
View Transitions API 在路由切换时做页面过渡，Awwwards 那种感觉就来自这里

代价是部分三方库还没跟上，偶尔需要改 peer deps。但值。

为什么不用 Three.js 而是裸 WebGPU

Three.js 太重，一个场景拉 400KB+。这里只需要一个粒子流场，用 WGSL 手写 Shader + 原生 WebGPU，gzip 后不到 15KB。没有 WebGPU 就自动降级到 Canvas 2D，用户端 0 依赖。

为什么 pgvector 而不是 Pinecone / Weaviate

因为它是 Postgres 扩展。我本来就要 Postgres 存业务数据，装一个扩展就有了向量搜索，不用再维护一个外部服务。而且对个人网站级别的数据量（几千到几万 chunk），性能完全够。

开源协议

MIT。

随便 fork、随便改、随便商用。唯一的要求：不要把我的名字写在里面冒充自己。😄

项目地址

GitHub: hyxnj666-creator/ai-site-template
Live Demo: conorliu.com

git clone https://github.com/hyxnj666-creator/ai-site-template.git

如果觉得有意思，给个 ⭐ 或者点个赞，是我继续迭代的动力。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/m0_62927941/article/details/160338090

我做了一个 AI 原生的个人网站模板，全套开源