Numex Codex — Tarayıcıda IDE
Chat kutusuna ne istediğini yaz. Agent dosyaları otomatik oluşturur, editöre yazar, önizlemeyi günceller. Tek buton yok, tek tıklama yok — sadece yaz ve izle.
🚀 Numex Codex Nedir?
Numex Codex, tarayıcıda çalışan bir AI kod editörüdür. Sol tarafta dosya yöneticisi ve Monaco editörü, sağ tarafta AI agent chat vardır.
Nasıl farklı? Normal AI sohbetlerinde AI size kod yazar, siz kopyalarsınız. Codex'te AI dosyaları doğrudan editöre yazar — siz sadece isteyin.
⚙️ Nasıl Çalışır?
1
Chat'e ne istediğini yaz
Sağ paneldeki chat kutusuna isteğinizi Türkçe yazın. "hesap makinesi yap", "index.html'e navbar ekle", "script.js'deki hatayı düzelt" gibi.
2
Agent düşünür ve araç kullanır
Chat altında adım adım ne yaptığını görürsünüz: 📝 Yazıyor: index.html, ✅ Tamamlandı gibi. Adım adım ilerleme çıktısı tarayıcıda görünür.
3
Dosyalar editöre yazar, önizleme güncellenir
Agent dosyaları yazdıktan sonra editörde görürsünüz. Önizleme sekmesine geçerek sonucu kontrol edin.
4
Devam et: düzenle, hata bul, geliştir
Proje açıkken "navbar rengini değiştir", "şu butonu sil", "form validasyonu ekle" gibi konuşmaya devam edebilirsiniz. Agent mevcut dosyaları bilir.
✨ Yeni Proje Oluştur
Yeni bir proje başlatmak için sol paneldeki Yeni Proje butonuna tıklayın ya da direkt chat'e yazın:
Oluştur
"profesyonel hesap makinesi yap"
3 dosya: index.html, style.css, script.js
Oluştur
"koyu temalı blog sitesi yap"
Hero, kart listesi, hover efektler
Oluştur
"ürün satış sayfası oluştur"
Navbar, ürün grid, sepet
Oluştur
"todo app yap — localStorage kullansın"
Ekle, sil, tamamlandı işaretle
Oluştur
"Python ile web scraper yaz"
requests + BeautifulSoup
Oluştur
"Node.js REST API oluştur"
Express, CRUD endpoint'ler
✏️ Mevcut Dosyayı Düzenle
Proje açıkken agent dosyaların içeriğini bilir. Doğrudan ne istediğinizi söyleyin:
Düzenle
"index.html'e footer ekle"
Agent index.html'i okur, footer ekler
Düzenle
"navbar rengini #3d9eff yap"
style.css'i bulur, rengi değiştirir
Düzenle
"butona hover animasyonu ekle"
CSS transition, scale efekt
Düzenle
"formu mobil uyumlu yap"
Media query, responsive CSS
Kopyala & Editöre Uygula
Chat yanıtında kod bloğu görürseniz 📋 Kopyala ile panoya kopyalayabilir veya ⚡ Editöre Uygula ile doğrudan editöre aktarabilirsiniz. Tam dosya ise günceller, snippet ise imlecin olduğu yere ekler.
🔧 Hata Çöz / Debug
Bir hata görüyorsanız, hatayı kopyalayıp chat'e yapıştırın:
Debug
"buton tıklanmıyor, neden?"
Agent script.js'i arar, event listener sorununu bulur
Debug
"Uncaught TypeError: Cannot read properties of null — düzelt"
Hata mesajını yapıştır, agent bulur ve düzeltir
Debug
"stil bozuluyor, neden?"
Agent CSS'i analiz eder, çakışmayı bulur
Debug
"hesap makinesi yanlış sonuç veriyor"
Agent kodu çalıştırır, mantık hatasını bulur
💬 Daha Fazla Prompt Örneği
| İstek | Agent Ne Yapar? |
|---|
"dark mode toggle ekle" | CSS değişkenleri + JS toggle yazar |
"localStorage'a kaydet" | Mevcut script.js'e veri persistansı ekler |
"loading spinner ekle" | CSS animasyonu + JS göster/gizle yazar |
"formu valide et" | HTML required + JS validasyon ekler |
"tüm fontları Inter yap" | Google Fonts import + CSS font-family günceller |
"sitenin rengini maviyle değiştir" | CSS değişkenlerini bulur, tüm renkleri günceller |
"Türkçe içerik ekle" | Gerçekçi Türkçe metin, başlık, açıklama yazar |
"bu Python kodunu açıkla" | Adım adım Türkçe açıklama verir |
⌨️ Editör Kısayolları
| Kısayol | İşlev |
|---|
| Ctrl + S | Kaydet ve önizlemeyi yenile |
| Ctrl + Z | Son değişikliği geri al |
| Ctrl + / | Satırı yorum satırına çevir |
| Ctrl + D | Seçili kelimeyi çoklu seç |
| Alt + ↑/↓ | Satırı yukarı/aşağı taşı |
| Ctrl + Space | AI otomatik tamamlama |
| Enter (chat) | Mesaj gönder |
| Shift + Enter (chat) | Yeni satır (göndermez) |
✅ İyi / Kötü Kullanım
✅
"hesap makinesi yap — klavye desteği olsun, koyu tema"
Spesifik, net. Agent tam olarak ne yapacağını bilir.
❌
"bir şey yap"
Çok belirsiz. Neyi yapacağını söyleyin.
✅
"navbar'a logo ekle, sağa login butonu"
Hangi dosyayı değiştireceğini, neyi nereye ekleyeceğini söylüyor.
❌
"düzelt"
Neyin bozuk olduğunu söyleyin. Hata mesajını yapıştırın.
💡
İpucu: Sohbete devam edin
Agent, konuşma geçmişini ve dosya içeriklerini hatırlar. "şimdi ona dark mode ekle" gibi bağlamsal istekler yapabilirsiniz.
💡
İpucu: Şablon ile başlayın
Sol panelden "Hesap Makinesi", "Blog", "E-ticaret" gibi hazır şablonları yükleyip üzerine geliştirin.