Why Use OpenAI's API?
Want to add ChatGPT, text generation, or AI-powered responses to your app? OpenAI's API lets you integrate cutting-edge AI with just a few lines of code.
Steps to Integrate OpenAI API in 5 Minutes
1. Get Your OpenAI API Key
Sign up at OpenAI and grab your API key from the dashboard.
2. Install OpenAI's Package
Run this command in your terminal of VS Code or whatever IDE you are using
1npm install openai3. Store API Key in .env
Create a .env file in the root of your project and add
1REACT_APP_OPENAI_API_KEY=your-api-key-hereNote: Restart your React app after adding this
4. Set Up OpenAI in React (with .env variables)
1import { useState } from "react";
2import { Configuration, OpenAIApi } from "openai";
3
4const openai = new OpenAIApi(
5 new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY })
6);
7
8export default function Chatbot() {
9 const [input, setInput] = useState("");
10 const [response, setResponse] = useState("");
11
12 const handleGenerate = async () => {
13 const res = await openai.createChatCompletion({
14 model: "gpt-4",
15 messages: [{ role: "user", content: input }],
16 });
17
18 setResponse(res.data.choices[0].message.content);
19 };
20
21 return (
22 <div>
23 <h2>React + OpenAI Chatbot</h2>
24 <input
25 type="text"
26 placeholder="Ask something..."
27 value={input}
28 onChange={(e) => setInput(e.target.value)}
29 />
30 <button onClick={handleGenerate}>Ask AI</button>
31 <p><strong>Response:</strong> {response}</p>
32 </div>
33 );
34}
35This React component sets up an AI chatbot using OpenAI's API. It initializes OpenAI with an API key stored in .env for security. The handleGenerate function sends user input to OpenAI and updates the response state with AI-generated text. The UI consists of an input field, a button to trigger the request, and a paragraph to display the AI’s response. This setup allows users to chat with OpenAI in a simple frontend app.
