引言
随着 ChatGPT 等大模型的爆发,AI 能力正以前所未有的速度渗透到 Web 应用的每个角落。作为前端开发者,我们不再只是数据展示的'搬运工',而是可以直接与 AI 对话、构建智能应用的'魔术师'。本文将带你深入探索前端调用大模型的完整技术栈,从基础原理到高级实践,助你在 AI 时代抢占技术先机。
核心接入方式
1. 直接 API 调用
这是最直接的交互方式,适合快速原型验证,但需注意密钥安全。
// 使用 Fetch API 直接调用 OpenAI
const callOpenAI = async (prompt) => {
const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: prompt }],
temperature: 0.7
})
});
return await response.json();
};
2. SDK 封装
使用官方 SDK 能获得更优雅的开发体验,支持流式响应等高级特性。
// 使用 OpenAI 官方 SDK
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process..,
:
});
= () => {
completion = openai...({
: ,
: [
{ : , : },
{ : , : }
],
:
});
( chunk completion) {
.(chunk.[]?.?. || );
}
};


