前端直连大模型实战指南与最佳实践

引言

随着 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.env.OPENAI_API_KEY,
  dangerouslyAllowBrowser: true // 注意：浏览器端使用需谨慎
});

const generateText = async () => {
  const completion = await openai.chat.completions.create({
    model: "gpt-3.5-turbo",
    messages: [
      { role: "system", content: "你是一个前端专家" },
      { role: "user", content: "解释 React Hooks 的工作原理" }
    ],
    stream: true // 启用流式响应
  });

  // 处理流式响应
  for await (const chunk of completion) {
    console.log(chunk.choices[0]?.delta?.content || '');
  }
};

3. 代理服务器模式

这是最安全的企业级方案。前端只请求本地接口，由后端管理密钥和限流策略。

// 前端调用本地代理
const callAIViaProxy = async (message) => {
  const response = await fetch('/api/ai-proxy', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message })
  });
  return response.json();
};

// Node.js 代理服务器示例
// server.js
app.post('/api/ai-proxy', async (req, res) => {
  const { message } = req.body;
  // 在这里安全地调用大模型 API
  const aiResponse = await callOpenAI(message);
  // 可以添加日志、限流、缓存等逻辑
  logAIRequest(req.user.id, message);
  res.json(aiResponse);
});

4. WebSocket 实时通信

最适合聊天场景，能保持长连接并实现低延迟的双向通信。

// 前端 WebSocket 连接
class AIChatSocket {
  constructor(url) {
    this.socket = new WebSocket(url);
    this.init();
  }

  init() {
    this.socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.onMessage(data);
    };
    this.socket.onopen = () => {
      console.log('AI 连接已建立');
    };
  }

  sendMessage(message) {
    this.socket.send(JSON.stringify({ type: 'chat', content: message }));
  }

  onMessage(data) {
    // 处理 AI 响应
    if (data.type === 'stream') {
      console.log('收到流式数据:', data.content);
    }
  }
}

完整实战：构建智能代码助手应用

项目结构

smart-code-assistant/
├── src/
│   ├── components/
│   │   ├── CodeEditor/
│   │   ├── ChatPanel/
│   │   └── HistoryPanel/
│   ├── services/
│   │   ├── aiService.js
│   │   ├── cacheService.js
│   │   └── securityService.js
│   ├── utils/
│   └── App.js
└── server/
    └── proxy-server.js

核心 AI 服务层实现

在真实项目中，我们需要一个统一的服务层来处理缓存、限流和错误重试。

// src/services/aiService.js
class AIService {
  constructor() {
    this.baseURL = process.env.REACT_APP_AI_PROXY_URL;
    this.cache = new Map();
    this.requestQueue = [];
    this.isProcessing = false;
  }

  // 带缓存的 AI 请求
  async requestWithCache(prompt, options = {}) {
    const cacheKey = this.generateCacheKey(prompt, options);
    
    // 检查缓存
    if (this.cache.has(cacheKey) && !options.forceRefresh) {
      return this.cache.get(cacheKey);
    }

    // 限流处理
    if (this.requestQueue.length >= 5) {
      throw new Error('请求过于频繁，请稍后再试');
    }

    return new Promise((resolve, reject) => {
      this.requestQueue.push({ prompt, options, resolve, reject });
      this.processQueue();
    });
  }

  // 处理请求队列
  async processQueue() {
    if (this.isProcessing || this.requestQueue.length === 0) return;
    this.isProcessing = true;
    const request = this.requestQueue.shift();

    try {
      const response = await this.makeAIRequest(request.prompt, request.options);
      this.cache.set(
        this.generateCacheKey(request.prompt, request.options),
        response
      );
      request.resolve(response);
    } catch (error) {
      request.reject(error);
    } finally {
      this.isProcessing = false;
      this.processQueue();
    }
  }

  // 实际 AI 请求
  async makeAIRequest(prompt, options) {
    const response = await fetch(`${this.baseURL}/completions`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Request-ID': this.generateRequestId()
      },
      body: JSON.stringify({
        prompt,
        model: options.model || 'gpt-3.5-turbo',
        max_tokens: options.maxTokens || 1000,
        temperature: options.temperature || 0.7
      })
    });

    if (!response.ok) {
      throw new Error(`AI 请求失败：${response.status}`);
    }
    return response.json();
  }

  // 流式响应处理
  async *streamCompletion(prompt) {
    const response = await fetch(`${this.baseURL}/completions/stream`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt })
    });
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const chunk = decoder.decode(value);
      const lines = chunk.split('\n').filter(line => line.startsWith('data:') && !line.includes('[DONE]'));
      
      for (const line of lines) {
        try {
          const json = JSON.parse(line.replace('data:', ''));
          if (json.choices?.[0]?.delta?.content) {
            yield json.choices[0].delta.content;
          }
        } catch (e) {}
      }
    }
  }

  generateCacheKey(prompt, options) {
    return `${prompt}-${JSON.stringify(options)}`;
  }

  generateRequestId() {
    return Math.random().toString(36).substring(2);
  }
}

通过上述服务层，我们可以轻松地在不同组件间复用 AI 能力，同时保证请求的安全性和稳定性。在实际开发中，建议结合具体的业务场景选择合适的接入方式，并在生产环境中严格做好密钥管理和流量控制。