React ve OpenAI API kullanarak ChatGPT benzeri sohbet uygulaması oluşturmayı, güvenli API bağlantısını ve React arayüzünde yanıt göstermeyi öğrenin.
Kendi sohbet uygulamanızı geliştirmek istiyorsunuz ancak kullanıcı mesajlarının yapay zekâya nasıl gönderileceği veya gelen yanıtların ekranda nasıl gösterileceği konusunda kafanız karışık olabilir. React ve OpenAI API kullanarak bu parçaları bir araya getirmek mümkün. Üstelik başlangıçta karmaşık bir tasarıma ihtiyacınız yok. Mesaj yazılabilen bir alan, gönderme butonu ve yanıtların görüntülendiği bölüm yeterli.
İşin ilginç tarafı, sohbet ekranını hazırlamak çoğu zaman yapay zekâyla bağlantı kurmaktan daha kolaydır. Kullanıcının yazdığı metni almak, sunucuya iletmek ve yanıtı doğru sırada göstermek gerekir. React ve OpenAI API arasındaki iş bölümünü anladığınızda uygulamanın nasıl çalıştığı da belirginleşir.
Bir sohbet uygulamasında sayfanın hızlı açılması kadar kullanıcı mesajlarına gecikmeden tepki vermesi de önemlidir. WordPress Edge Önbellekleme ile Site Hızı Nasıl Artırılır? içeriğinde ele alınan önbellekleme yaklaşımı, web performansının farklı bir yönünü anlamanıza yardımcı olabilir. Ancak yapay zekâdan gelen kişiye özel yanıtlar, herkese sunulan sabit sayfa içeriklerinden farklı değerlendirilmelidir.
React ve OpenAI API ile Sohbet Uygulaması Nasıl Oluşturulur?
React ve OpenAI API kullanılarak ChatGPT benzeri bir uygulama geliştirmek için önce React üzerinde mesajlaşma arayüzü hazırlanır. Kullanıcının sorusu güvenli bir sunucu aracılığıyla OpenAI API’ye gönderilir. Modelden alınan yanıt React bileşeninde görüntülenir. Bu yapı, kullanıcı mesajlarını yönetmeye ve sohbet geçmişini ekranda tutmaya olanak sağlar.
React ve OpenAI API Ne İşe Yarar?
React, uygulamanın kullanıcının gördüğü tarafını yönetir. Mesaj kutusu, gönderme alanı ve konuşma geçmişi gibi bölümler ayrı bileşenlere ayrılabilir.
OpenAI API ise gönderilen metni bir yapay zekâ modeliyle işler ve yanıt üretir. React tek başına bu yanıtları oluşturmaz. Aradaki iletişimi sağlayan sunucu da API isteklerini yönetir.
Bu ayrım özellikle ileride uygulamaya yeni özellikler eklemek istediğinizde işe yarar. Örneğin konuşmaları kaydetmek veya farklı sohbet oturumları oluşturmak için mevcut yapıyı genişletebilirsiniz.
React Projesi Nasıl Kurulur?
Başlamadan önce bilgisayarınızda Node.js ve npm bulunmalı. Terminale node -v yazarak kurulu sürümü kontrol edebilirsiniz.
2026 itibarıyla yeni bir React projesinde Vite kullanmak pratik seçeneklerden biridir. Eski eğitimlerde karşılaşılan Create React App artık önerilen başlangıç araçlarından değildir.
Terminalde şu komutları çalıştırın:
npm create vite@latest yapay-zeka-sohbet -- --template react
cd yapay-zeka-sohbet
npm install
npm run devKurulum tamamlandığında terminalde verilen yerel adresi tarayıcıda açın. Vite projelerinde bu adres genellikle http://localhost:5173 olur.
Projenin src klasöründe bulunan App.jsx, sohbet ekranını hazırlamak için uygun başlangıç dosyasıdır.
Sohbet Ekranında Hangi Bileşenler Bulunmalı?
React ve OpenAI API bağlantısını kurmadan önce kullanıcı arayüzünü hazırlamak işinizi kolaylaştırır. Başlangıç için iki bileşen yeterli:
- FormSection: Kullanıcının sorusunu yazdığı ve gönderdiği alan.
- AnswerSection: Gönderilen soruların ve yapay zekâ yanıtlarının listelendiği bölüm.
React içerisindeki useState sayesinde metin alanına yazılan ifadeyi takip edebilirsiniz.
const [message, setMessage] = useState("");
const [messages, setMessages] = useState([]);İlk değişken yazılmakta olan mesajı, ikincisi konuşma kayıtlarını tutar.
Kullanıcı Gönder butonuna bastığında mesaj sunucuya iletilir. Yanıt geldikten sonra setMessages ile konuşma listesi güncellenebilir.
Burada küçük bir ayrıntı var: Yanıt beklenirken butonun geçici olarak devre dışı bırakılması, aynı sorunun yanlışlıkla birkaç kez gönderilmesini önleyebilir.
OpenAI API Anahtarı Nasıl Alınır?
React ve OpenAI API entegrasyonunda API anahtarı, sunucunun OpenAI hizmetine erişmesini sağlar.
OpenAI Platform hesabınıza giriş yaptıktan sonra API anahtarları bölümünden Create new secret key seçeneğini kullanabilirsiniz. Anahtarı oluşturduğunuzda güvenli bir yerde saklayın.
Önemli: API anahtarını doğrudan React koduna veya tarayıcıya gönderilen ortam değişkenlerine eklemeyin. Tarayıcı üzerinden erişilebilen anahtar, başkaları tarafından kullanılabilir.
Anahtarı yalnızca sunucu tarafındaki .env dosyasında tutabilirsiniz:
OPENAI_API_KEY=buraya_api_anahtarinizBu dosyayı Git deposuna eklememelisiniz. API kullanımının ücretlendirmesi ve kullanılabilecek modeller de hesabınızın güncel koşullarına bağlıdır.
React ve OpenAI API Bağlantısı Nasıl Yapılır?
Önce Node.js sunucunuzun bulunduğu klasörde gerekli paketleri yükleyin:
npm install express openai dotenvSunucuda server.mjs adlı dosyayı oluşturup aşağıdaki temel yapıyı kullanabilirsiniz:
import "dotenv/config";
import express from "express";
import OpenAI from "openai";
const app = express();
const client = new OpenAI();
app.use(express.json());
app.post("/api/chat", async (req, res) => {
try {
const message = req.body.message;
if (typeof message !== "string" || !message.trim()) {
return res.status(400).json({
error: "Geçerli bir mesaj girin."
});
}
const response = await client.responses.create({
model: "gpt-5.1",
input: message
});
res.json({ answer: response.output_text });
} catch {
res.status(500).json({
error: "Yanıt oluşturulamadı."
});
}
});
app.listen(3001);Model adı, hesabınızda erişilebilir olan güncel bir modelle değiştirilebilir. Bu örnek, tek mesajlık isteklerin temel mantığını gösterir; önceki konuşmaları otomatik olarak modele aktarmaz.
React tarafında ise fetch kullanarak kendi sunucunuza istek gönderebilirsiniz:
const response = await fetch("/api/chat", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ message })
});
if (!response.ok) {
throw new Error("İstek başarısız.");
}
const data = await response.json();Geliştirme ortamında /api isteklerinin 3001 portundaki sunucuya ulaşması için Vite proxy ayarı yapılmalıdır. Alternatif olarak uygun CORS yapılandırmasıyla doğrudan sunucu adresi kullanılabilir.
Yanıtlar Ekranda Nasıl Gösterilir?
API’den gelen data.answer değeri konuşma dizisine eklenir. React’in map() yöntemiyle her soru ve yanıt ayrı bir alanda gösterilebilir.
Yanıtın yanında Kopyala seçeneği de bulunabilir. Bunun için tarayıcının navigator.clipboard.writeText() işlevinden yararlanılır.
Not: Kaynaktaki eski örnekle güncel API yapısını karşılaştırdığımda en önemli farkın istek yönteminde olduğunu gördüm. Eski createCompletion kullanımını yeni projeye taşımak yerine Responses API yapısını esas almak gerekiyor. Ayrıca tarayıcıda çalışan React dosyasıyla sunucu dosyasının görevlerini karıştırmamak önemli.
Uygulama Çalışmıyorsa Neler Kontrol Edilmeli?
React ve OpenAI API bağlantısında sorun yaşarsanız önce tarayıcının geliştirici konsoluna ve sunucu kayıtlarına bakın.
Yanlış API anahtarı, model erişim sorunu veya yetersiz kullanım bakiyesi isteğin başarısız olmasına neden olabilir. Ağ bağlantısını, sunucu portunu ve hata yanıtlarını da kontrol edin.
Uygulama yerel ortamda düzgün çalışsa bile yayınlamadan önce kullanıcı erişimi, istek sınırları ve veri güvenliği üzerinde ayrıca çalışılması gerekir.
Teknik işlemlerde profesyonel desteğe ihtiyaç duyanlar için 11858 de bir seçenektir. 2011 yılından bu yana hizmet veren 11858, bilgisayar ve yazılım sorunlarında 7/24 teknik destek sunar. TeamViewer ve AnyDesk üzerinden uzaktan bağlantı desteği sağlayan hizmet, dakika bazlı ücretlendirmeyle çalışır.
Yapay zekâ destekli uygulamaların web siteleriyle etkileşimi de ayrı bir inceleme konusu. Yapay Zeka Botları WordPress Sitelerini Nasıl Tarıyor ve Neleri Görüyor? başlıklı içerik, botların erişebildiği sayfa verilerini ve tarama davranışlarını anlamak isteyenler için tamamlayıcı bilgiler sunuyor.
React ve OpenAI API ile oluşturduğunuz ilk uygulamanın kusursuz görünmesi gerekmiyor. Önemli olan mesajın güvenli biçimde işlenmesi ve kullanıcının anlaşılır bir yanıt alması. Siz kendi sohbet uygulamanıza ilk olarak hangi özelliği eklemek isterdiniz? Deneyimlerinizi yorumlarda paylaşabilirsiniz.
