{"id":29646,"date":"2025-09-17T21:02:39","date_gmt":"2025-09-17T18:02:39","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/docs-aware-chatbot-react-vite-node-ve-openai-ile-gelistirme\/"},"modified":"2025-09-17T21:02:39","modified_gmt":"2025-09-17T18:02:39","slug":"docs-aware-chatbot-react-vite-node-ve-openai-ile-gelistirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/docs-aware-chatbot-react-vite-node-ve-openai-ile-gelistirme\/","title":{"rendered":"Docs-Aware Chatbot: React, Vite, Node ve OpenAI ile Geli\u015ftirme"},"content":{"rendered":"

Docs-Aware Chatbot: React, Vite, Node ve OpenAI ile Geli\u015ftirme<\/p>\n

G\u00fcn\u00fcm\u00fczde, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve bilgiye h\u0131zl\u0131 eri\u015fimi sa\u011flamak i\u00e7in ak\u0131ll\u0131 chatbotlar giderek daha \u00f6nemli hale geliyor. Bu makalede, React, Vite, Node.js ve OpenAI API'lerini kullanarak dok\u00fcman tabanl\u0131 bir chatbot nas\u0131l geli\u015ftirilece\u011fini ad\u0131m ad\u0131m ele alaca\u011f\u0131z. DALL\u00b7E ile olu\u015fturulmu\u015f e\u011flenceli avatarlar ekleyerek, chatbot'unuzu daha etkile\u015fimli ve kullan\u0131c\u0131 dostu hale getirece\u011fiz. Bu rehber, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in faydal\u0131 bilgiler sunacakt\u0131r.<\/p>\n

Docs-Aware Chatbot Nedir ve Neden \u00d6nemlidir?<\/h2>\n

Docs-Aware chatbotlar, \u00f6nceden beslenen dok\u00fcmanlar (PDF, Markdown, web siteleri vb.) \u00fczerinde e\u011fitilmi\u015f ve bu dok\u00fcmanlardaki bilgiye dayanarak sorular\u0131 cevaplayan sohbet robotlar\u0131d\u0131r. Bu, kullan\u0131c\u0131lar\u0131n karma\u015f\u0131k dok\u00fcmanlar aras\u0131nda arama yapma zahmetinden kurtulmas\u0131n\u0131 ve ihtiya\u00e7 duyduklar\u0131 bilgiye h\u0131zl\u0131ca ula\u015fmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir \u015firketin i\u00e7 dok\u00fcmanlar\u0131na eri\u015fimi olan bir chatbot, \u00e7al\u0131\u015fanlar\u0131n s\u0131k\u00e7a sordu\u011fu sorular\u0131 yan\u0131tlayabilir, \u015firket politikalar\u0131n\u0131 a\u00e7\u0131klayabilir veya belirli prosed\u00fcrleri ad\u0131m ad\u0131m anlatabilir. Bu da verimlili\u011fi art\u0131r\u0131r ve \u00e7al\u0131\u015fanlar\u0131n bilgi bulma s\u00fcre\u00e7lerini kolayla\u015ft\u0131r\u0131r. Bunun yan\u0131 s\u0131ra, m\u00fc\u015fteri hizmetlerinde, e\u011fitim materyallerinde ve daha bir\u00e7ok alanda da b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Dolay\u0131s\u0131yla, docs-aware chatbotlar i\u015fletmeler i\u00e7in b\u00fcy\u00fck bir de\u011fer sunar. \u00d6zellikle b\u00fcy\u00fck miktarda dok\u00fcmana sahip \u015firketler i\u00e7in, bu teknoloji zamandan ve kaynaktan tasarruf sa\u011flar.<\/p>\n

Temel Kavramlar: React, Vite, Node.js ve OpenAI<\/h2>\n

React ile Kullan\u0131c\u0131 Aray\u00fcz\u00fc Tasar\u0131m\u0131 Nas\u0131l Yap\u0131l\u0131r?<\/h3>\n

React, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Komponent tabanl\u0131 yap\u0131s\u0131 sayesinde, kodun tekrar kullan\u0131labilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131r\u0131r. Bu projede, React'i chatbot'un kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc (UI) olu\u015fturmak i\u00e7in kullanaca\u011f\u0131z. Vite, React uygulamalar\u0131 geli\u015ftirmeyi h\u0131zland\u0131ran bir geli\u015ftirme sunucusudur. H\u0131zl\u0131 ba\u015flatma ve an\u0131nda kod g\u00fcncellemeleri sa\u011flamas\u0131yla verimlili\u011fi \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir sohbet penceresi, mesaj g\u00f6r\u00fcnt\u00fcleme alanlar\u0131 ve kullan\u0131c\u0131 giri\u015fi i\u00e7in bir alan gibi bile\u015fenler React ile kolayca olu\u015fturulur.<\/p>\n

Node.js ve Sunucu Taraf\u0131 \u0130\u015flemleri<\/h3>\n

Node.js, JavaScript'i sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131rmam\u0131z\u0131 sa\u011flayan bir platformdur. Projemizde, Node.js'i OpenAI API'si ile etkile\u015fim kurmak ve dok\u00fcmanlar\u0131 i\u015flemek i\u00e7in kullanaca\u011f\u0131z. OpenAI API'sine g\u00f6nderilen istekleri y\u00f6netmek, gelen yan\u0131tlar\u0131 i\u015flemek ve bunlar\u0131 React uygulamas\u0131na iletmek i\u00e7in bir Node.js sunucusu geli\u015ftirece\u011fiz. Bu sunucu, ayn\u0131 zamanda dok\u00fcmanlar\u0131n y\u00fcklenmesini, i\u015flenmesini ve indekslenmesini sa\u011flar. Daha geli\u015fmi\u015f uygulamalar i\u00e7in, veritaban\u0131 entegrasyonu da Node.js \u00fczerinden yap\u0131labilir. Bunun i\u00e7in MongoDB, PostgreSQL gibi veritabanlar\u0131 kullan\u0131labilir.<\/p>\n

OpenAI API'si ile Do\u011fal Dil \u0130\u015fleme (NLP)<\/h3>\n

OpenAI API'si, g\u00fc\u00e7l\u00fc do\u011fal dil i\u015fleme yetenekleri sunan bir bulut hizmetidir. Bu projede, OpenAI'nin b\u00fcy\u00fck dil modelleri (LLM'ler) kullanarak kullan\u0131c\u0131n\u0131n sorular\u0131n\u0131 anlayacak ve dok\u00fcmanlardan ilgili bilgileri \u00e7\u0131karacak bir sistem kuraca\u011f\u0131z. OpenAI API'si, \u00e7e\u015fitli g\u00f6revler i\u00e7in kullan\u0131labilen farkl\u0131 modeller sunar. Projenizin gereksinimlerine g\u00f6re en uygun modeli se\u00e7mek \u00f6nemlidir. OpenAI'nin API dok\u00fcmantasyonu, farkl\u0131 modellerin \u00f6zelliklerini ve kullan\u0131m \u00f6rneklerini detayl\u0131 olarak a\u00e7\u0131klamaktad\u0131r. Ayr\u0131ca, API'nin g\u00fcvenli kullan\u0131m\u0131 i\u00e7in gerekli \u00f6nlemler hakk\u0131nda da bilgi vermektedir.<\/p>\n

Uygulamal\u0131 K\u0131s\u0131m: Docs-Aware Chatbot Geli\u015ftirme<\/h2>\n

Proje Yap\u0131s\u0131 ve Kurulumu<\/h3>\n

\u00d6ncelikle, projenin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Proje, iki ana b\u00f6l\u00fcmden olu\u015facakt\u0131r: bir frontend (React\/Vite) ve bir backend (Node.js). npm init vite@latest<\/code> komutu ile yeni bir Vite projesi olu\u015fturarak ba\u015flayabilirsiniz. Ard\u0131ndan, React'i ekleyin: npm install react react-dom @types\/react @types\/react-dom<\/code>. Backend i\u00e7in yeni bir dizin olu\u015fturun ve npm init<\/code> komutuyla Node.js projesini ba\u015flat\u0131n. Gerekli paketleri (express<\/code>, axios<\/code>, vb.) npm install<\/code> komutu ile ekleyin. OpenAI API anahtar\u0131n\u0131z\u0131 .env<\/code> dosyas\u0131na g\u00fcvenli bir \u015fekilde saklamay\u0131 unutmay\u0131n. Daha sonra, frontend ve backend'i birbirine ba\u011flayarak ileti\u015fimi sa\u011flayaca\u011f\u0131z. Bu i\u015flem genellikle API \u00e7a\u011fr\u0131lar\u0131 kullan\u0131larak ger\u00e7ekle\u015ftirilir.<\/p>\n

<\/code>javascript
\n\/\/ backend\/server.js
\nconst express = require(‘express’);
\nconst axios = require(‘axios’);
\nrequire(‘dotenv’).config();<\/p>\n

const app = express();
\nconst port = 3001;<\/p>\n

app.use(express.json());<\/p>\n

app.post(‘\/chat’, async (req, res) => {
\n const { message, context } = req.body;<\/p>\n

try {
\n const response = await axios.post(‘https:\/\/api.openai.com\/v1\/chat\/completions’, {
\n model: “gpt-3.5-turbo”, \/\/ veya ba\u015fka bir uygun model
\n messages: [{ role: “user”, content: message + context }],
\n }, {
\n headers: {
\n ‘Authorization’: Bearer ${process.env.OPENAI_API_KEY}<\/code>,
\n ‘Content-Type’: ‘application\/json’
\n }
\n });<\/p>\n

res.json({ response: response.data.choices[0].message.content });
\n } catch (error) {
\n console.error(error);
\n res.status(500).json({ error: ‘OpenAI API hatas\u0131’ });
\n }
\n});<\/p>\n

app.listen(port, () => {
\n console.log(Sunucu ${port} portunda \u00e7al\u0131\u015f\u0131yor.<\/code>);
\n});<\/p>\n

<\/pre>\n
<\/code>javascript
\n\/\/ frontend\/src\/App.js
\nimport React, { useState } from 'react';
\nimport axios from 'axios';<\/p>\n
function App() {
\n  const [message, setMessage] = useState('');
\n  const [messages, setMessages] = useState([]);<\/p>\n
  const handleSubmit = async (e) => {
\n    e.preventDefault();
\n    setMessages([...messages, { role: 'user', content: message }]);
\n    setMessage('');<\/p>\n
    try {
\n      const response = await axios.post('\/chat', { message, context: messages.map(msg => msg.content).join('\\n') }); \/\/ context ekledik
\n      setMessages([...messages, { role: 'assistant', content: response.data.response }]);
\n    } catch (error) {
\n      console.error(error);
\n      setMessages([...messages, { role: 'assistant', content: 'Bir hata olu\u015ftu.' }]);
\n    }
\n  };<\/p>\n
  return (<\/p>\n
\n
\n        {messages.map((msg, index) => (<\/p>\n
\n            {msg.role}:<\/strong> {msg.content}\n          <\/div>\n
        ))}\n      <\/p><\/div>\n
\n         setMessage(e.target.value)} \/>
\n