还记得我们以前写网页的时候，Zui大的烦恼就是怎么把CSS居中搞对吗？那时候谁Neng想到，今天的我们竟然在讨论怎么把一个拥有千亿参数的“大脑”塞进浏览器里。是的，大语言模型Yi经不再是后端工程师的专属玩具了。作为一名在前线摸爬滚打多年的开发者，我明显感觉到风向变了——用户不再满足于死板的表单提交，他们想要的是Neng聊天的界面、Neng自动生成的文案，甚至是Neng帮他们写代码的智Neng助手。

但是说实话，要把这头“巨兽”驯服在前端项目里并不是一件轻松的事。你可Neng会遇到跨域的拦路虎，也会为了API Key的安全问题彻夜难眠。别担心，今天我们就抛开那些枯燥的教科书式定义，用一种geng接地气、geng实战的方式，聊聊如何在前端项目中集成大语言模型。无论你是Vue的死忠粉，还是React的拥趸，亦或是还在用原生JS奋斗，这篇文章douNeng给你带来一些新的启发。

它显得有点“笨重”了。

试想一下当用户这种延迟足以打断用户的思路。直接在前端发起HTTP请求，不仅Neng减少这一跳的延迟，还Neng在一定程度上减轻后端服务器的压力——毕竟谁不想省点服务器费用呢？

当然这并不是说后端就不重要了。安全、鉴权、复杂的业务逻辑依然离不开后端。但对于那些原型验证、个人工具，或者对实时性要求极高的场景，前端直接调用大模型正在成为一种新趋势。甚至像Qwen3-1.7B这样的轻量级模型，Yi经Ke以在本地浏览器中通过WebAssembly技术运行，这简直是前端开发者的福音。

在开始敲代码之前，我们得先把环境收拾利索。这里我假设你选择的是目前Zui火热的构建工具Vite，毕竟它的热geng新速度简直让人上瘾。当然Webpack也没问题，只是配置起来会稍微繁琐一点，可Neng会让你掉几根头发。

你得有一个像样的项目骨架。Ru果你还没创建，那就赶紧打开终端，`npm create vite@latest` 走起。创建完成后别急着写组件，先处理Zui让人头疼的环境变量问题。

hen多新手朋友容易犯的一个错误，就是直接把API Key硬编码在代码里。这简直是把家门钥匙贴在门上，还告诉全世界“我家没人”。千万别这么Zuo！我们需要使用`.env`文件来管理这些敏感信息。

在项目根目录下新建一个`.env`文件。在这里我们需要定义我们的密钥。Vite有一个特殊的癖好，它要求环境变量必须以`VITE_`开头，这样才Neng在客户端代码中通过`import.meta.env`访问到。

# .env 文件示例
# 这里的DEEPSEEK只是个代号，你Ke以换成OPENAI或者任何你喜欢的名字
VITE_DEEPSEEK_KEY=sk-your-actual-api-key-here

写完这一行，记得一定要把`.env`加入到`.gitignore`文件中！这是底线，否则哪天你把代码推到GitHub上，API Key泄露了哭dou来不及。

虽然原生的`fetch`APIYi经足够强大，但Ru果你打算Zuo一些复杂的逻辑编排，比如构建Agent或者链式调用，那么引入LangChain这样的框架会省下不少力气。LangChain提供了TypeScript的SDK，非常契合前端的生态。

npm install @langchain/core @langchain/openai
# 或者Ru果你只是想简单调用，其实连这个dou不需要装

不过为了让你geng透彻地理解底层原理，接下来的部分，我会尽量用原生的JavaScript来演示。毕竟知其然还要知其所以然不是吗？

好了环境搭好了密钥也藏好了。现在到了Zui激动人心的时刻——让我们的网页开口说话。这里我们以调用DeepSeek或者兼容OpenAI格式的接口为例，因为目前市面上大多数模型接口dou长得跟OpenAIhen像，这算是一种行业标准吧。

我们为什么不推荐用Axios？虽然Axios是个好东西，但在处理流式传输的时候，它显得有点力不从心，需要额外的配置才Neng搞定。而原生的`fetch`API配合`ReadableStream`，处理流式数据简直是如丝般顺滑。

流式传输对于聊天体验至关重要。你肯定不希望盯着屏幕发呆五秒钟，然后突然蹦出一大段文字。我们想要的是那种像打字机一样，一个字一个字往外蹦的效果，这会让用户感觉AI正在实时思考。

下面是一个封装好的请求示例，我特意加了一些注释，希望Neng帮你理解每一步在Zuo什么：

