从零开始搭一个AI聊天前端，文科生也能懂
大家好，我是小文，一个靠自学成功转码的前历史系学生。今天写这篇教程，是因为我当初学前端时，被各种“高大上”的术语吓到过；也因为最近在尝试用AI Agent做点小工具时，踩了一堆坑。我想把这段经历整理成一篇完全零基础友好的实践指南，带你用最简单的代码，亲手搭一个能和AI对话的网页。
你不需要会任何编程，只要会打字、会装软件，就能跟着做。我们还会用到两个国产大模型：通义千问和DeepSeek，并理解它们怎么和前端页面互动——这就是所谓的 AI Agent 的雏形。
一、我们要做什么？
简单说：做一个网页，你在里面输入问题（比如“李白是谁？”），点击按钮，网页就调用AI模型（比如通义千问）拿到答案，然后显示出来。
这个过程涉及两个部分：
- 前端：你看到的网页界面（用 HTML + JavaScript 写）
- AI 后端：处理问题并返回答案的服务（我们用现成的 API，不用自己训练模型）
而 AI Agent，在这里可以理解为“一个能自动帮你完成任务的智能助手”——我们的网页，就是它的“身体”。
二、环境准备：5分钟搞定开发工具
别怕！我们只用两个免费工具：
| 工具 | 用途 | 安装方式 |
|---|---|---|
| 浏览器（推荐 Chrome） | 运行和调试网页 | 电脑自带或官网下载 |
| VS Code（代码编辑器） | 写代码的地方 | https://code.visualstudio.com/ 下载安装 |
✅ 我当初学的时候以为要装一堆复杂软件，结果发现前端入门真的只需要这两个！
第一步：新建项目文件夹
- 在桌面新建一个文件夹，叫
my-ai-chat - 用 VS Code 打开它（File → Open Folder）
第二步：创建一个 HTML 文件
在 VS Code 左侧空白处右键 → New File → 输入 index.html
粘贴以下基础代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的AI助手</title>
</head>
<body>
<h1>你好，我是你的AI朋友！</h1>
<input type="text" id="userInput" placeholder="请输入你的问题..." />
<button onclick="askAI()">提问</button>
<div id="answer"></div>
<script>
function askAI() {
const input = document.getElementById('userInput').value;
alert("你问的是：" + input);
}
</script>
</body>
</html>
保存后，双击这个 index.html 文件，用浏览器打开。你会看到一个输入框和一个按钮。点一下“提问”，会弹出你输入的内容。
恭喜！你已经写出了第一个前端页面。
三、核心概念：前端、API、AI Agent 是什么？
前端（Frontend）
就是用户看到和操作的部分。比如微信的聊天界面、淘宝的商品列表。我们用 HTML（结构）、CSS（样式）、JavaScript（行为）来构建。
API（应用程序接口）
你可以把它想象成“点餐菜单”。你想吃宫保鸡丁，就告诉服务员（API），厨房（服务器）做好后，服务员把菜端给你。
AI 模型（如通义千问）也提供这样的“菜单”——你发一个问题，它返回答案。
AI Agent
不是机器人，而是一个能自主决策+执行任务的程序。比如：
- 你问“明天天气如何？”
- Agent 自动调用天气 API
- 把结果整理成自然语言回答你
我们现在做的，就是一个最简版的 Agent 前端入口。
四、实战：接入通义千问 or DeepSeek
接下来，我们要让那个 alert 变成真正的 AI 回答！
第一步：申请 API Key
选项 A：通义千问（Qwen）
- 访问 https://dashscope.aliyun.com/
- 注册阿里云账号（学生可免费领额度）
- 进入“API-KEY 管理” → 创建新 Key
- 复制你的 Key，格式像这样：
sk-xxxxxxxxxxxxxxxxxxxxxxxx
选项 B：DeepSeek（国产开源模型）
- 访问 https://platform.deepseek.com/
- 注册并获取 API Key（同样免费试用）
💡 我当初第一次申请时，不知道要“开通服务”，导致调用失败。记得在控制台里启用 Qwen 或 DeepSeek 的 API 服务！
第二步：修改代码，调用 AI
我们以 通义千问 为例（DeepSeek 的调用方式几乎一样，后面会对比）。
把 index.html 中的 <script> 部分替换成：
<script>
// 替换成你自己的 API Key
const API_KEY = "sk-你的密钥";
async function askAI() {
const input = document.getElementById('userInput').value;
const answerDiv = document.getElementById('answer');
answerDiv.innerText = "思考中...";
try {
const response = await fetch("https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation", {
method: "POST",
headers: {
"Authorization": "Bearer " + API_KEY,
"Content-Type": "application/json"
},
body: JSON.stringify({
model: "qwen-max",
input: {
messages: [
{ role: "user", content: input }
]
}
})
});
const data = await response.json();
const aiAnswer = data.output.choices[0].message.content;
answerDiv.innerText = aiAnswer;
} catch (error) {
answerDiv.innerText = "出错了：" + error.message;
}
}
</script>
保存后刷新浏览器，输入问题（比如“地球是圆的吗？”），点击提问！
如果一切顺利，几秒后就会看到 AI 的回答。
五、通义千问 vs DeepSeek：怎么选？
| 特性 | 通义千问（Qwen） | DeepSeek |
|---|---|---|
| 开发商 | 阿里云 | 深度求索（DeepSeek） |
| 中文理解 | 极强 | 很强 |
| 免费额度 | 有（新用户） | 有 |
| API 稳定性 | 高 | 较高 |
| 调用地址 | dashscope.aliyuncs.com |
api.deepseek.com |
| 模型名称 | qwen-max / qwen-plus |
deepseek-chat |
✅ 建议新手先用通义千问，文档更全，报错信息更友好。
如果你想试试 DeepSeek，只需改两处：
- URL 改成
https://api.deepseek.com/chat/completions - 请求体改成：
{
model: "deepseek-chat",
messages: [{ role: "user", content: input }]
}
六、新手常见问题 & 解决方案
❌ 问题1：点击按钮没反应，也没报错
原因：浏览器安全限制（CORS），但其实是因为本地文件直接打开（file:// 协议）不支持网络请求。
解决：用 VS Code 安装插件 Live Server，右键 HTML 文件 → “Open with Live Server”。这样会通过 http://localhost:5500 打开，就能正常发请求了。
❌ 问题2：显示“Invalid API Key”
原因：Key 错了，或没开通服务。 解决：
- 检查 Key 是否复制完整（不要带空格）
- 登录 DashScope 控制台，确认“Qwen”服务已开通
❌ 问题3：返回“429 Too Many Requests”
原因：免费额度用完了，或请求太频繁。 解决：
- 等几分钟再试
- 查看控制台的用量配额
❌ 问题4：中文乱码或显示 [object Object]
原因：没正确解析 JSON 响应。
解决：确保用了 await response.json()，并检查字段路径（不同模型返回结构不同）。
七、下一步学习建议
你已经完成了从零到能调用 AI 的全过程！但这只是开始。接下来你可以：
- 美化界面：加 CSS 样式，让聊天框更像微信
- 支持多轮对话：把历史消息存起来，每次带上上下文
- 部署上线：用 GitHub Pages 免费发布你的网页，让朋友也能用
- 尝试更多 AI 功能：比如语音输入、图片生成（DALL·E API）
🌟 我当初做完这个小项目后，信心大增，接着做了个“每日一句古诗”网站，现在已经有几百人用了。技术不怕慢，就怕不动手。
写在最后
作为一个文科生，我深知面对代码时的恐惧。但请相信：所有复杂的系统，都始于一行 console.log("Hello")。
AI Agent 听起来很酷，但它的起点，可能就是你今天写的这个小小输入框。别等“准备好”，现在就去改一行代码，点一次按钮——那就是你成为开发者的第一步。
如果你卡在某一步，欢迎在评论区留言（假设这是博客），我会尽力帮你解答。毕竟，我也曾是那个对着红色报错信息发呆的文科生。
加油，未来的你，会感谢现在勇敢点下“运行”的自己。
评论 0