DEV Community

luiz tanure
luiz tanure

Posted on • Originally published at letanure.dev

Bringing AI to the Front-End – Integrating GPT APIs

#ai #frontend #chat #javascript

Note: This article was originally published on March 1, 2023. Some information may be outdated.

AI is no longer a back-end-only topic. It’s showing up in UIs--from autocomplete to smart assistants. This post shows how to build a simple chatbot UI that talks to a GPT model through an API.

What we’ll build

  • A front-end chat interface
  • A simple call to a GPT API using fetch
  • Handling loading states and errors

1. Setting up the UI

We’ll start with a basic input and message history.

function Chat() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const sendMessage = async () => { if (!input) return; setLoading(true); const userMessage = { role: "user", content: input }; const newMessages = [...messages, userMessage]; try { const res = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: newMessages }), }); const data = await res.json(); const botMessage = { role: "assistant", content: data.reply }; setMessages([...newMessages, botMessage]); } catch (err) { console.error("Error:", err); } finally { setLoading(false); setInput(""); } }; return ( <div> <div> {messages.map((m, i) => ( <p key={i}><strong>{m.role}:</strong> {m.content}</p> ))} </div>  <input value={input} onChange={e => setInput(e.target.value)} />  <button onClick={sendMessage} disabled={loading}>Send</button>  </div>  ); }
Enter fullscreen mode Exit fullscreen mode

2. Backend handler (Next.js example) 

// pages/api/chat.js export default async function handler(req, res) { const messages = req.body.messages; const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Authorization": `Bearer YOUR_API_KEY`, "Content-Type": "application/json" }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages }) }); const data = await response.json(); res.status(200).json({ reply: data.choices[0].message.content }); }
Enter fullscreen mode Exit fullscreen mode

3. Final thoughts

This is just the start. You could:

  • Add streaming responses
  • Save chat history
  • Support tools or actions with function calling

Using AI in the front-end opens a lot of creative space. From simple assistants to personalized content, the line between static UI and smart UI keeps blurring.

Top comments (0)