1 Saatte OpenAI ve Vercel ile Etkinlik Asistanı Oluşturma – Bölüm 1
Merhaba! Fatih Soysal burada. Bu yazıda, OpenAI ve Vercel’in güçlü kombinasyonunu kullanarak bir saatten kısa sürede nasıl basit bir etkinlik asistanı oluşturabileceğinizi göstereceğim. Bu, özellikle yeni başlayanlar için ideal bir proje olup, yapay zeka ve web geliştirme dünyasına adım atmak için harika bir fırsattır.
Öncelikle, projemizin temelini oluşturacak olan araçları tanıyalım. OpenAI, güçlü dil modelleriyle bilinen bir yapay zeka platformudur. Vercel ise, web uygulamalarını hızlı ve kolay bir şekilde geliştirmenizi ve dağıtmanızı sağlayan bir platformdur. Bu iki platformu bir araya getirerek, zaman ve emekten tasarruf ederek etkileyici sonuçlar elde edeceğiz.
Gerekliler:
- OpenAI Hesabı ve API Anahtarı
- Vercel Hesabı
- Temel JavaScript Bilgisi
Adım 1: Vercel Projesinin Kurulumu
İlk olarak, Vercel’de yeni bir proje oluşturalım. Boş bir Next.js projesi seçebilirsiniz. Bu, hızlı bir başlangıç için ideal bir seçenektir. Daha sonra, projenizin dosyalarını yerel makinenize indirin.
Adım 2: OpenAI Entegrasyonu
Şimdi, OpenAI API’sini projemize entegre edelim. Bunun için, pages/api dizinine yeni bir dosya ekleyeceğiz (örneğin: pages/api/generateEvent.js). Bu dosyaya, aşağıdaki kodu ekleyin:
export default async function handler(req, res) {
const { eventDescription } = req.body;
const response = await fetch('https://api.openai.com/v1/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': Bearer ${process.env.OPENAI_API_KEY},
},
body: JSON.stringify({
model: 'text-davinci-003',
prompt: Etkinlik tanımı: ${eventDescription}\nEtkinlik planı oluştur:,
max_tokens: 150,
}),
});
const data = await response.json();
res.status(200).json(data);
}
Dikkat etmeniz gereken nokta, process.env.OPENAI_API_KEY kısmıdır. OpenAI API anahtarınızı Vercel’in ortam değişkenlerine eklemeniz gerekmektedir. Bu, API anahtarınızın kodunuzda doğrudan görünmesini engeller ve güvenliği artırır.
Adım 3: Kullanıcı Arayüzü (UI)
Son olarak, kullanıcılara etkinlik açıklamasını girmelerini sağlayacak basit bir kullanıcı arayüzü oluşturalım. Bu, Next.js’in sunduğu pages/index.js dosyasında yapılabilir. Bu kısımda, kullanıcıdan etkinlik açıklaması alıp, OpenAI API’sini kullanarak bir etkinlik planı oluşturacak basit bir form tasarlayabilirsiniz. Detayları, ikinci bölümde daha detaylı inceleyeceğiz.
Bu bölümde, temel altyapıyı kurduk. İkinci bölümde, kullanıcı arayüzünü daha detaylı ele alacağız ve oluşturduğumuz etkinlik asistanını test edeceğiz. Daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilirsiniz.
Umarım bu makale size yardımcı olmuştur. Sorularınız veya önerileriniz varsa, lütfen yorum bırakmaktan çekinmeyin!
Faydalı Kaynaklar:
#Etiketler: OpenAI, Vercel, Etkinlik Asistanı, Yapay Zeka, JavaScript, Next.js, API, Kod Örneği, Hızlı Geliştirme, Programlama, Web Geliştirme