---
title: AI ile App Geliştirme
description: Cursor, Claude Code gibi AI IDE ya da araçları kullanarak uygulamanızı geliştirin
---

LLM tabanlı araçlar (örn. **Cursor**, **Codex**, **Claude Code**) ile birlikte ikas CLI ve GraphQL API'lerini kullanarak uygulamanızın temel bileşenlerini dakikalar içinde oluşturabilirsiniz. Development kiti indirdiğinizde içerisinde cursor rules, context7 MCP ve shadcn/ui MCP hazır olarak gelecektir.

## Cursor

<video controls width="1024">
  <source src="/media/ikas-partners-photo-quick-start/cursor-rules-vid.mp4" type="video/mp4" />
  Cursor Rules videosu yüklenemedi.
</video>

## Claude Code

Claude Code ile geliştirme yapmak için önce kod editörünüzün extension bölümünden kurulumu gerçekleştirin.
<video controls width="1024">
  <source src="/media/ikas-partners-photo-quick-start/CLADUE-code-vid.mp4" type="video/mp4" />
  Claude Code videosu yüklenemedi.
</video>

Claude Code ile ilgili daha fazlası için [Anthropic'in sayfasını](https://docs.anthropic.com/en/docs/claude-code/setup) inceleyebilirsiniz.

## MCP Sunucularını Etkinleştirme

ikas CLI ile oluşturulan projeler, varsayılan olarak shadcn/ui ve ikas MCP sunucularıyla birlikte gelir. Bu video, bu MCP sunucularını nasıl etkinleştireceğinizi gösterir:

<video controls width="1024">
  <source src="/media/ikas-partners-photo-quick-start/mcp-video-tutorial.mp4" type="video/mp4" />
  MCP sunucuları etkinleştirme videosu yüklenemedi.
</video>

## Örnek Uygulama Geliştirme

AI kod editörleri kullanarak ikas uygulaması nasıl geliştirileceğini gösteren pratik örnek:

<video controls width="1024">
  <source src="/media/ikas-partners-photo-quick-start/ikas-quick-start-cli-commands/claude-code-ikas-cli-ex.mp4" type="video/mp4" />
  Örnek uygulama geliştirme videosu yüklenemedi.
</video>

Bu videoda, Cursor veya diğer LLM tabanlı kod editörleri kullanarak:
- Proje kurulumundan başlayarak
- MCP sunucularını etkinleştirme
- AI yardımı ile kod yazma
- Temel bir ikas uygulaması oluşturma sürecini adım adım görebilirsiniz.

### Örnek Prompt Formatı

Videoda kullanılan XML yapılı prompt formatı. Bu yapı, AI agent'ın talimatları daha iyi anlayıp organize kod üretmesini sağlar:

```xml
<task>
Create an ikas app for Inventory Tracking that displays stock levels and low-stock alerts for
products.
</task>

<requirements>
Build a dashboard page that shows:
1. Product list with current stock levels
2. Visual indicators for stock status (low, medium, high)
3. Low-stock alerts section (products with stock < 10)
4. Real-time data from ikas GraphQL API
5. Clean, responsive UI using shadcn components
</requirements>

<instructions>
1. First, use ikas MCP to discover product and inventory GraphQL operations
2. Add necessary GraphQL queries to src/lib/ikas-client/graphql-requests.ts
3. Create API route at src/app/api/inventory/route.ts with JWT authentication
4. Build dashboard page at src/app/dashboard/inventory/page.tsx
5. Use shadcn components: Card, Table, Badge, Alert
6. Implement color coding: red (stock < 10), yellow (10-50), green (50+)
</instructions>

<technical_constraints>
- Follow existing project patterns in the starter template
- Use server-side API calls only (no direct GraphQL from browser)
- Implement proper error handling and loading states
- Keep TypeScript strict mode compliance
- Use the existing ApiRequests pattern for frontend-backend communication
</technical_constraints>

<output_format>
Create the files in this order:
1. GraphQL queries in graphql-requests.ts
2. API route with proper authentication
3. Dashboard page with inventory display
4. Include comments explaining key decisions
</output_format>

<example_query>
The GraphQL query should fetch products with fields like:
- id, name, sku
- productVariants with stock quantities
- images for product thumbnails
</example_query>
```

<Callout type="info" title="XML Etiketleri ile Daha İyi Prompt'lar">
**XML yapısının faydaları:**
- **Netlik**: Prompt'un farklı bölümlerini açıkça ayırır
- **Doğruluk**: AI'ın talimatları karıştırma riskini azaltır  
- **Esneklik**: Prompt bölümlerini kolayca düzenleyebilirsiniz

Prompt engineering hakkında daha fazla bilgi için [Anthropic'in XML etiketleri rehberini](https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/use-xml-tags) inceleyin.
</Callout>

### Test ve Doğrulama

AI ile geliştirdiğiniz uygulamayı test etmek için:

```bash
ikas app dev
```

Bu komut çalıştırıldığında:
1. **Mağaza Seçimi**: Test mağazanızı seçin
2. **Cloudflare Tunnel**: Otomatik tunnel kurulumu
3. **ikas Admin Panel**: Tarayıcı açılarak kimlik doğrulama
4. **Başarılı Bağlantı**: "Congratulations!" mesajı ile onay

<Callout type="info" title="Test Ortamı">
Uygulamanız ikas admin paneline bağlandıktan sonra:
- AI ile geliştirilen özellikler gerçek veri ile test edilebilir
- GraphQL sorgular test mağazasından veri çeker
- Değişiklikler gerçek zamanlı olarak görülebilir

Detaylı test süreci için [ikas CLI](/docs/app-development/admin-app-quick-start/ikas-cli#ikas-app-dev) sayfasındaki adım adım rehberi inceleyin.
</Callout>

---

## Ruler Configuration (AI Geliştirme Desteği)

### Ruler Nedir?
Ruler, AI agentların (Claude, Cursor, etc.) proje kurallarını ve konfigürasyonlarını yönetmek için kullanılan bir araçtır. Projede `.ruler` klasörü altında yapılandırma dosyaları bulunur.

### MCP Server Konfigürasyonu
Projede önceden konfigüre edilmiş MCP sunucuları:

| MCP Server | Kullanım Amacı | Komut |
|------------|----------------|--------|
| **[shadcn](https://ui.shadcn.com/)** | UI bileşen üretimi ve örnekleri - [MCP Docs](https://ui.shadcn.com/docs/mcp) | `npx shadcn@latest mcp` |
| **ikas** | GraphQL API keşfi ve introspection | `https://api.myikas.com/api/v2/admin/mcp` |

<Callout type="info" title="Ruler Konfigürasyon Detayları">
**`.ruler/ruler.toml` Dosya Yapısı**
- MCP sunucuları otomatik yapılandırılmış
- shadcn MCP: stdio tabanlı (npx shadcn@latest mcp)
- ikas MCP: HTTP tabanlı (api.myikas.com/api/v2/admin/mcp)
- Gitignore güncellemeleri devre dışı (enabled = false)

**AI Agent Desteği**
- Claude, Cursor, Copilot ve diğer AI agent'lar için hazır
- default_agents konfigürasyonu mevcut (opsiyonel)
- Agent-specific output path'leri ayarlanabilir
</Callout>

### AI Kurallarını Uygulama
Proje kurallarını AI agentlarına uygulamak için:

```bash
pnpm apply:ai-rules
```

Bu komut `.ruler` konfigürasyonunu kullanarak AI ajanlarının proje kurallarına uygun kod üretmesini sağlar.

---

## MCP ile Geliştirme Süreci

MCP sunucularını kullanarak AI destekli geliştirme yaparken önerilen iş akışı:

<Callout type="info" title="MCP Tabanlı Geliştirme">
**GraphQL API Keşfi (ikas MCP)**
- `ikas list` komutu ile mevcut GraphQL operasyonlarını keşfet
- `ikas introspect` ile operasyon detaylarını ve şemasını öğren
- Gerekli query/mutation'ın tam yapısını AI'ya anlat

**UI Bileşen Geliştirme (shadcn MCP)**
- `shadcn list` ile mevcut bileşenleri keşfet
- `shadcn view` ile bileşen kodunu incele
- AI'dan istediğin bileşeni projeye entegre etmesini iste

**Geliştirme Döngüsü**
1. MCP ile API/bileşen keşfi yap
2. AI'ya context ver ve istediğin özelliği anlat
3. AI'ın ürettiği kodu incele ve test et
4. İhtiyaç durumunda MCP ile ek bilgi al ve iyileştir
</Callout>

---

## MCP Kullanım Kuralları

MCP sunucularını kullanırken dikkat edilmesi gereken önemli kurallar:

<Callout type="warning" title="MCP Güvenlik Kuralları">
**API Token ve Gizli Bilgiler**
- API token'ları ve secret'ları asla log'lamayın
- Gizli bilgileri environment variable'lar ile yönetin
- Local env dosyalarını VCS'den hariç tutun

**Kod Güvenliği**
- Gizli bilgileri expose eden veya log'layan kod yazmayın
- Secret'ları ve key'leri asla repository'ye commit etmeyin
- Güvenlik best practice'lerini her zaman uygulayın
</Callout>

<Callout type="info" title="MCP Geliştirme En İyi Uygulamaları">
**ikas MCP Server Kullanımı**
- GraphQL operasyonlarını keşfetmek için `list` komutunu kullanın
- Detaylı şema bilgisi için `introspect` komutunu kullanın
- Query/mutation'ların tam yapısını AI'ya açıklayın

**shadcn MCP Server Kullanımı**
- Mevcut bileşenleri keşfetmek için `list` komutunu kullanın
- Bileşen kodunu incelemek için `view` komutunu kullanın
- AI'dan bileşeni projeye entegre etmesini isteyin

**Genel MCP Kuralları**
- MCP sunucularının güncel dokümantasyonunu takip edin
- API endpoint'lerinin rate limit'lerine dikkat edin
- Hata durumlarında uygun error handling yapın
</Callout>