> ## 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 Hızlı Başlangıç

> Flowstep'i yapay zeka editörünüze bağlayın ve ilk araç çağrınızı çalıştırın.

## Ön Koşullar

* Bir Flowstep hesabı ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Cursor v0.43+ gereklidir**

    ## Adım 1 — Sunucuyu ekleyin

    Genel `~/.cursor/mcp.json` dosyasını veya proje kökünüzdeki `.cursor/mcp.json` dosyasını oluşturun veya düzenleyin:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    Kaydettikten sonra Cursor'u yeniden başlatın.

    ## Adım 2 — Kimlik doğrulama yapın

    Cursor MCP panelini açın (Ayarlar → MCP) ve Flowstep'in yanında **Connect** öğesine tıklayın. Cursor, tarayıcınızı Flowstep OAuth girişine açar. Flowstep kimlik bilgilerinizle oturum açın (e-posta/parola veya Google). Tarayıcı geri yönlendirir ve Cursor belirteci otomatik olarak depolar.

    <Note>
      Kimlik doğrulamadan önce bir Flowstep hesabınızın olması gerekir. Hesabınız yoksa, önce [app.flowstep.ai](https://app.flowstep.ai) adresinde kaydolun.
    </Note>

    ## Adım 3 — Araç çağrısı çalıştırın

    Bir Cursor sohbetinde şunu sorun:

    > "List my Flowstep files"

    Cursor `list-files` öğesini çağırır ve dosya listesini döndürür. Yanıt boşsa, önce bir dosya oluşturun:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Adım 4 — Ekran oluşturun

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Cursor `create-new-design` öğesini (dosyayı oluşturur ve ekranları bir adımda oluşturur) çağırır, ardından `get-screen-image` öğesini çağırır. Oluşturulan tasarımı sohbet içinde satır içinde göreceksiniz.
  </Tab>

  <Tab title="Claude Code">
    **Claude Code CLI gereklidir**

    ## Adım 1 — Sunucuyu ekleyin

    Proje köküne `.mcp.json` dosyası (proje kapsamlı) veya `~/.claude/mcp.json` dosyası (genel) oluşturun:

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      Claude Code HTTP sunucuları için `"type": "http"` alanı gereklidir. Cursor bunu gerektirmez.
    </Note>

    ## Adım 2 — Kimlik doğrulama yapın

    Claude Code sohbetinden herhangi bir Flowstep aracı çalıştırın. İlk kullanımda, Claude Code, tarayıcınızı Flowstep OAuth girişine açar. Flowstep kimlik bilgilerinizle oturum açın (e-posta/parola veya Google). Tarayıcı geri yönlendirir ve belirteç otomatik olarak depolanır.

    <Note>
      Kimlik doğrulamadan önce bir Flowstep hesabınızın olması gerekir. Hesabınız yoksa, önce [app.flowstep.ai](https://app.flowstep.ai) adresinde kaydolun.
    </Note>

    ## Adım 3 — Araç çağrısı çalıştırın

    Bir Claude Code sohbetinde şunu sorun:

    > "List my Flowstep files"

    Claude Code `list-files` öğesini çağırır ve dosya listesini döndürür. Yanıt boşsa, önce bir dosya oluşturun:

    > "Create a new Flowstep file called 'Dashboard'"

    ## Adım 4 — Ekran oluşturun

    ```
    Create a new Flowstep file called "Login flow", then generate a mobile login screen
    for a SaaS app with email/password fields and a Google sign-in button.
    After it finishes, show me the image.
    ```

    Claude Code `create-new-design` öğesini (dosyayı oluşturur ve ekranları bir adımda oluşturur) çağırır, ardından `get-screen-image` öğesini çağırır. Oluşturulan tasarımı sohbet içinde satır içinde göreceksiniz.
  </Tab>
</Tabs>

## Sonraki adımlar

* [Araçlar referansı](/tr/mcp/tools) — tüm 20 aracın tam giriş/çıkış belgeleri
* [Örnekler](/tr/mcp/examples) — çok adımlı iş akışları
* [Diğer istemciler](/tr/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai