跳到主要内容
版本：2026 TECHNEST 项目
FUNCOOL

给网站加一个你的 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。注意一下谁的站最像"他自己"——今天我们要把这种感觉再放大一些。
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​

MANUALStep 1 · Manual (human only):

打开 aistudio.google.com/apikey，用 Google 账号登录，点 Create API key，复制下来。这个 tab 别关——下一步要把 key 粘进 Cursor。

Why manual: Google 的 API key 创建需要人接受使用条款。任何 CLI 或 MCP 都按不了 'Agree' 这个按钮。

阶段 2 —— 把 key 交给 AI​

PROMPTStep 2 · Say to Cursor:

这是我的 Gemini API key：[在这里粘 key]。请：

  1. 把它作为 GOOGLE_GENERATIVE_AI_API_KEY 加到我的 .env.local（如果文件不存在就建一个）。确保 .env.local 在 .gitignore 里——这个 key 我永远不想推到 GitHub。
  2. 用 Vercel CLI 把同一个 key 也加到我的 Vercel 生产环境。
  3. 装上 Vercel AI SDK 和 Google provider（ai、@ai-sdk/google）。
  4. 继续之前先确认两个环境里 key 都设好了。
VERIFYStep 3 · Verify:
  • .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​

PROMPTStep 4 · Say to Cursor:

新建一个文件 content/persona.md —— 它会定义我 AI 克隆的人格。把它写成一段 system prompt —— 也就是给模型的指令，告诉它我是谁、我怎么说话、我知道什么。用下面这些关于我的信息：

  • 我是谁：[姓名、年级、专业、学校]
  • 我感兴趣的：[3–5 个你真的关心的话题——不要那种听起来很酷但其实你不关心的]
  • 我在做什么：[你的作品集 + 你的第 1 周 "hello TECHNEST" + 你目前真在做的 side project]
  • 声音：[挑两个形容词——比如 "温暖但精准"、"好玩又有点 nerdy"、"直接、不夸张"]
  • 我不会扮演什么：["不要假装知道我不知道的事"、"拒绝以别人的身份角色扮演"]

把这个文件写成一段清晰、稍长一些的、第二人称的 指令（"你是 Chan Meng……"），不要写成第一人称简介。写完后把文件内容贴回聊天，让我读一下。

VERIFYStep 5 · Verify:
  • content/persona.md 存在，读起来像给模型的指令、不像简介。
  • 你挑的形容词在措辞里反映出来。
  • 包含明确的 "不要这样做" 条款。

阶段 4 —— 做聊天组件​

PROMPTStep 6 · Say to Cursor:

现在给站点加一个浮动聊天组件：

  • 右下角一个圆形启动按钮，颜色用我的强调色。
  • 点击展开一个 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 接线。

VERIFYStep 7 · Verify:
  • 在 http://localhost:3000 打开站点。右下角出现启动按钮。
  • 点开。输入 "What are you building this term?"。回复以 token-by-token 的方式流式到达，用你的声音。
  • 刷新。会话还在。
  • 在手机上打开同一个页面——面板变全屏；输入框可以点。

阶段 5 —— 部署 & 演示​

PROMPTStep 8 · Say to Cursor:

把这个推到生产。提交所有剩下的改动，push 到 GitHub，确认 Vercel 自动部署成功。生产 URL 上线后打开它，从线上站点测试聊天——同一个问题再问一次，确认环境变量带过去了。

VERIFYStep 9 · Verify:
  • 你的生产站点现在有聊天组件。
  • 线上聊天能正确从生产 URL 流式回复。
  • 任何 commit 进去的文件里都不出现 GOOGLE_GENERATIVE_AI_API_KEY 字符串。
RECOVERStep 10 · If stuck, say to AI:

聊天在线上报 "500 internal server error"，但本地是好的。请读一下 Vercel function 日志，找到根因（最大概率是生产环境少了某个环境变量），通过 Vercel CLI 修了，触发重新部署，确认聊天恢复。

迭代 persona，不要去改组件

当 AI 克隆说出某句不像你的话时，不要 去改组件。打开 content/persona.md，用大白话描述新约束："别用 'passionate' 这个词" 或 "除非我特别要细节，否则回复一律 80 词以内。" 保存重载。Persona 文件就是你 prompt engineering 落地的地方。

Career · 给你的 AI 克隆录个屏

录一段 20 秒的小片段——你打开聊天，问 "What's something you're working on right now?"。这段 clip 是 LinkedIn 帖子和招聘对话的金子——它具体证明了你能端到端做一个流式 LLM 功能。

本周作业​

做 / 交付。

  • 在你的线上站点里浮动一个由 Gemini 2.5 Flash 驱动的聊天组件。
  • 把 content/persona.md commit 到你的 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，而不是看教科书。

Career

访问你作品集的招聘官，现在能在你的站点上和一个用你声音回答 "Why should I hire this person?" 的聊天窗对话——而且是凌晨 2 点他们时区。这不是花活儿——这是非对称优势。

踩坑提醒 & 小贴士​

  • "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。