ChatGPT客户端开发指南：从零构建你的AI对话应用

1次阅读

没有评论

共计 3785 个字符，预计需要花费 10 分钟才能阅读完成。

ChatGPT 是 OpenAI 推出的大型语言模型，通过 API 可以将其集成到各种应用中。虽然 OpenAI 提供了网页版 ChatGPT，但开发自定义客户端有诸多优势：

可以定制界面和交互方式
能够与其他系统深度集成
可以保存对话历史到本地
能够针对特定场景优化体验

OpenAI 提供了完善的 API 文档，使得开发者可以轻松构建自己的 ChatGPT 客户端。接下来，我们就一步步实现一个基础但功能完整的客户端应用。

在开始构建之前，我们需要选择合适的技术栈。这里有几个关键选择需要考虑：

React：组件化开发，生态丰富，适合复杂交互
Vue：轻量易学，适合快速开发

我们选择 React，因为它的社区支持更好，且更适合构建交互复杂的应用。

Node.js：与前端技术栈一致，适合全栈开发
Python：AI 生态完善，但需要额外学习

选择 Node.js 可以保持技术栈统一，简化开发流程。

首先需要设置 API 密钥并创建基础请求函数。在 Node.js 中：

const {Configuration, OpenAIApi} = require('openai');

const configuration = new Configuration({apiKey: process.env.OPENAI_API_KEY,});

const openai = new OpenAIApi(configuration);

async function getChatResponse(messages) {
  try {
    const completion = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: messages,
      temperature: 0.7,
    });
    return completion.data.choices[0].message.content;
  } catch (error) {console.error('API 调用错误:', error);
    throw error;
  }
}

为了保持对话上下文，我们需要管理对话历史：

class Conversation {constructor() {this.history = [];
  }

  addMessage(role, content) {this.history.push({ role, content});
  }

  getHistory() {return [...this.history];
  }

  clear() {this.history = [];
  }
}

流式响应可以提升用户体验，避免长时间等待：

async function streamChatResponse(messages, onData) {
  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,
      stream: true
    })
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let result = '';

  while (true) {const { done, value} = await reader.read();
    if (done) break;

    const chunk = decoder.decode(value);
    const lines = chunk.split('\n').filter(line => line.trim() !== '');

    for (const line of lines) {const message = line.replace(/^data: /, '');
      if (message === '[DONE]') {return result;}

      try {const parsed = JSON.parse(message);
        const content = parsed.choices[0]?.delta?.content;
        if (content) {
          result += content;
          onData(content);
        }
      } catch (error) {console.error('解析错误:', error);
      }
    }
  }
}

下面是一个完整的 React+Node.js 实现。首先创建一个简单的 React 组件：

import React, {useState, useRef} from 'react';

function ChatApp() {const [input, setInput] = useState('');
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const conversationRef = useRef(new Conversation());

  const handleSubmit = async (e) => {e.preventDefault();
    if (!input.trim() || isLoading) return;

    const userMessage = {sender: 'user', text: input};
    setMessages(prev => [...prev, userMessage]);
    conversationRef.current.addMessage('user', input);

    setIsLoading(true);
    setInput('');

    try {
      let assistantMessage = '';
      const onData = (chunk) => {
        assistantMessage += chunk;
        setMessages(prev => {const last = prev[prev.length - 1];
          if (last?.sender === 'assistant') {return [...prev.slice(0, -1), {...last, text: assistantMessage}];
          }
          return [...prev, { sender: 'assistant', text: assistantMessage}];
        });
      };

      await streamChatResponse(conversationRef.current.getHistory(), onData);
      conversationRef.current.addMessage('assistant', assistantMessage);
    } catch (error) {
      setMessages(prev => [...prev, { 
        sender: 'error', 
        text: '抱歉，发生错误，请重试' 
      }]);
    } finally {setIsLoading(false);
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (<div key={i} className={`message ${msg.sender}`}>
            {msg.text}
          </div>
        ))}
        {isLoading && <div className="message assistant"> 思考中...</div>}
      </div>

      <form onSubmit={handleSubmit}>
        <input 
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="输入消息..."
          disabled={isLoading}
        />
        <button type="submit" disabled={isLoading}> 发送 </button>
      </form>
    </div>
  );
}