async function chatWithAI {
  const apiKey = import.meta.env.VITE_DEEPSEEK_KEY;
  try {
    const response = await fetch("/api/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        model: "deepseek-chat", // 或者是你使用的其他模型名称
        messages: messages,
        stream: true // 关键：开启流式输出
      })
    });
    if  {
      throw new Error;
    }
    // 处理流式数据
    const reader = response.body.getReader;
    const decoder = new TextDecoder;
    while  {
      const { done, value } = await reader.read;
      if  break;
      const chunk = decoder.decode;
      // 这里需要解析SSE格式的数据，通常是 "data: {...}"
      // 为了演示简洁，这里省略了解析逻辑，实际项目中你需要处理chunk
      console.log;
    }
  } catch  {
    console.error;
  }
}

kan到那个`stream: true`了吗？这就是魔法开关。一旦开启，服务器就不会一次性返回所有结果，而是像挤牙膏一样一点一点地吐数据。前端拿到这些数据块后需要解析其中的`data`字段，然后把内容拼接到页面上。

Ru果你直接在浏览器里请求第三方API，十有八九会碰到CORS错误。浏览器的同源策略虽然保护了用户安全，但也确实给开发者添了不少乱。为了解决这个问题，我们通常会在开发环境下配置代理。

在Vite项目中，这事儿特别简单。打开你的`vite.config.js`，找到`server`配置项，加一段`proxy`配置。

export default defineConfig({
  plugins: ,
  server: {
    proxy: {
      // 当请求路径以 /api 开头时触发代理
      '/api': {
        target: 'https://api.deepseek.com', // 你的目标API地址
        changeOrigin: true, // 改变请求头中的origin，欺骗服务器
        rewrite:  => path.replace // 把 /api 去掉，保持路径正确
      }
    }
  }
});

配置完这一步，记得一定要重启一下开发服务器！这是无数新手踩过的坑——改了配置不重启，Vite根本不买账。重启后当你请求`/api/xxx`时Vite会悄悄帮你转发到目标服务器，浏览器还以为你在请求本地资源呢，完美绕过跨域限制。

前面我们提到了`.env`文件，这确实Neng防止代码泄露。但是一旦项目打包上线，构建工具会把环境变量“打包”进Zui终的JS文件里。这意味着，任何一个懂点技术的用户，只要打开浏览器的开发者工具，在Sources面板里翻一翻，就Neng找到你的API Key。

这听起来是不是有点背脊发凉？

所以这里必须郑重声明：⚠️ 这种前端直接调用API的方式，仅适用于本地开发、内部工具或者你不介意Key泄露的个人项目。Ru果你要Zuo一个面向公网的产品，请务必搭建一个后端服务作为中转。

在后端代理模式下前端只请求你自己的服务器，你的服务器再去请求大模型API。这样，你的Key就安全地躺在服务器的环境变量里外界无从窥探。虽然多了一层转发，稍微增加了一点延迟，但为了安全，这买卖绝对划算。

除了调用云端API，现在还有一种非常酷的玩法——在浏览器里跑大模型。这听起来像天方夜谭，但随着WebAssembly技术的发展，这Yi经成为了现实。

像LlamaEdge这样的项目，允许我们将经过量化的大模型转换成Wasm格式，直接在浏览器端运行。这意味着你的数据根本不需要离开用户的电脑，隐私安全得到了极致的保障，而且还没有网络延迟。

当然这种方式对用户的设备性Neng有一定要求，而且模型文件通常有好几个GB，首次加载可Neng需要一点耐心。但这无疑是未来的大趋势。想象一下你的网页应用不仅Neng聊天还Neng完全离线工作，这感觉是不是有点科幻？

从早期的ELIZA到现在的ChatGPT，从简单的正则匹配到复杂的深度学习，AI与前端交互的方式正在经历一场前所未有的变革。作为前端开发者，我们不再只是“画页面的”，我们正在成为构建智Neng交互体验的架构师。

集成大语言模型，听起来hen高大上，但拆解开来无非就是配置环境、发送请求、处理数据、优化体验这几个老生常谈的步骤。不要被那些复杂的术语吓倒，动手试一试。你会发现，当你的网页第一次“活”过来回复你一句“你好”的时候，那种成就感是无与伦比的。

技术迭代的速度快得让人窒息，也许明天又会出现新的框架、新的工具。但只要我们保持好奇心，不断学习，就没有什么Neng难倒我们。好了废话不多说赶紧去你的项目里试试吧，别忘了把`.env`文件藏好哦！