赛区：主教练 · 第 26 课 ｜ 前置：第 23 课 ｜ 成本：0 元托管
球队再强，球馆破破烂烂，球迷也不来。你的 Agent 也是一样——命令行里的 Agent 只有你能用，套上网页界面，全世界都能用。
别慌，这节课不用学前端三件套。一座「能用的球馆」只需要三样：一个输入框、一个按钮、一个回答区。
🏃 训练动作 1：搭门面（20 分钟）
新建 index.html，抄下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>维语学习助手</title>
<style>
body { max-width: 600px; margin: 40px auto; font-family: sans-serif; padding: 0 16px; }
input { width: 70%; padding: 12px; font-size: 16px; }
button { padding: 12px 20px; font-size: 16px; cursor: pointer; }
#answer { margin-top: 20px; padding: 16px; background: #f5f5f5; border-radius: 8px; min-height: 60px; }
[dir="rtl"] { direction: rtl; text-align: right; }
</style>
</head>
<body>
<h2>维语学习助手</h2>
<input id="q" placeholder="输入想查的词，如：谢谢">
<button onclick="ask()">查询</button>
<div id="answer">结果会显示在这里</div>
<script>
async function ask() {
document.getElementById("answer").textContent = "思考中…";
const res = await fetch("/api/ask", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ word: document.getElementById("q").value })
});
const data = await res.json();
document.getElementById("answer").textContent = data.reply;
}
</script>
</body>
</html>
注意那段 [dir="rtl"] 的样式——展示维语内容时要声明从右往左排，这是本站维语页也在用的做法，别忘了。
🏃 训练动作 2：接后台（安全红线）
网页里绝不能直接写 API 密钥（右键查看源代码就被扒走）。正确做法：密钥留在服务器端，网页只调你自己的 /api/ask 接口，接口里再调大模型。用 Vercel 的话，把第 19 课的调用代码放进 api/ask.js（Vercel 会自动把它变成接口），密钥存 Vercel 的环境变量设置页。
🏃 训练动作 3：开馆（5 分钟）
npx vercel deploy --prod --yes
✅ 验收：手机上打开网址，输入「谢谢」，能看到回答。
球馆装修原则（克制一点）：先能用，再好看。用户要的是答案快、看得清，不是花哨动画。你的时间该花在提示词和内容质量上。
口诀：界面是门面，安全是地基，内容是招牌。
金句：球馆的意义不是炫耀，是让每个路过的人都能进来打一场。