React Flow mini map
🌍 Gerçek Dünyabaşlangıç15 dk

Chatbot'unu Deploy Et

Sıfırdan başlayarak chatbot'unu internete koy — no-code'dan Vercel'e 3 yol

🎯

30 saniyede özet · Ne öğreneceksin

  • No-code (Anthropic Console) ile 5 dakikada chatbot yayınlamak
  • GitHub + Vercel + Next.js ile kendi domain'inde site açmak
  • API key'i güvenle saklamak (env var, asla repoda)
  • Aylık fatura sınırı ve rate limit ile maliyeti kontrol altında tutmak
15 dk okuma·başlangıç·🧪 interaktif sandbox

Hiç kod deploy etmediysen burası senin başlangıç noktan. Bir chatbot yazıp localhost'ta çalıştırmak iş değil — gerçek değer onu internet üzerinden insanların kullanabileceği bir hale getirmektir. Bu rehber sıfırdan başlıyor: hiç terminal görmediysen bile sonunda kendi chatbot'unu paylaşılabilir bir URL'in arkasında yayınlamış olacaksın.

ℹ️Önce sözlük: "Deploy" demek = bilgisayarındaki kodu internette herkesin ulaşabileceği bir sunucuya yüklemek. "Hosting" = o sunucuyu sağlayan şirket (Vercel, Railway, vb.). "Environment variable" = sunucuda sakladığın gizli bilgi (API key gibi).

Bir chatbot'u dünyaya sunmanın üç ana yolu vardır, her birinin zorluğu farklı:

En hızlı yöntem. Hiç kod yazmadan kendi chatbot'unu paylaşılır bir link arkasına koy.

Burada kendine ait, learnn.tech gibi bir web sitesi olacak. Vercel ücretsiz tier'ı çoğu ch…

⚠️🚨 API key'ini ASLA repoya pushlamayın. Kazara push edersen anında revoke et (`console.anthropic.com/settings/keys`) ve yenisini al. Public repolarda bot'lar key'leri saniyeler içinde tarar, faturanı patlatır. Her zaman Vercel'in 'Environment Variables' bölümüne koy, koda yapıştırma.

Hosting (Vercel/Railway): Ücretsiz tier çoğu hobby chatbot için yeter. Sadece API kullanım…

Kullanıcılar gerçekten kullanmaya başladığında bunlara ihtiyacın olacak:

No-code (Anthropic Console)

  • ·5 dakikada yayında
  • ·Görsel arayüz, sıfır kod
  • ·Sadece API maliyeti, hosting yok
  • ·Sınırlı özelleştirme (logo, tema yok)
  • ·Anthropic'in URL'i altında (paylaşılır link)

Vercel + GitHub

  • ·30 dakikada yayında
  • ·Kendi web siten, kendi domain
  • ·Hosting free tier + API maliyeti
  • ·Tam özelleştirme (UI, logo, dil)
  • ·benim-chatbotum.com gibi kendi URL'in

Vercel için minimal Next.js API endpoint — /app/api/chat/route.ts

JavaScript
1// Bu dosyayı GitHub repo'na ekle. Vercel otomatik deploy eder.
2// API key Vercel'in Environment Variables'ından okunur.
3
4import Anthropic from "@anthropic-ai/sdk";
5
6const client = new Anthropic(); // ANTHROPIC_API_KEY env var
7
8export async function POST(request: Request) {
9 const { message } = await request.json();
10
11 const response = await client.messages.create({
12 model: "claude-sonnet-4-6-20260101",
13 max_tokens: 512,
14 system: "Sen yardımsever bir asistansın. Cevapları kısa tut.",
15 messages: [{ role: "user", content: message }],
16 });
17
18 return Response.json({
19 reply: response.content[0].text,
20 });
21}
22
23// Frontend (basit): bir input + buton, fetch('/api/chat')
24// Tam örnek: github.com/anthropics/anthropic-quickstarts
25

✦ Quiz

Yeni başlayan birisin ve 5 dakikada bir chatbot yayınlamak istiyorsun. Hangi yol senin için?

💡🎁 Bonus parça: paylaşılır link gönderirken sınır koy. İlk chatbot'unu yayınladıktan sonra Twitter'da paylaşma heyecanı normal — ama API maliyetini düşünme. Çözüm: Anthropic Console'da "Spend limit" aktif et (örn. $20/ay), Vercel'de basit bir kullanıcı sayacı koy (sessionStorage'da turn sayısı, 20'yi aşınca "yeter, yarın gel" de). Böylece viral oldun ama fatura patlamadı.

Bu konunun pratiği

🧪

Bu konuyu interaktif dene

Az önce okuduğun kavramın parametrelerini değiştir, etkisini canlı gör

Aç →