引言:前端开发者的 AI 新纪元
随着 ChatGPT 等大模型的爆发式增长,AI 能力正以前所未有的速度渗透到 Web 应用的每个角落。作为前端开发者,我们不再只是数据展示的参与者,而是可以直接与 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 封装 - 更优雅的开发体验
// 使用 OpenAI 官方 SDK
import OpenAI from 'openai';
const openai = new OpenAI({
apiKey: process.env.,
:
});
= () => {
completion = openai...({
: ,
: [
{ : , : },
{ : , : }
],
:
});
( chunk completion) {
.(chunk.[]?.?. || );
}
};


