登录前端直连大模型：用原生 JavaScript 调用 DeepSeek API
在 AI 应用快速普及的今天，大语言模型（LLM）不再只是后端服务的专属能力。通过标准的 HTTP 接口，前端应用也能直接与模型对话——无需中间服务器，只需一个 API Key 和几行代码。本文将带你
无需后端支持，纯前端技术栈也能集成人工智能大模型
作为一名前端开发者，我最近探索了一个有趣的技术方案：如何在前端项目中直接调用大型语言模型。在这个过程中，我发现了不少值得分享的经验和技巧，今天就带大家一步步实现前端调用DeepSeek大模型的全过程。
项目背景与初衷
传统上，调用AI大模型通常需要后端服务的支持，前端通过API与自己的服务器交互，再由服务器调用AI服务。这样做主要是出于安全考虑，特别是为了保护API密钥。但有时候，我们只是想快速原型验证，或者构建简单的个人项目，这时候如果能直接从前端调用大模型，会大大简化开发流程。
我决定尝试使用纯前端技术栈调用DeepSeek大模型，并记录下整个过程。
项目初始化：从零搭建
为了简化开发流程，我使用了 Trae（一种 AI 辅助开发工具）帮我快速初始化了一个基于 Vite 的前端项目。V
选择构建工具
我选择了Vite作为项目构建工具，它不仅速度快，而且内置了丰富的功能，特别是对环境变量的支持，这对保护API密钥至关重要。
npm create vite@latest frontend-llm-demo
cd frontend-llm-demo
npm install
项目结构设计
保持简洁的项目结构：
frontend-llm-demo/
├── index.html
├── styles/
│ └── style.css
├── scripts/
│ └── app.js
└── .env.local
其中，index.html 是主页面，app.js 负责发起 API 请求，而 .env.local 将用于存放敏感的 API Key。
核心实现：HTTP请求调用LLM
构建API请求
在app.js中，我实现了完整的API调用逻辑：
// DeepSeek API端点
const endpoint = 'https://api.deepseek.com/chat/completions'
// 设置请求头
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${import.meta.env.VITE_DEEPSEEK_API_KEY}`
}
// 构建请求体
const payload = {
model: 'deepseek-chat',
messages: [
{
role: 'system',
content: 'You are a helpful assistant.'
},
{
role: 'user',
content: '你好 DeepSeek'
}
]
}
// 发送请求并处理响应
const response = await fetch(endpoint, {
method: 'POST',
headers: headers,
body: JSON.stringify(payload)
})
const data = await response.json()
console.log(data)
// 将模型回复动态挂载到页面
document.getElementById('reply').textContent = data.choices[0].message.content
关键技术点解析
1. 请求方法选择
我使用了POST而非GET方法，原因有二：
- POST请求更安全，参数不会暴露在URL中
- 我们需要传递请求体，GET请求通常不包含请求体 而 LLM 调用需要传递复杂的
messages结构，必须使用 POST
2. 请求头设置
请求头包含了两个关键信息：
-
Content-Type: application/json- 告诉服务器我们发送的是JSON格式数据 -
Authorization: Bearer ...- 用于身份验证的API密钥
3. 请求体构建
请求体是一个JSON对象，包含：
-
model- 指定要使用的模型版本 -
messages- 对话消息数组，包含角色和内容
4. 数据序列化
使用JSON.stringify()将JavaScript对象转换为JSON字符串，因为HTTP协议只能传输文本或二进制数据，不能直接传输对象。
安全考虑：保护API密钥
环境变量的重要性
直接将API密钥硬编码在前端代码中是极其危险的，任何用户都可以查看源代码获取密钥。为了解决这个问题，我使用了环境变量。
Vite环境变量配置
Vite使用特殊的import.meta.env对象来访问环境变量。以VITE_开头的变量会被嵌入到客户端代码中。
- 创建
.env文件：
VITE_DEEPSEEK_API_KEY=your_api_key_here
- 在代码中访问：
const apiKey = import.meta.env.VITE_DEEPSEEK_API_KEY
注意：即使使用环境变量，前端代码中的API密钥仍然可能被有心人获取。对于生产环境，最佳实践仍然是使用后端服务作为代理。
异步处理：从Promise到async/await
传统的Promise链式调用
fetch(endpoint, options)
.then(response => response.json())
.then(data => {
// 处理数据
})
.catch(error => {
// 错误处理
})
现代的async/await
我选择了async/await语法，因为它更简洁、更易读：
try {
const response = await fetch(endpoint, options)
const data = await response.json()
// 处理数据
} catch (error) {
// 错误处理
}
结果展示：动态更新DOM
获取到API响应后，需要将结果显示在页面上：
document.getElementById('reply').textContent = data.choices[0].message.content
这里使用了直接操作DOM的方式，在现代前端框架流行的今天，这种原生方法依然简单有效。
完整HTML结构
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>前端调用大模型示例</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<h1>Hello DeepSeek</h1>
<div id="reply"></div>
<script type="module" src="./scripts/app.js"></script>
</body>
</html>
开发心得与总结
通过这个项目，我获得了以下几点经验：
1. 前端调用LLM的可行性
事实证明，前端直接调用大模型API是完全可行的，这为快速原型开发和个人项目提供了便利。但需要注意安全性问题，不建议在生产环境中直接暴露API密钥。
2. HTTP请求的细节重要性
调用外部API时，请求的每个部分都很重要：
- 正确的端点URL
- 恰当的HTTP方法
- 必要的请求头
- 正确格式化的请求体
3. 现代JavaScript特性的价值
ES6+的特性让代码更加简洁：
- 模板字符串
- 箭头函数
- 解构赋值
- async/await
4. 构建工具的重要性
Vite等现代构建工具不仅提供开发服务器和打包功能，还解决了环境变量、模块化等工程化问题。
5. 安全意识的培养
即使是在个人项目中，也应该养成良好的安全习惯，使用环境变量管理敏感信息。
结语
前端技术日新月异，如今我们甚至可以直接在前端调用强大的人工智能模型。这个项目虽然简单，但展示了前端开发的强大能力和无限可能性。作为前端开发者，我们不应该将自己局限在传统的界面开发中，而应该积极探索前端技术的边界。
希望这篇文章能为想要在前端项目中集成AI能力的开发者提供一些参考和启发。前端的世界很精彩，让我们一起探索更多可能性！
注意：本文示例仅适用于开发和测试环境，生产环境中请务必通过后端服务调用第三方API，确保API密钥的安全性。
