> ## 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.

# Flowstep MCP Sunucusu

> Flowstep'i MCP sunucusu olarak kullanarak UI tasarımlarını doğrudan Cursor, Claude Code veya herhangi bir MCP uyumlu istemciden oluşturun, inceleyin ve yönetin.

Flowstep, tasarım araçlarını [Model Context Protocol](https://modelcontextprotocol.io/) üzerinden kullanıma sunar ve yapay zeka asistanınızın editörden çıkmadan UI ekranları oluşturmasına ve geliştirmesine olanak tanır.

Sunucu `https://api.flowstep.ai/mcp` adresinde barındırılır (Streamable HTTP aktarımı). Çalıştırılması gereken yerel bir işlem yoktur.

## Neler yapabilirsiniz

Sunucu yedi kategori arasında 20 aracı kullanıma sunar:

| Kategori                 | Araçlar                                                                                       |
| ------------------------ | --------------------------------------------------------------------------------------------- |
| **Dosyalar**             | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Ekranlar**             | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Yapay zeka oluşturma** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Sohbet**               | `get-chat-history`                                                                            |
| **Tasarım**              | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**                | `import-figma`                                                                                |
| **Faturalandırma**       | `get-plan-details`                                                                            |

## Yaygın kullanım durumları

**İstemden ekranlar oluşturun** — bir açıklama ile `create-new-design` öğesini çağırın. Flowstep, dosyayı ve ekranları bir adımda oluşturur. Döndürülen `screenIds` ile `get-screen-image` öğesini çağırarak sonucu satır içinde görebilirsiniz.

**React bileşenini görselleştirin** — `.jsx` veya `.tsx` dosyanızı `upload-attachment` aracılığıyla yükleyin (`mimeType: text/javascript` kullanın), ardından döndürülen eki bileşeni açıklayan bir iletiyle `create-new-design` içine geçirin. Flowstep kaynağı okur ve eşleşen bir tasarım ekranı oluşturur.

**Tasarımda yineleme yapın** — hedef `screenId` ile `edit-design` öğesini çağırarak onu değiştirmek için yönergeler verin veya bir ekranı sıfırdan yeniden yapmak için `regenerate-design` öğesini çağırın.

**Tasarım yönergelerini yönetin** — geçerli stil kurallarınızı (renkler, tipografi, boşluk, ton) almak için `get-design-guidelines` öğesini çağırın, ardından tasarımınız gelişirken bunları eşit tutmak için `update-design-guidelines` öğesini kullanın. `create-new-design` veya `edit-design` öğesine tutarlı yönergeleri geçmek, her oluşturulan ekranın marka ile uyumlu kalmasını sağlar. Bunları tamamen sıfırlamak için `delete-design-guidelines` öğesini kullanın.

**Figma'dan içe aktarın** — bir Figma çerçeve bağlantısı ve bir `fileId` ile `import-figma` öğesini çağırarak çerçeveyi Flowstep dosyasına düzenlenebilir öğeler olarak getirebilirsiniz. Dosyanın organizasyonunun önce Figma bağlı olması gerekir.

**Kotayı denetleyin** — oluşturma işleminden önce kalan günlük ve aylık kullanımı görmek için `get-plan-details` öğesini çağırın.

## Uç nokta

```
https://api.flowstep.ai/mcp
```

Aktarım: Streamable HTTP. Oturum modeli: durumsuz (her istek bağımsızdır, oturum ID'si yoktur).

## Sonraki adımlar

<CardGroup cols={2}>
  <Card title="Hızlı Başlangıç" icon="bolt" href="/tr/mcp/quickstart">
    Cursor ile 5 dakika içinde ilk araç çağrısı.
  </Card>

  <Card title="Kimlik Doğrulama" icon="lock" href="/tr/mcp/authentication">
    OAuth 2.1 PKCE'nin nasıl çalıştığı ve belirteçlerin nasıl verildiği.
  </Card>

  <Card title="Araçlar" icon="wrench" href="/tr/mcp/tools">
    Tüm 20 aracın tam giriş/çıkış referansı.
  </Card>

  <Card title="Örnekler" icon="code" href="/tr/mcp/examples">
    Yaygın görevler için uçtan uca iş akışları.
  </Card>
</CardGroup>