Week 5 · Wire It Up

Right now your project is a single index.html, online with Vercel — but it's still just a static page. Today we wire three real things onto it: your own domain, a backend that can store data, and an AI brain. By the end it stops being a page and starts being a real app.

The backend matters most for you: it lets you collect every visitor's input in one place — exactly what your user research needs. The AI gives your page a brain. And one rule runs through all of it: your keys are passwords — never let them leak.

Every step is a prompt you can copy — drop it into Codex or Cursor. Keep this page open all class. Stuck? Mia is here.

01 · Today

02 · Connect your domain

Yesterday you bought a domain on Cloudflare. Now we point it at your Vercel site so your project lives at your address, not a long vercel.app one. The flow: Vercel gives you one DNS record, you paste that record into Cloudflare, you wait a few minutes. Let AI walk you through it step by step:

我昨天在 Cloudflare 买了一个域名,现在想把它接到我已经部署在 Vercel 上的网站,让网站用我自己的域名打开。请一步一步带我做,每一步告诉我点哪里、填什么:

1. 在 Vercel 上打开我这个项目 → Settings → Domains,把我的域名输进去点 Add。
2. Vercel 会给我一条 DNS 记录(类似一个 A 记录或 CNAME)。告诉我这条记录长什么样、要复制哪几个值。
3. 带我去 Cloudflare 后台,找到这个域名的 DNS 设置,把 Vercel 给的那条记录加进去。
4. 加完等几分钟生效,然后我用自己的域名打开网站确认能访问。

我是零基础,请用最直白的话讲,不要假设我知道 DNS 是什么。每一步做完我会回来跟你说结果,你再带下一步。

Didn't buy a domain? No problem — skip this section and keep using your vercel.app address all class. Everything else today works exactly the same.

03 · What is MCP? (vs. a CLI)

A service like Vercel or Supabase can be driven from outside in a few ways — and you already know one: the CLI. When you ran git push or vercel, you typed a command and the service obeyed. git, gh (GitHub), vercel — these are command-line tools, made for a human to type. Fast and scriptable, but you have to know the commands.

MCP — Model Context Protocol — is the same idea, but for your AI. Instead of you typing commands, your coding AI (Cursor / Codex) plugs straight into the service and drives it from plain language. A CLI is a plug for a human; MCP is a plug for the AI. Today you plug Supabase into your AI and just say "make a table" — nothing to memorize.

04 · Add a backend with Supabase

Supabase is a ready-made backend — a database plus an API, out of the box. Right now your page probably saves things in the browser's localStorage, which means each user's data is stuck on their own device and you can never see it. We fix that: move the data into Supabase so everyone's input lands in one place you can read — the foundation of your user research. First, set up the Supabase MCP plug.

Everyone — whether you use Codex or Cursor — start at the official guide and pick your tool: supabase.com/docs/guides/ai-tools/mcp. It shows the exact config for your editor (Cursor even has a one-click "Add to Cursor"). Then paste this so your AI finishes the wiring:

我想给我的网站接一个 Supabase 后端,用官方 Supabase MCP 让你直接帮我操作。我用的是 Codex / Cursor,零基础,请这样带我配:

1. 先打开并阅读官方文档 https://supabase.com/docs/guides/ai-tools/mcp ,按我用的工具(Codex 还是 Cursor)选对应的配置方式——以文档最新写法为准。
2. 注册 / 登录 Supabase,新建一个项目(project),记下它的 project ref(项目 ID)。这是开发项目,先不放任何重要数据。
3. 按文档把 Supabase MCP 配上:服务器地址是 https://mcp.supabase.com/mcp ,带上我的 project ref。现在默认走**浏览器 OAuth 登录**——比如用 Codex 大致就是 `codex mcp login supabase` 这一类命令,跑完在浏览器点一下授权就行,**不用手动去后台生成 access token**。具体命令以官方文档为准。
4. 安全两条务必做:① 限定到我这**一个 project**,别给它访问我全部项目的权限;② 把客户端设成「执行任何工具前都要我手动点确认」——防止以后别人填进我网站的内容诱导 AI 去跑危险命令(prompt injection)。
5. 配好后做最小验证:让你通过 MCP 列出我项目里的表,确认插头真的通了。

每步讲清要我填什么、在浏览器点什么,做完我回来跟你确认再继续。

Plug connected. Now let AI use it — create a table for your research data, and rewrite your page to save into Supabase instead of the browser:

现在 Supabase MCP 已经接好了。请通过 MCP 帮我做两件事:

