跳到主要内容 AI 在前端开发中的应用场景与实践 | 极客日志
JavaScript AI 大前端
AI 在前端开发中的应用场景与实践 AI 在前端开发中的多种应用，涵盖自定义 GPT 交互、知识库问答（RAG/MCP）、提效工具（代码生成、设计稿转代码）、前端模型部署及软实力辅助。同时探讨了 AI 代码维护风险、上下文管理策略及能源消耗问题，强调 AI 应作为提效工具而非替代专业人员，帮助开发者在保障可维护性的前提下利用 AI 技术提升工作效率。
独立开发者 发布于 2026/4/6 更新于 2026/4/12 AI 在前端开发中的应用
在 AI 的高速发展中，前端开发也在 AI 工具中发挥着举足轻重的作用。合理利用工具，能在工作中显著提升效率。本文介绍一些前端与 AI 结合的场景，不限于接入，也包含一些工具的使用。
1、自定义 GPT 场景
在自定义 GPT 场景中，前端的核心职责是搭建'用户 - 自定义 GPT'的交互入口，同时支撑 GPT 的个性化配置、功能扩展与数据可视化，需围绕'交互体验、配置能力、集成适配'三大核心展开工作。
Ant Design 提供给前端开发者快速开发 AI 相关的 UI 组件库：https://ant-design-x.antgroup.com
SSE 是一种基于 HTTP 协议的数据传输方式，它允许服务端向客户端推送数据。前端可以通过 SSE 实现 GPT 的实时对话，用户输入问题，GPT 返回结果。选择这种方式是因为 GPT 返回结果往往较长，流式传入能让用户体验更友好；而 WebSocket 长连接占用资源过多，服务器长连接数有限，因此推荐使用 SSE。
可以直接使用微软的 SSE 库：https://github.com/microsoft/fetch-event-source
npm i -S @microsoft/fetch-event-source
使用也很简单，注意处理 onerror，否则发生错误后还会一直尝试请求。
import { fetchEventSource } from '@microsoft/fetch-event-source' ;
fetchEventSource (`${process.env.API_MOLSCI_URL} /v1/chat` , {
method : 'POST' ,
headers : {
'Content-Type' : 'application/json' ,
},
body : JSON .stringify (data),
openWhenHidden : true ,
onopen (console .log ('连接成功' );
},
onmessage (event ) {
console .log ('传输内容' , event);
},
onclose (console .log ('连接关闭' );
微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 RSA密钥对生成器 生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
Mermaid 预览与可视化编辑 基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
Keycode 信息 查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码 JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化 使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆 Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
return
false
onerror
err
console
error
'连接错误'
throw
GPT 对话框，用户输入问题，GPT 返回结果。用户刷新后，能查看到聊天记录。
我们可以封装 Chat 的 Hooks，实现这些通用的数据处理逻辑：
export function useChat (const [historyList, setHistoryList] = React .useState ([]);
const [messageList, setMessageListState] = React .useState ([]);
const renderList = [...historyList, ...messageList];
return { renderList };
}
GPT 有时候返回的是纯文本，有时候是 markdown，所以需要处理 markdown。
import ReactMarkdown from 'react-markdown' ;
<ReactMarkdown > {str}</ReactMarkdown > 划词翻译、解释，前端开发需要实现划词翻译、解释，用户输入问题，GPT 返回结果。用户刷新后，能查看到聊天记录。
利用 window?.getSelection 来获取划词文本，然后传入 Chat 进行后续对话。
const SelectableText = (const [selectedText, setSelectedText] = useState ('' );
const [isShowChatTranslateDrawer, setIsShowChatTranslateDrawer] = useState (false );
const debounceHandlerMouseup = _lodash.debounce (handlerMouseup, 200 );
useEffect (() => {
window .addEventListener ('mouseup' , debounceHandlerMouseup);
window .addEventListener ('click' , handleOnWindowClick);
return () => {
window .removeEventListener ('mouseup' , debounceHandlerMouseup);
window .removeEventListener ('click' , handleOnWindowClick);
};
}, []);
function handlerMouseup (event ) {
const selectedText = window ?.getSelection ? window ?.getSelection ()?.toString () || '' : '' ;
initCardPos (event);
setSelectedText (selectedText);
}
function handleOnWindowClick (setIsShowChatTranslateDrawer (false );
}
function initCardPos (event ) { }
};
export default SelectableText ;
2、知识库问答场景 在纯调模型的基础上，与企业自己数据库结合，使用 RAG、MCP 等技术接入自己的数据。现在很多企业都在做自己的知识库，利用企业内部数据库与大模型结合，实现知识库的检索。这时候，前端开发需要实现 GPT 对话框，让用户输入问题，然后通过 API 调用 GPT 模型，返回结果。
RAG (Retrieval-Augmented Generation，检索增强生成) 是融合检索技术与生成模型的人工智能框架。
通俗的讲，就是在调用 GPT 模型时，先调用向量数据库，获取相关的数据，作为 GPT 的预设，然后调用 GPT 模型，返回结果。比如：我们系统中有一些专业术语的翻译，如果不告知 GPT，那么就是纯靠运气，它返回什么就是什么了，RAG 的作用就是先告诉 GPT 这些专业术语的翻译是什么，那么 GPT 就会按照这个翻译进行翻译，而不是纯靠运气。
MCP（Model Context Protocol，模型上下文协议），2024 年 11 月底，由 Anthropic 推出的一种开放标准，旨在统一大模型与外部数据源和工具之间的通信协议。MCP 的主要目的在于解决当前 AI 模型因数据孤岛限制而无法充分发挥潜力的难题，MCP 使得 AI 应用能够安全地访问和操作本地及远程数据，为 AI 应用提供了连接万物的接口。
通俗的讲，MCP 的作用就是让 GPT 模型在自身功能无法实现，可以调用提供给它的工具，比如：数据库、文件、API、工具等。MCP 协议的话规范了参数的格式，所有企业与大模型都遵守这个规范，那么就能随意切换任何模型使用，算是统一了标准。
RAG 是纯后端预设向量数据库，基本与前端无关。MCP 工具调用，前端需要在 SSE 中捕获到工具调用的指令时，处理工具调用，然后调用工具，带上工具的参数，再次调用 GPT，继续对话，直至完成对话结果。
当然这是我的思路，大家可以自由发挥，毕竟通向罗马的路不止一条。
3、AI 提效工具 在日常工作中，确实很多 AI 工具能助力我们提效，比如：
（1）代码提示工具 最早在这个赛道，一度收费导致用户量上不去。GitHub Copilot 是 GitHub 推出的代码提示工具，基于 GPT 模型，可以提供代码提示、代码补全、代码重构、代码生成、代码注释、代码测试、代码调试等功能。
我目前用的，阿里推出的语言模型，基于通义千问，提供代码提示、代码补全、代码重构、代码生成、代码注释、代码测试、代码调试等功能。
字节推出的代码提示工具，基于字节的 Mars 模型，提供代码提示、代码补全、代码重构、代码生成、代码注释、代码测试、代码调试等功能。
（2）编辑器 高度适配 AI 模型的编辑器，市面上也有几种，比如：
Cursor 是由 Anysphere 开发的 AI 代码编辑器，集成 GPT-4o 等大语言模型，提供代码补全、重构、自然语言生成等功能。该工具支持中英双语环境，国内用户可通过特定方式使用。
Trae 是由字节团队开发的 AI 代码编辑器，基于字节的 Mars 模型，提供代码补全、重构、代码生成、代码注释、代码测试、代码调试等功能。该工具支持中英双语环境，国内用户可通过特定方式使用。
这是阿里云旗下首个 AI 原生的开发环境工具，深度适配了最新的千问 3 大模型，并集成国内最大的魔搭 MCP 市场，可调用超过 3000 个 MCP 服务，一键安装部署。
（3）设计稿转代码 9 月 23 日，Figma 正式推出官方远程 MCP（Model Context Protocol）服务器，这一创新工具彻底摆脱了对 Figma 客户端的依赖，让 AI 编码代理无缝接入设计上下文。
可以在 Trae 中，配置 MCP Server - Figma AI Bridge，配置智能体，然后使用指令自动生成前端页面。
Vercel 宣布推出了 V0.dev，这是一款专为开发人员和设计师设计的工具，能够使用 AI 生成 React 代码。
总的来说，目前 AI 在将设计稿转成代码时，还是无法达到交付效果的，并且大型项目及维护，还是需要专业的技术人员。AI 并不是替代人员，而是让开发更高效，将重复率高，高复用的轮子共享。
（4）自动化测试 Parasoft Selenic 通过 AI 技术赋能 Selenium 测试，实现了智能识别真实回归问题、自动修复定位器以及增强定位器和等待条件策略等多项强大功能，有效提高了测试的效率和稳定性，降低了维护成本。
Testim 是 AI 驱动的端到端自动化测试平台，支持 Web 和移动应用测试。
4、纯前端模型 其实前端还是不太好搭上模型的车，毕竟模型吃配置，直接在客户端运行模型很耗内存，所以只能通过服务端运行模型，然后通过 SSE 将结果返回给前端。但是服务端运行的成本随用户量递增，这时候如果能把小的模型放在前端，无疑为企业节省很多成本，那么这个思路就出现了。
比较经典的库了，支持在浏览器端运行神经网络模型，适用于图像分类、表单自动填充等场景。需注意模型体积需控制在合理范围内以避免页面加载延迟。
import * as mobilenet from '@tensorflow-models/mobilenet' ;
async function classifyImage (imageElement ) {
const model = await mobilenet.load ();
const predictions = await model.classify (imageElement);
return predictions.map (pred =>label : pred.className ,
probability : (pred.probability * 100 ).toFixed (2 ) + '%'
}));
}
const img = document .getElementById ('product-image' );
img.onload = async () => {
const results = await classifyImage (img);
console .log ('识别结果:' , results);
};
Web Worker 是 JavaScript 的一个内置对象，允许我们创建一个线程来执行任务，从而提高应用程序的性能。当我们在客户端加载模型，使用 Web Worker 时，模型会运行在另一个线程中，不会阻塞主线程，从而提高应用程序的性能。
const worker = new Worker ('worker.js' );
worker.postMessage ({ type : 'init' });
worker.onmessage = (e ) => {
if (e.data .predictions ) {
console .log ('Worker 返回结果:' , e.data .predictions );
}
};
WebAssembly 是一种用于在浏览器中运行二进制代码的格式，它可以在浏览器中运行 JavaScript 代码，并且与 JavaScript 兼容。
可以将模型转换成 WebAssembly 格式，然后使用 WebAssembly 来运行模型。
还有些复杂运算 js 不太适合去做，这时候很多前端选择 Rust 来编写，然后编译成 WebAssembly，然后通过 WebAssembly 来运行。
Rust 有插件可以直接生成 WebAssembly
wasm-pack build --target web
import init, { add, fib } from './math_ops.js' ;
async function run (await init ();
const sum = add (3 , 5 );
console .log ('3 + 5 =' , sum);
}
run ();
5、AI 在软实力中使用 其实工作中，一些事情让 AI 帮忙，能事半功倍，比如：
比如使用 DeepSeek 或任何 GPT，让其生成一组测试数据，有的甚至能要求给 excel。
以下是一个例子，比较符合现在 GPT 的 prompt：
你是一名测试工程师 你现在正在编写测试用例，请生成 2 条用户数据，包含姓名、手机号、邮箱、地址 以 JSON 格式返回
[
{ "姓名" : "陈宇" , "手机号" : "13812345678" , "邮箱" : "[email protected] " , "地址" : "广州市天河区珠江新城华穗路 263 号" } ,
{ "姓名" : "林晓" , "手机号" : "1398754321" , "邮箱" : "[email protected] " , "地址" : "杭州市西湖区文三路 98 号东方通信大厦 15 层" }
]
可以利用 DeepSeek 生成 PPT 的大纲，然后使用 kimi 来生成 PPT。
比如：让 DeepSeek 生成一个高级前端工程师年度述职的 PPT 大纲
你是一名高级前端工程师 你这一年完成的工作内容有：Q1 1. 创建了 1000 个页面 Q2 1. 创建了 5000 个组件 Q3 1. 创建了 10000 个接口 Q4 1. 创建了 50000 个测试用例 你要生成一个年度述职 PPT 的大纲
然后再把这个大纲给 kimi，kimi 会生成 PPT。
可以利用 GPT 生成会议纪要，钉钉、飞书之类的办公软件都有会议纪要的功能。
6、思考 如果一个公司要求全用 AI 对话式编码，那么这个公司就会失去代码维护的技能，网上很多总是说用 AI 的话，2 个小时能做出一个什么样的程序出来，但是这个程序后续没法维护的，功能基本是什么样就什么样了。
就像我用 Trae，让他用 Rust 实现一个将 html 字符串转成 word 的功能，尽管向他提出问题后，都能不断去改，但是依然无法达到预期，而且它设计的代码，根本无法二次开发。
还有就是前端代码，如果直接从设计稿用 AI 转成代码，会用上 unocss，也无法从全局层面考虑问题，只能逐个组件考虑。这样的 AI 代码，如果被某公司的外包部门买回去，然后招开发进去维护，简直比裁缝机还惨。
如果要和 AI 对话，那么上下文很重要，如果上下文不够，那么 AI 就会重复回答，或者回答错误。之后根据上下文内容，AI 才能理解到语义，从而给出更好的答案。
但是很多用户都是全用一个窗口和 AI 对话，那么全部的上下文都会被保存，里面的内容太杂太乱，就会导致搜索困难，或者搜索结果不准确。所以我会根据问题的类型，开启新对话，而普通用户恐怕就不知道了。
上下文越多，对 tokens 的消耗就越高，然后对服务器的 CPU 计算，内存消耗，带宽的消耗，都会增加。
AI 对全球电力的消耗呈现快速增长趋势，预计到 2030 年数据中心用电量可能翻倍。大多企业都在自建数据中心，但是自建数据中心需要耗费大量电，而 AI 的计算能力也受电力限制。
AI 图形训练需要大量显存，导致现在英伟达的显卡价格已经比 CPU 高了，这也是需要能源消耗
7 B 参数模型：FP16 精度下需要约 14 GB 显存，INT4 量化后可降至 3.5 -4.9 GB 显存。推荐配置为 NVIDIA RTX 3060 (8 GB 显存) 或更高，32 GB 内存，1 TB NVMe SSD 13 B 参数模型：FP16 需要 26 GB 显存，INT4 量化后约 6.5 -9.1 GB 显存。推荐 NVIDIA RTX 3090 (24 GB 显存) 或 A4000 (16 GB 显存)，64 GB 内存 70 B 参数模型：FP16 需要 140 GB 显存，INT4 量化后约 35 -49 GB 显存。通常需要多 GPU 配置，如 2 ×NVIDIA A100 80 GB 或 4 ×RTX 4090 (通过 NVLink 并联)
DeepSeek 之所以能火，就是它在实现 8-90% 的能力基础上，对硬件的运用能力进行了优化，大幅降低了成本。
现在 AI 的发展，基本都是在软件层面突飞猛进，在硬件层面却很缓慢，宇树科技制造的机器人确实让人眼前一亮。我们不是希望重复枯燥的事情交给机器人去做，而内容创作，具有创造力的事情人类自己做，然而这个发展势头却恰恰相反。
