前端如何接入 ChatGPT 实现对话ChatGPT 作为一种强大的自然语言处理工具，受到越来越多开发者的关注。如果你是

近年来，ChatGPT 作为一种强大的自然语言处理工具，受到越来越多开发者的关注。如果你是一名前端开发者，希望将 ChatGPT 集成到你的应用中以实现对话功能，那么这篇文章将为你提供一个完整的指南。

一、了解 ChatGPT

ChatGPT 是 OpenAI 提供的语言模型服务，能够根据上下文生成符合语境的自然语言回复。要在前端集成 ChatGPT，我们需要通过 OpenAI 的 API 进行交互。

必备条件

OpenAI API Key：需要注册 OpenAI 账号并获取 API Key。
开发环境：确保你有一个前端项目，支持 JavaScript 或 TypeScript。

二、项目初始化

以 React 为例创建一个前端项目。（详细步骤跳过）

三、创建 OpenAI API 请求模块

在项目中创建一个模块，用于封装与 OpenAI API 的交互。

代码示例

新建一个文件 src/api/openai.ts，编写如下代码：

import axios from 'axios';

const API_URL = 'https://api.openai.com/v1/chat/completions';
const API_KEY = '你获取的 OpenAI API Key'; 

export async function fetchChatGPTRes(messages: { role: string; content: string }[]) {
  try {
    const response = await axios.post(
      API_URL,
      {
        model: 'gpt-3.5-turbo',
        messages,
      },
      {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${API_KEY}`,
        },
      }
    );

    return response.data.choices[0].message.content;
  } catch (error) {
    console.error('Error fetching ChatGPT response:', error);
    throw error;
  }
}

四、构建对话界面

在 React 中创建一个简单的对话界面，允许用户输入消息并显示回复。

界面代码示例

新建文件 src/components/Chat.tsx：

import React, { useState } from 'react';
import { fetchChatGPTRes } from '../api/openai';

const Chat: React.FC = () => {
  const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {
    if (!input.trim()) return;

    const newMessages = [...messages, { role: 'user', content: input }];
    setMessages(newMessages);
    setInput('');
    setLoading(true);

    try {
      const response = await fetchChatGPTRes(newMessages);
      setMessages([...newMessages, { role: 'assistant', content: response }]);
    } catch (error) {
      alert('获取回复时出错，请稍后再试。');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>ChatGPT 对话</h1>
      <div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '5px', marginBottom: '10px' }}>
        {messages.map((msg, index) => (
          <div key={index} style={{ marginBottom: '10px' }}>
            <strong>{msg.role === 'user' ? '用户' : 'ChatGPT'}:</strong>
            <p>{msg.content}</p>
          </div>
        ))}
        {loading && <p>加载中...</p>}
      </div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="输入消息..."
        style={{ width: '80%', padding: '10px', marginRight: '10px' }}
      />
      <button onClick={handleSend} disabled={loading} style={{ padding: '10px 20px' }}>
        发送
      </button>
    </div>
  );
};

export default Chat;

五、运行项目

在 src/App.tsx 中引入 Chat 组件：

import React from 'react';
import Chat from './components/Chat';

const App: React.FC = () => {
  return <Chat />;
};

export default App;

启动项目：

npm start

打开浏览器，访问 http://localhost:3000，即可看到一个可以与 ChatGPT 对话的界面。

六、其他建议

消息持久化：将消息存储在本地或远程数据库，以便用户刷新页面后仍可查看历史记录。
异常处理：为用户提供更友好的错误提示，比如网络问题、API 限制等。
样式优化：使用 UI 框架（如 Ant Design ）美化界面。
性能提升：在请求期间显示加载动画，避免用户误操作。

七、总结

通过以上步骤，我们成功在前端应用中集成了 ChatGPT，实现了一个基础的对话功能。