🔗 Integrate ChatGPT API with axios

server/index.js

@@ -20,7 +20,7 @@ app.post('/chat', async (req, res) => {
  res.json(response);
 });
 
-const PORT = process.env.PORT || 3500;
+const PORT = 3500;
 
 app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);

src/App.js

@@ -1,16 +1,52 @@
-import './App.css';
+import React, { useState } from 'react';
+import axios from 'axios';
+import config from './config';
 import ChatBubble from './components/ChatBubble';
 import ChatInput from './components/ChatInput';
+import './App.css';
+
+const App = () => {
+ const [messages, setMessages] = useState([]);
+
+ const addMessage = (message, isUser) => {
+ setMessages((prevMessages) => [...prevMessages, { message, isUser }]);
+ };
+
+ const sendMessage = async (message) => {
+ addMessage(message, true);
+
+ try {
+ const response = await axios.post(
+ `${config.apiUrl}`,
+ {
+ prompt:
+ 'only respond to new message. previous messages: ' +
+ messages.map((msg) => msg.message).join(', ') +
+ ', new message:' +
+ message,
+ },
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Authorization': `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
+ },
+ }
+ );
+
+ const chatGptResponse = response.data;
+ addMessage(chatGptResponse, false);
+ } catch (error) {
+ console.error('Error fetching ChatGPT response:', error);
+ addMessage('Error: Unable to fetch response from ChatGPT.', false);
+ }
+ };
 
-function App() {
- return (
- <div className="App">
- <header className="App-header">
- <ChatBubble></ChatBubble>
- <ChatInput></ChatInput>
- </header>
- </div>
- );
-}
+ return (
+ <div className="app">
+ <ChatBubble></ChatBubble>
+ <ChatInput></ChatInput>
+ </div>
+ );
+};
 
 export default App;

src/config.js

@@ -0,0 +1,6 @@
+const config = {
+ apiUrl: 'https://localhost:3500/chat',
+ };
+
+ export default config;
+