> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# MCP Örnekleri

> Yaygın Flowstep MCP görevleri için uçtan uca iş akışları.

## 1. Ekran oluşturma ve önizlemesi

En yaygın iş akışı: bir ekran oluşturun (dosyayı aynı adımda oluşturarak), sonra sonucu görüntüleyin.

```
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

2. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
```

`fileId`'yi atlayarak otomatik olarak yeni bir dosya oluşturur. Ekranları o dosyaya eklemek için mevcut bir `fileId` geçin.

**AI yardımcınıza sorun:**

> Flowstep tasarımı oluşturun: bir geliştirici aracı için mobil oturum açma ekranı, e-posta/şifre ve koyu temada Google SSO düğmesi ile, sonra görüntüyü gösterin.

***

## 2. React bileşenini görselleştirme

`.jsx` veya `.tsx` dosyasını ek olarak yükleyin ve Flowstep'ten eşleşen bir tasarım oluşturmasını isteyin. Flowstep kaynağı okur ve bir ekran oluşturur — uygulamayı çalıştırmanıza gerek yoktur.

```
1. upload-attachment  { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                        "fileName": "ApiKeys.tsx",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
```

**AI yardımcınıza sorun:**

> `src/components/settings/ApiKeys.tsx` dosyasını oku, onu ek olarak yükle ve bileşen düzenini ile eşleşen Flowstep ekranı oluştur. İşlenmiş görüntüyü göster.

***

## 3. MCP tarafından oluşturulan ekran üzerinde yineleme yapma

`edit-design` ve `regenerate-design`, `designs` dizisi ile oluşturulan ekranlarda yalnızca mevcut olan tasarım bağlamı gerektirir. Bunun olmayan ekranlar için geçici çözüm, ekranı ek olarak işlemek ve `create-new-design`'i görüntü ile çağırmaktır.

```
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]
```

Tasarım bağlamına sahip ekranlar için, `edit-design`'i doğrudan `message`'daki değişiklik ve `targets`'taki ekran ile çağırın.

***

## 4. Ekranı tam bir akışa genişletme

Mevcut bir tasarıma devam eden ekranlar ekleyin.

```
1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                    → [inline PNG]
```

Kenar durum ekranları eklemek için Adım 2'yi `operationVariant: "error_state"` veya `"empty_state"` ile tekrarlayın.

<Note>
  `operationVariant`, `expand-design` için gerekli bir parametredir. Temel ekran ayrıca `designs` dizisi (tasarım bağlamı) ile oluşturulmuş olmalıdır — bunun olmayan ekranlar için, Örnek 3'teki ek geçici çözümünü kullanın.
</Note>

***

## 5. Toplu iş öncesinde kotayı denetleme

Birden fazla oluşturmaya başlamadan önce kalan kapasiteyi kontrol edin.

```
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
```

`daily` düşükse, toplu işi 00:00 UTC sonrasında sıfırlanırken planlayın.