手把手教你：用前端代码调用DeepSeek大模型，30行代码实现AI对话在当今AI热潮中，大语言模型（LLM）已成为We

在当今AI热潮中，大语言模型（LLM）已成为Web应用的标配功能。但很多开发者以为调用LLM必须依赖后端，其实纯前端也能直接调用！今天我将带大家用30行代码实现一个完整的DeepSeek AI对话界面，全程无后端，手把手教你从零开始。

💡 掘金小贴士：本文已实测可用，代码可直接复制运行，无需任何后端知识，适合前端新手快速上手。

一、为什么前端能直接调用LLM？

传统认知中，API密钥必须放在后端防止泄露。但现代大模型API（如DeepSeek）支持前端直接调用，只需在前端环境变量中安全存储密钥（Vite会自动处理），同时API服务已做好CORS配置，无需后端代理！

二、项目初始化：3步搞定

1️⃣ 创建Vite项目（全栈脚手架）

# 创建项目
npm create vite@latest deepseek-frontend -- --template vanilla

# 选择框架（直接回车选默认Vanilla）
# 进入项目
cd deepseek-frontend
# 安装依赖
npm install

2️⃣ 配置环境变量（安全存储API密钥）

创建.env文件（切勿提交到Git）：

# .env 文件内容
VITE_DEEPSEEK_API_KEY=your_api_key_here

🔒 安全提示：Vite的VITE_前缀会将变量注入前端，但不会暴露在生产代码中。确保.gitignore包含.env！

3️⃣ 安装依赖（可选）

# 如果需要CSS框架，安装Tailwind（非必需）
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

三、核心代码实现（30行搞定）

📌 关键逻辑拆解

部分	作用	为什么重要
`fetch`	发送HTTP请求	前端调用API的核心
`import.meta.env`	安全获取API密钥	避免密钥泄露
`JSON.stringify`	格式化请求体	大模型API要求JSON格式
`async/await`	简化异步流程	比`.then()`更直观

🧩 完整代码（main.js）

// 1. 配置API地址和密钥（安全获取）
const endpoint = 'https://api.deepseek.com/v1/chat/completions';
const apiKey = import.meta.env.VITE_DEEPSEEK_API_KEY;

// 2. 检查密钥是否配置（安全防护）
if (!apiKey) {
  alert('请在.env文件中配置VITE_DEEPSEEK_API_KEY');
  throw new Error('API Key缺失');
}

// 3. 获取DOM元素（用户输入和显示区域）
const userInput = document.getElementById('userInput');
const sendBtn = document.getElementById('sendBtn');
const replyDiv = document.getElementById('reply');

// 4. 发送消息的核心逻辑（重点！）
async function sendMessage() {
  const userMessage = userInput.value.trim();
  if (!userMessage) return;

  // 显示用户消息（实时反馈）
  replyDiv.innerHTML += `<div class="user-msg"><strong>你:</strong> ${userMessage}</div>`;
  userInput.value = '';

  try {
    // 构建请求体（关键：符合DeepSeek API规范）
    const payload = {
      model: 'deepseek-chat',
      messages: [
        { role: "system", content: "You are a helpful assistant." },
        { role: "user", content: userMessage }
      ]
    };

    // 发送请求（关键：正确设置请求头）
    const response = await fetch(endpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify(payload)
    });

    // 处理响应（错误检查+结果提取）
    if (!response.ok) throw new Error(`API错误: ${response.status}`);
    
    const data = await response.json();
    const assistantMessage = data.choices[0].message.content;

    // 显示AI回复（滚动到底部）
    replyDiv.innerHTML += `<div class="ai-msg"><strong>DeepSeek:</strong> ${assistantMessage}</div>`;
    replyDiv.scrollTop = replyDiv.scrollHeight;
  } catch (error) {
    replyDiv.innerHTML += `<div class="error">❌ 错误: ${error.message}</div>`;
  }
}

// 5. 绑定事件（点击发送/回车触发）
sendBtn.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', e => e.key === 'Enter' && sendMessage());

📌 配套HTML（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>DeepSeek AI对话</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>DeepSeek AI对话</h1>
  <div class="chat-container">
    <div id="reply"></div>
    <div class="input-area">
      <input type="text" id="userInput" placeholder="输入你的问题...">
      <button id="sendBtn">发送</button>
    </div>
  </div>
  <script type="module" src="main.js"></script>
</body>
</html>

🎨 简单CSS（styles.css）

.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
}

.user-msg {
  text-align: right;
  margin: 10px 0;
  color: #1890ff;
}

.ai-msg {
  margin: 10px 0;
  color: #52c41a;
}

.input-area {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

button {
  padding: 0 20px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #40a9ff;
}

四、运行与测试

配置API密钥：在.env文件填入你的DeepSeek API Key
启动项目：
```
npm run dev
```
访问地址：打开http://localhost:5173
输入问题：例如"解释一下前端调用大模型的原理"
查看结果：AI会实时返回回答！

![运行效果]

（实际运行效果：输入后AI自动回复，界面简洁美观）

五、常见问题解决

问题	解决方案
`API Key not configured`	检查`.env`文件是否在项目根目录，且变量名是`VITE_DEEPSEEK_API_KEY`
`CORS错误`	DeepSeek API已支持CORS，无需处理（如果报错检查网络代理）
无响应	检查API地址是否正确（注意`api.deepseek.com`是正确域名）
速率限制	DeepSeek免费版有调用次数限制，建议用测试密钥

结语

通过本文，你已掌握纯前端调用DeepSeek API的核心技术。无需后端、无需复杂配置，30行代码就能让AI对话功能落地。这不仅适用于学习项目，更能快速验证产品创意——前端也能玩转AI！

🔥 行动号召：现在就复制代码运行起来！在掘金评论区留下你的体验，我会精选优质评论送技术资料。点击右上角「收藏」，下次需要时直接找回来！