① 建一张表,用来存我网站收集的用户反馈 / 研究数据。先读我的 index.html,看看我现在收集了哪些字段(比如用户的输入、选择、留言),据此设计表的字段;再帮我建表,并给每条记录自动加上时间戳。

② 改我的网页:我现在的数据是存在浏览器 localStorage 里的,只能存在用户自己设备上,我收不到。把它改成提交到 Supabase 这张表里——这样不管谁在哪台设备打开我的网站,填的数据都会汇总到我这一个地方,方便我后面做用户研究统计。

改完告诉我怎么在 Supabase 后台看到收上来的数据。每一步做完跟我确认,别一次全改完。

05 · Give it an AI brain — DeepSeek

Now the brain. DeepSeek is a chat AI you can call from your page — to generate a personalized reply from what a user typed, summarize their answers, whatever your project needs. The prompt asks AI to read DeepSeek's official docs and wire up the simplest working version. Fill in one sentence describing your AI feature, and paste your key where shown:

请阅读 https://api-docs.deepseek.com 的官方文档,帮我在我的网页里接入 DeepSeek 的对话 API,实现[一句话描述你的 AI 功能]。先用最简单的方式让它在本地跑起来,能调通、能看到 AI 返回的结果就行。我的 API key 是 <课上老师发的 DeepSeek API Key>。
Hold on — this key is dangerous. While testing, fill the key in locally only. The moment it runs, stop there. Do NOT git push, do NOT deploy any version with the key in it. The next section is exactly how to put this online safely — wait for it.

06 · Keep your keys safe

This is the section that matters most today, so we go slow. An API key is a password. If it leaks, someone uses your key and you pay the bill. Three hard rules:

Here's how to do Rule 3. Since you deploy on Vercel, the smoothest path is a Vercel Serverless Function: drop one file in your repo (api/chat.js), put the key in Vercel's Environment Variables, and your page calls /api/chat instead of DeepSeek directly — so the key lives on the server, never in your HTML. (Already deep in Supabase? A Supabase Edge Function does the exact same job; the prompt covers both. Note: putting a key in Vercel's env only helps because a function reads it server-side — a key in a plain static page is still exposed.)

我要把网页里调用 DeepSeek 的部分改成安全的上线方式,绝不能再把 API key 写在前端。我的网站部署在 Vercel,请**优先用 Vercel Serverless Function** 帮我改(如果我说更想用 Supabase,就改用 Supabase Edge Function,做法等价):

1. 在我仓库里新建一个后端函数(Vercel 就是新建 api/chat.js 这个文件;Supabase 就是一个 Edge Function),在里面调用 DeepSeek 的对话 API。
2. DeepSeek 的 API key 不要写死在代码里,改成从环境变量读取(Vercel 里用 process.env)。带我去 Vercel 项目的 Settings → Environment Variables 把 key 加进去(用 Supabase 的话就存成 function 的 secret)。
3. 把我前端网页里原来直接调 DeepSeek、还带着 key 的那段删掉,改成调用我自己这个后端(Vercel 就是 fetch('/api/chat'))。**前端代码里一个 key 字符都不许出现。**
4. 部署后带我测一条链路:前端 → 我的后端函数 → DeepSeek,能跑通,且 key 全程只在服务器、不进浏览器。
5. 最后帮我确认:现在就算把前端代码 push 到 GitHub、部署上线,也不会泄露任何 key。

我零基础,每一步讲清楚做什么、填什么。

07 · How it all fits together

A lot of words flew by today. Here's the whole map on one screen — when you build it (you + your tools) and when people use it (data flowing through your app):

■ WHEN YOU BUILD IT
──────────────────────────────
  You
   │
   ├─ CLI ──▶  git · gh · vercel
   │           (you type commands)
   │
   └─ plain talk ──▶  Coding AI  (Cursor / Codex)
                         │  writes your site
                         └─ MCP ──▶  Supabase
                                     (AI builds your tables)


■ WHEN PEOPLE USE IT
──────────────────────────────
  User
   │ opens
   ▼
  Frontend   ·  index.html, in the browser
   │ calls API
   ▼
  Backend    ·  Vercel function, on the server, hides the key
   │ calls API
   ▼
  DeepSeek   ·  the AI running inside your product

The one people mix up: two different AIs. The coding AI (Cursor / Codex) builds your house; DeepSeek is the assistant living inside it. One line each:

08 · Leave with

09 · Before you go — class feedback

Two minutes, every class. Tell us what landed and what didn't — it directly shapes next week's class.