cách sử dụng chatgpt4o trong next.js?

cách sử dụng chatgpt4o trong next.js?

Để sử dụng ChatGPT-4 trong một ứng dụng Next.js, bạn cần thực hiện các bước sau:

1. Tạo tài khoản OpenAI và lấy API Key:

   • Đăng ký tài khoản tại OpenAI.
   • Lấy API Key từ trang quản lý tài khoản của bạn.

2. Cài đặt Next.js:

   • Nếu bạn chưa có một dự án Next.js, bạn có thể tạo một dự án mới bằng cách sử dụng lệnh sau:

     npx create-next-app@latest my-chatgpt-app
     cd my-chatgpt-app
     

3. Cài đặt Axios:

   • Axios là một thư viện giúp bạn thực hiện các yêu cầu HTTP dễ dàng hơn. Bạn có thể cài đặt nó bằng lệnh:

     npm install axios
     

4. Tạo API Route trong Next.js:

   • Tạo một file mới trong thư mục pages/api để xử lý các yêu cầu đến OpenAI API. Ví dụ: pages/api/chatgpt.js.

   // pages/api/chatgpt.js
   import axios from 'axios';
   
   export default async function handler(req, res) {
     if (req.method !== 'POST') {
       return res.status(405).json({ message: 'Only POST requests are allowed' });
     }
   
     const { prompt } = req.body;
   
     if (!prompt) {
       return res.status(400).json({ message: 'Prompt is required' });
     }
   
     try {
       const response = await axios.post(
         'https://api.openai.com/v1/engines/davinci-codex/completions',
         {
           prompt,
           max_tokens: 100,
         },
         {
           headers: {
             'Content-Type': 'application/json',
             'Authorization': `Bearer YOUR_OPENAI_API_KEY`,
           },
         }
       );
   
       res.status(200).json(response.data);
     } catch (error) {
       res.status(500).json({ message: 'Error fetching data from OpenAI', error: error.message });
     }
   }
   

   Lưu ý: Thay thế YOUR_OPENAI_API_KEY bằng API Key của bạn.

5. Tạo giao diện người dùng:

   • Tạo một trang mới hoặc sử dụng trang index.js để tạo giao diện người dùng cho việc nhập prompt và hiển thị kết quả.

   // pages/index.js
   import { useState } from 'react';
   import axios from 'axios';
   
   export default function Home() {
     const [prompt, setPrompt] = useState('');
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
   
       try {
         const res = await axios.post('/api/chatgpt', { prompt });
         setResponse(res.data.choices[0].text);
       } catch (error) {
         console.error('Error fetching data from API:', error);
       }
     };
   
     return (
       <div>
         <h1>ChatGPT-4 with Next.js</h1>
         <form onSubmit={handleSubmit}>
           <textarea
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             rows="5"
             cols="50"
           />
           <br />
           <button type="submit">Submit</button>
         </form>
         {response && (
           <div>
             <h2>Response:</h2>
             <p>{response}</p>
           </div>
         )}
       </div>
     );
   }
   

6. Chạy ứng dụng:

   • Chạy ứng dụng Next.js của bạn bằng lệnh:

     npm run dev
     

   • Mở trình duyệt và truy cập http://localhost:3000 để xem ứng dụng của bạn.

Với các bước trên, bạn đã tích hợp thành công ChatGPT-4 vào ứng dụng Next.js của mình. Bạn có thể tùy chỉnh thêm giao diện và chức năng theo nhu cầu của mình.