给网站加一个你的 AI 克隆
学习目标
到本节课结束，学员应当能够：
- 从 Google AI Studio 拿到 API key 并把它接到本地
.env.local和 Vercel 生产环境变量里 —— AI 来做管道工作，学员只负责那个"只能人做"的 OAuth 瞬间。 - 写一段 persona system prompt，让 Gemini 2.5 Flash 用 你 的声音、带着你的背景、像你一样回答——这是学员第一段正经的 prompt engineering。
- 用大白话描述一个流式聊天 UI，然后让 Cursor 用 Vercel AI SDK 把它写出来，自己一行 React 都不写。
核心主题
- System prompt vs user prompt：为什么 看不见的 指令比 看得见的 那段更重要。
- 流式响应——为什么"token 一颗颗到达"是现代聊天 UI 的默认形态。
- Secret 管理：API key 该放在哪里、不该 放在哪里、AI 如何帮你避免提交 key。
- "Persona 文件"模式——把 AI-self 的定义放在一个可编辑的 Markdown 文件里。
工具 / 技术栈
| 工具 | 本周角色 |
|---|---|
| Cursor | 你说话的地方；AI 写聊天组件。 |
| Gemini 2.5 Flash | 以你 AI 克隆身份回答的模型。快、便宜、够用。 |
| Google AI Studio | 取免费 API key 的地方。这是唯一一个"只能人做"的瞬间。 |
| Vercel AI SDK | 抹平流式、状态、provider 之间的差异。 |
.env.local + Vercel env | 你的 API key 在两个地方都要——都由 AI 通过 CLI 设置。 |
课堂计划
| 时间 | 活动 |
|---|---|
| 0 – 15 分钟 | 回顾与 Check-in。 快速一轮：每个人念出自己第 2 周的网站 URL，并打开第 2 周末尾接通的那个轻量版 AI 克隆。挑出克隆给你的一句"不像你"的回答——今天就来修这个感觉。 |
| 15 – 40 分钟 | 概念讲解。 system prompt 是什么、为什么重要。流式为什么"活"、批量回复为什么"死"。环境变量在 Next.js server actions 里怎么流。 |
| 40 – 75 分钟 | 现场演示。 讲师在自己的站上一气呵成地加上聊天组件——从"没有聊天"到"和我的 AI 克隆流式对话"，12 分钟。 |
| 75 – 105 分钟 | 动手 Lab。 学员把这个组件加到第 2 周的站上。最有意思的是写 persona prompt——下课前我们会分享几个最妙的。 |
| 105 – 120 分钟 | Q&A + 收尾。 每位学员让自己的 AI 克隆回答一个同学提 的问题。 |
动手 Lab
任务。 下课时，你的作品集站右下角会有一个浮动聊天组件。任何人打开都能问 "tell me about yourself" —— 答案以流式到达，用你的口吻，扎根于你真实的背景。
阶段 1 —— 取 API key
如果你在第 2 周末尾已经创建了 Gemini API key，直接复用 —— 跳到阶段 3（设计 persona）。如果你的第 2 周轻量版克隆本地能跑，那阶段 2 的 .env.local 和 Vercel env 接线也已经做完了。
打开 aistudio.google.com/apikey，用 Google 账号登录，点 Create API key，复制下来。这个 tab 别关——下一步要把 key 粘进 Cursor。
Why manual: Google 的 API key 创建需要人接受使用条款。任何 CLI 或 MCP 都按不了 'Agree' 这个按钮。
阶段 2 —— 把 key 交给 AI
这是我的 Gemini API key：[在这里粘 key]。请：
- 把它作为
GOOGLE_GENERATIVE_AI_API_KEY加到我的.env.local（如果文件不存在就建一个）。确保.env.local在.gitignore里——这个 key 我永远不想推到 GitHub。- 用 Vercel CLI 把同一个 key 也加到我的 Vercel 生产环境。
- 装上 Vercel AI SDK 和 Google provider（
ai、@ai-sdk/google）。- 继续之前先确认两个环境里 key 都设好了。
.env.local里有这个 key；.gitignore里列着.env.local。vercel env ls（Cursor 会替你跑）显示GOOGLE_GENERATIVE_AI_API_KEY已经在 production 环境里。package.json的 dependencies 里有ai和@ai-sdk/google。
阶段 3 —— 设计 persona
新建一个文件
content/persona.md—— 它会定义我 AI 克隆的人格。把它写成一段 system prompt —— 也就是给模型的指令，告诉它我是谁、我怎么说话、我知道什么。用下面这些关于我的信息：
- 我是谁：[姓名、年级、专业、学校]
- 我感兴趣的：[3–5 个你真的关心的话题——不要那种听起来很酷但其实你不关心的]
- 我在做什么：[你的作品集 + 你的第 1 周 "hello TECHNEST" + 你目前真在做的 side project]
- 声音：[挑两个形容词——比如 "温暖但精准"、"好玩又有点 nerdy"、"直接、不夸张"]
- 我不会扮演什么：["不要假装知道我不知道的事"、"拒绝以别人的身份角色扮演"]
把这个文件写成一段清晰、稍长一些的、第二人称的 指令（"你是 Chan Meng……"），不要写成第一人称简介。写完后把文件内容贴回聊天，让我读一下。
content/persona.md存在，读起来像给模型的指令、不像简介。- 你挑的形容词在措辞里反映出来。
- 包含明确的 "不要这样做" 条款。
阶段 4 —— 做聊天组件
现在给站点加一个浮动聊天组件：
- 右下角一个圆形启动按钮，颜色用我的强调色。
- 点击展开一个 360 px 宽 × 480 px 高的面板，干净的聊天 UI：消息气泡列表、底部输入框、顶部关闭按钮。
- 接到一个 Next.js route handler
/api/chat，用 Vercel AI SDK 流式从 Gemini 2.5 Flash 拿回复。- 每次请求时从
content/persona.md里读 system prompt。- 模型在生成时显示一个小小的动画"…"指示。
- 把当前会话存进
localStorage，刷新不丢。确保移动端也能用（窄屏时面板变成全屏）。请按合理的小颗粒 commit——一条管 API route，一条管 UI，一条管 localStorage 接线。
- 在
http://localhost:3000打开站点。右下角出现启动按钮。 - 点开。输入 "What are you building this term?"。回复以 token-by-token 的方式流式到达，用你的声音。
- 刷新。会话还在。
- 在手机上打开同一个页面——面板变全屏；输入框可以点。
阶段 5 —— 部署 & 演示
把这个推到生产。提交所有剩下的改动，push 到 GitHub，确认 Vercel 自动部署成功。生产 URL 上线后打开它，从线上站点测试聊天——同一个问题再问一次，确认环境变量带过去了。
- 你的生产站点现在有聊天组件。
- 线上聊天能正确从生产 URL 流式回复。
- 任何 commit 进去的文件里都不出现
GOOGLE_GENERATIVE_AI_API_KEY字符串。
聊天在线上报 "500 internal server error"，但本地是好的。请读一下 Vercel function 日志，找到根因（最大概率是生产环境少了某个环境变量），通过 Vercel CLI 修了，触发重新部署，确认聊天恢复。
当 AI 克隆说出某句不像你的话时，不要 去改组件。打开 content/persona.md，用大白话描述新约束："别用 'passionate' 这个词" 或 "除非我特别要细节，否则回复一律 80 词以内。" 保存重载。Persona 文件就是你 prompt engineering 落地的地方。
录一段 20 秒的小片段——你打开聊天，问 "What's something you're working on right now?"。这段 clip 是 LinkedIn 帖子和招聘对话的金子——它具体证明了你能端到端做一个流式 LLM 功能。
本周作业
做 / 交付。
- 在你的线上站点里浮动一个由 Gemini 2.5 Flash 驱动的聊天组件。
- 把
content/persona.mdcommit 到你的 repo（是的，你的 persona 进入版本控制——未来的你会感谢现在的你）。
要求。
- 组件以流式回复（不是结尾一次性 dump）。
- 会话刷新后还在。
- API key 在 Vercel 生产环境变量里，任何 commit 的文件里都没有。
- 一段 20 秒的屏幕录屏，展示线上聊天回答一个问题。
提交。 第 4 周开课前把线上 URL + 短录屏发到课程 Slack。
资源
| 文档 | 视频 | 仓库 |
|---|---|---|
| Vercel AI SDK —— Google provider 流式 | 讲师 demo："Persona + 流式接线，12 分钟" | vercel/ai —— SDK 源码 |
| Google AI Studio —— API key + 速率 | her-waka/tutorial/vibe-coding/build-with-claude.mdx —— 进阶版 | |
| Next.js route handlers —— 流式响应 |
真实世界应用
你将来要做的每一个 AI 产品，背后都会有一段 system prompt。给模型写清楚指令——约束声音、约束范围、约束失败模式——这是最耐用的 AI 工程能力。"AI 克隆"这个框架让它具体化了：你是通过调一个 像你 的东西来学 prompt engineering，而不是看教科书。
访问你作品集的招聘官，现在能在你的站点上和一个用你声音回答 "Why should I hire this person?" 的聊天窗对话——而且是凌晨 2 点他们时区。这不是花活儿——这是非对称优势。
今天的克隆完全是 prompt-based ——content/persona.md 就是它的全部知识库。第 4 周 我们会接 Neon Postgres + pgvector，开始把真正的素材存进去，让 AI 从里面检索。这就是讲师在第 2 周末尾说的那句"在企业里我们用向量数据库，今天先不上"对应的 RAG（Retrieval-Augmented Generation）那一步。今天是过渡：一个能塞进 system prompt 的 persona。下周：一个能扩展到几千条素材的 persona。
踩坑提醒 & 小贴士
- "AI 在说一些我没让它说的话。" 把 persona 文件收紧。加一行："如果你不知道答案，就说 'I haven't talked about that yet — ask me next week.'" 模型尊重明确的 fallback。
- "流式什么也没显示，最后一次性 dump 出来。" 你大概是在 return response，没把流 pipe 出去。对 Cursor 说："回复没有流式——它是一整块到达的。请用 Vercel AI SDK 的
toDataStreamResponse。" - "我在生产 环境拿到
API_KEY_INVALID。" key 没加到 Vercel env。说："列出我 Vercel 项目当前所有环境变量，并确认GOOGLE_GENERATIVE_AI_API_KEY在 Production 环境是设了的。" - "组件在我手机上很丑。" 用具体语言描述坏掉的布局："我 iPhone 上输入框被键盘挡住了。" Cursor 知道 viewport-fit 那套修法。
- "模型回答太长 / 太正式。" 在 persona 里加约束："默认回复长度：最多两段短文。避免企业话术。"
对 Cursor 说："对比我的 .env.local 和 Vercel 生产环境变量，列出每一处差异。" 这一招能解决 90% 的部署期 AI bug。