MCP Araçlar Referansı

Tüm araçlar bir content dizisi MCP içerik bloğu döndürür. Metin araçları { type: "text", text: "<json-string>" } döndürür. Görüntü araçları { type: "image", data: "<base64>", mimeType: "image/png" } döndürür. Başarısızlık durumunda isError: true ayarlanır ve metin bloğu hata mesajını içerir.

Dosya araçları

`list-files`

Geçerli kullanıcı için Flowstep dosyalarını listeleyin. Giriş

Parametre	Tür	Varsayılan	Açıklama
`orderByCreation`	`boolean`	`true`	Oluşturma tarihine göre sırala
`limit`	`integer` (1–100)	`20`	Döndürülecek dosya sayısı
`offset`	`integer` (≥0)	`0`	Sayfalandırma ofseti

Çıkış — Dosya nesnelerinin JSON dizisi.

[
  {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  }
]

`get-file`

Dosyayı ID’ye göre alın. Dosya içeriği kasıtlı olarak atlanır — ekranları incelemek için get-screen veya get-screen-image öğesini, bağlantılı yönergeleri almak için get-design-guidelines öğesini kullanın. Giriş

Parametre	Tür	Açıklama
`id`	`uuid`	Dosya ID’si

Çıkış — JSON dosya nesnesi.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`create-file`

Yeni bir Flowstep dosyası oluşturun. Giriş

Parametre	Tür	Açıklama
`title`	`string` (min 1)	Dosya adı

Çıkış — Yeni dosyanın id ile JSON dosya nesnesi.

{
  "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "name": "Dashboard redesign",
  "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
  "created_at": "2026-04-30T15:02:13.120152+00:00",
  "updated_at": "2026-04-30T15:02:13.120152+00:00",
  "access_level": "private",
  "user_access_level": "write",
  "owner": true,
  "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
}

Döndürülen id öğesini sonraki araç çağrılarında fileId olarak kullanın.

`update-file`

Dosyayı yeniden adlandırın. Giriş

Parametre	Tür	Açıklama
`id`	`uuid`	Dosya ID’si
`name`	`string` (min 1)	Yeni ad

Çıkış — get-file ile aynı şekilde güncellenen dosya nesnesi.

{
  "file": {
    "id": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
    "name": "Dashboard redesign (v2)",
    "project_id": "81cb84d6-c69f-492c-a895-7421b60d1a6d",
    "created_at": "2026-04-30T15:02:13.120152+00:00",
    "updated_at": "2026-04-30T15:02:13.120152+00:00",
    "access_level": "private",
    "owner": true,
    "url": "https://app.flowstep.ai/file?activeFileId=5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0"
  },
  "user_access_level": "write"
}

`delete-file`

Bir dosyayı kalıcı olarak silin. Geçirdiğiniz name, silme işleminden önce dosyanın gerçek adına karşı doğrulanır — eşleşmezse silme iptal edilir. Bu, yanlış dosyayı yanlışlıkla silmeyi engeller. Giriş

Parametre	Tür	Açıklama
`id`	`uuid`	Dosya ID’si
`name`	`string`	Dosyanın geçerli adı — tam olarak eşleşmelidir veya silme iptal edilir

Çıkış — "File deleted successfully"

Bu geri alınamaz. Dosyadaki tüm ekranlar silinir.

Ekran araçları

`list-screens`

Bir dosya için tüm oluşturulan ekranları listeleyin. Döndürülen screenId değerlerini get-screen, get-screen-image, upload-attachment içinde ve edit-design, regenerate-design veya expand-design içinde targets olarak kullanın. Giriş

Parametre	Tür	Açıklama
`fileId`	`uuid`	Dosya ID’si

Çıkış — Ekran özetlerinin JSON dizisi.

[
  {
    "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe",
    "name": "Mobile login screen",
    "fidelity": "ui",
    "prompt": "Generate a simple mobile login screen with email and password fields and a sign in button",
    "createdAt": "2026-04-30T15:02:37.444139+00:00"
  }
]

name, kullanıcı tarafından atanan ekran adı veya adlandırılmamışsa null değeridir.

`get-screen`

Bir ekranın JSX kodunu alın ve bunu Flowstep dışında düzenlemek veya kullanmak için izin verin. Görsel bir önizleme için bunun yerine get-screen-image öğesini kullanın. Giriş

Parametre	Tür	Açıklama
`fileId`	`uuid`	Dosya ID’si
`screenId`	`uuid`	`list-screens` veya bir tasarım aracı tarafından döndürülen `screenIds` dizisinden döndürülen `screenId`

Çıkış — Ekran kod olarak (JSX). İlk satırın yorumuna dikkat edin — bu add-screen aracı kullanırken gereklidir.

<!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" screenId: "c13d3707-0efe-49f5-b6cb-0ca5ac5223d0" -->
<div className="bg-white text-zinc-950 w-full h-fit">
  <div className="flex p-6 flex-col gap-6">
    <div className="flex pt-4 justify-between items-center">
      <ArrowLeft className="size-5 text-[#71717b]" />
      <span className="font-semibold text-zinc-950 text-lg leading-7">
        World Clock
      </span>
      <Plus className="size-5 text-[#2b7fff]" />
    </div>
    <div className="rounded-xl bg-zinc-100 flex p-2 items-center gap-2">
      <Search className="size-4 text-[#71717b] ml-2" />
      <span className="text-[#71717b] text-sm leading-5">Search cities...</span>
    </div>
...
    <div className="flex pt-2 pb-4 justify-center items-center gap-4">
      <Button variant="outline" className="rounded-full px-6 gap-2">
        <Clock className="size-4" />
        <span>Compare</span>
      </Button>
      <Button className="rounded-full bg-[#2b7fff] text-blue-50 px-6 gap-2">
        <Bell className="size-4" />
        <span>Set Alert</span>
      </Button>
    </div>
  </div>
</div>;

`add-screen`

Ham bir JSX dizesinden Flowstep dosyasına yeni bir ekran ekleyin. Giriş

Parametre	Tür	Açıklama
`fileId`	`uuid`	Dosya ID’si
`jsxContent`	`string`	Dosyaya ekran olarak eklenecek JSX
`screenType`	`string`	Ekran türü JSX’in başındaki yorum olarak tanımlanmamışsa gereklidir

Not - JSX’in ilk satırı olarak aşağıdakine benzer bir yorum MEVCUT OLMALIDIR. screenType, name ve screenId hepsi isteğe bağlıdır — screenId mevcut olduğunda (örneğin get-screen çıkışından kopyalanan JSX geçilirken) kullanılır ancak zorunlu değildir. Ekran adı yorumun name alanından alınır (açıklama olarak gösterilen “Copy of <name>”) veya yoksunsa “Untitled”.  Çıkış — Yeni eklenen ekran Id’si.

{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

`get-screen-image`

Bir ekranı PNG’ye işleyin ve satır içi bir görüntü olarak döndürün. Görüntü içerik bloklarını destekleyen bir istemci gerektirir. Giriş

Parametre	Tür	Açıklama
`fileId`	`uuid`	Dosya ID’si
`screenId`	`uuid`	`list-screens` veya bir tasarım aracı tarafından döndürülen `screenIds` dizisinden döndürülen `screenId`

Çıkış — MCP görüntü içerik bloğu (image/png).

Yapay zeka araçları

regenerate-design, expand-design ve edit-design, yalnızca designs dizisi ile oluşturulan ekranlarda bulunan tasarım bağlamı gerektirir. Tasarım bağlamı olmadan oluşturulan ekranlar bir hata döndürür. Geçici çözüm: upload-attachment kullanarak ekranı bir görüntü olarak işleyin, ardından istenen değişiklikleri açıklayan bir iletiyle görüntüyü attachments içinde create-new-design ile çağırın.

`create-new-design`

Metin isteminden bir veya daha fazla ekran tasarımı oluşturun. Yeni bir dosyayı otomatik olarak oluşturmak için fileId öğesini atla yalıyor. Oluşturma tamamlanana veya zaman aşımına uğrayana kadar (180 saniye) engeller. Giriş

Parametre	Tür	Varsayılan	Açıklama
`fileId`	`uuid`	—	Hedef dosya — otomatik olarak yeni bir dosya oluşturmak için atla
`message`	`string`	—	Oluşturulacak ekranları açıklayan istem
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Önceden yüklenen ekler — görüntüler, PDF’ler veya kod dosyaları. Daima `upload-attachment` aracılığıyla yükle; dosya içeriğini iletiyle satır içi olarak geçme
`designs`	`DesignRequestData[]`	`[]`	Tasarım referansları

Çıkış — { fileId, screenIds }. Her screenId öğesini get-screen-image öğesine geçire sonuçları görüntüle.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

`regenerate-design`

Varolan ekranları sıfırdan veya stil varyasyonu ile yeniden yapın. targets içinde en az bir screenId gerektirir. Oluşturma tamamlanana veya zaman aşımına uğrayana kadar (180 saniye) engeller. Giriş

Parametre	Tür	Varsayılan	Açıklama
`fileId`	`uuid`	—	Hedef dosya
`message`	`string`	—	İstem metni
`targets`	`uuid[]` (min 1)	—	Yeniden oluşturulacak ekranların screenIds
`operationVariant`	`"different_layout" \| "different_style" \| "from_scratch"`	—	İsteğe bağlı stil varyasyonu
`designs`	`DesignRequestData[]`	`[]`	Tasarım referansları (otomatik olarak çözümlenir)

Çıkış — { fileId, screenIds }. Her screenId öğesini get-screen-image öğesine geçire sonuçları görüntüle.

`expand-design`

Varolan bir tasarıma izleyen ekranlar ekleyin. targets içinde en az bir screenId ve zorunlu bir operationVariant gerektirir. Oluşturma tamamlanana veya zaman aşımına uğrayana kadar (180 saniye) engeller. Giriş

Parametre	Tür	Varsayılan	Açıklama
`fileId`	`uuid`	—	Hedef dosya
`message`	`string`	—	İstem metni
`targets`	`uuid[]` (min 1)	—	İzlenen ekranlar oluşturulacak screenIds
`operationVariant`	`"next_screen" \| "error_state" \| "empty_state" \| "web_version" \| "mobile_version" \| "tablet_version" \| "mobile_ios_version" \| "mobile_android_version"`	—	Gerekli — oluşturulacak izleyen ekran türü
`designs`	`DesignRequestData[]`	`[]`	Tasarım referansları (otomatik olarak çözümlenir)

Çıkış — { fileId, screenIds }. Her screenId öğesini get-screen-image öğesine geçire sonuçları görüntüle.

`edit-design`

Varolan ekranları bir istem aracılığıyla değiştirin. targets içinde en az bir screenId gerektirir. Oluşturma tamamlanana veya zaman aşımına uğrayana kadar (180 saniye) engeller. Giriş

Parametre	Tür	Varsayılan	Açıklama
`fileId`	`uuid`	—	Hedef dosya
`message`	`string`	—	Uygulanacak düzenlemeleri açıklayan yönergeler
`targets`	`uuid[]` (min 1)	—	Düzenlenecek ekranların screenIds
`operationVariant`	`"dark_theme" \| "light_theme" \| "make_pretty"`	—	İsteğe bağlı stil kısayolu
`attachments`	`AttachmentRequestData[]` (max 5)	`[]`	Önceden yüklenen ekler. Daima `upload-attachment` aracılığıyla yükle
`designs`	`DesignRequestData[]`	`[]`	Tasarım referansları (otomatik olarak çözümlenir)

Çıkış — { fileId, screenIds }. Her screenId öğesini get-screen-image öğesine geçire sonuçları görüntüle.

`upload-attachment`

create-new-design veya edit-design içinde kullanılmak üzere bir dosyayı yükleyin. { id, path, type, mimeType } döndürür — bu nesneyi doğrudan attachments dizisine geçirin. İki mod: Mod 1 — ID’ye göre Ekran screenId ve fileId öğelerini geçirin. Sunucu veritabanından ekran durumunu alır ve bunu bir görüntü olarak işler.

Parametre	Tür	Açıklama
`fileId`	`uuid`	Ekranı içeren dosya (gerekli)
`screenId`	`uuid`	İşlenecek ekran

Mod 2 — Dış dosya Dosya içeriğini doğrudan geçirin. İkili dosyalar base64 kodlanmalıdır; metin dosyaları (kaynak kod dahil) düz UTF-8 dizeleri olarak geçirilir.

Parametre	Tür	Açıklama
`fileData`	`string`	Dosya içeriği — ikili için base64, metin için UTF-8 dizesi
`fileName`	`string`	Orijinal dosya adı
`mimeType`	`"image/jpeg" \| "image/png" \| "image/webp" \| "application/pdf" \| "text/plain" \| "text/javascript"`	MIME türü. `.jsx`, `.tsx`, `.js`, `.ts` dosyaları için `text/javascript` kullanın

Max dosya boyutu: 3 MB. Büyük görüntüler için image/png üzerinde image/jpeg kullanmayı tercih edin. Çıkış

{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}

type, görüntü/PDF yüklemeleri için "image" ve metin/kod dosyaları için "document" değeridir.

Sohbet araçları

`get-chat-history`

Bir dosya için sohbet iletisi geçmişini alın. Giriş

Parametre	Tür	Açıklama
`fileId`	`uuid`	Dosya ID’si

Çıkış — messages dizisine sahip JSON nesnesi. Her iletiyi bir type ("request" veya "response"), author ("human" veya "ai") ve content_type ("text", "summary" veya "followup").

{
  "messages": [
    {
      "id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "request",
      "status": "success",
      "content": "Generate a simple mobile login screen with email and password fields",
      "author": "human",
      "content_type": "text",
      "sequence": 1,
      "request_message_id": null,
      "targets": [],
      "attachments": []
    },
    {
      "id": "d860186b-82d5-4bd1-8e8e-8ba5377a14bf",
      "chat_id": "146d0f19-497e-450c-ba53-3de15f6bd70b",
      "type": "response",
      "status": "success",
      "content": "Generated a mobile login screen with email and password input fields, sign in button, remember me checkbox, forgot password link, social login options (Apple/Google), and sign up link.",
      "author": "ai",
      "content_type": "summary",
      "sequence": 7,
      "request_message_id": "453f593d-2380-425b-ba29-127db08d6a8e",
      "targets": [{ "target_id": "3f9e6eb6-5525-4383-9375-67e0bd762dbe" }],
      "attachments": []
    }
  ]
}

Tasarım araçları

`get-design-guidelines`

Bir dosya için depolanmış tasarım yönergelerini alın. Giriş

Parametre	Tür	Varsayılan	Açıklama
`resourceId`	`uuid`	—	Dosya ID’si
`linkedTo`	`"file"`	`"file"`	Kaynak türü

Çıkış

{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter",
  "linkedTo": "file"
}

guidelines, hiçbir yönerge ayarlanmamışsa null değeridir.

`update-design-guidelines`

Bir dosya için tasarım yönergelerini ayarlayın veya değiştirin. Yönergeler Google’ın design.md biçiminde düz metin dizesi olarak geçirilir — nesne veya JSON geçirmeyin. Sunucu yumuşak doğrulama gerçekleştirir ve yanıtta kabul edilen ancak yapay zeka tarafından yok sayılabilecek sorunları (bilinmeyen anahtarlar, onaltılı olmayan renkler) listeleyen bir Warnings: bölümü döndürebilir. Bunları kullanıcıya yüzey. Giriş

Parametre	Tür	Varsayılan	Açıklama
`resourceId`	`uuid`	—	Dosya ID’si
`designGuidelines`	`string` (min 1)	—	Yönergelerin ham metin içeriği. Düz bir dizin olmalıdır — JSON kodlanmış değil
`linkedTo`	`"file"`	`"file"`	Kaynak türü

Doğrulama kuralları

Frontmatter doğru açılmalı ve kapatılmalıdır
Frontmatter satırları geçerli blok stili YAML olmalıdır
Markdown gövdesi yinelenen ## bölüm başlıkları içermemelidir

Çıkış — "Design guidelines updated successfully", isteğe bağlı olarak Warnings: bölümü takip eder.

`delete-design-guidelines`

Bir dosya için tasarım yönergelerini temizleyin. Giriş

Parametre	Tür	Varsayılan	Açıklama
`resourceId`	`uuid`	—	Dosya ID’si
`linkedTo`	`"file"`	`"file"`	Kaynak türü

Çıkış — "Design guidelines deleted successfully"

Figma araçları

`import-figma`

Bir Figma çerçevesini Flowstep dosyasına tuvalinde düzenlenebilir öğeler olarak içe aktarın. Aynı çerçeveyi yeniden içe aktarmak bunu yerinde günceller. Dosyanın organizasyonunun Flowstep ayarlarında Figma bağlı olması gerekir. Giriş

Parametre	Tür	Açıklama
`figmaUrl`	`string`	Belirli bir Figma çerçevesine bağlantı. Figma’da çerçeveye sağ tıklayın ve Copy link to selection seçeneğini seçin. Bir sayfaya bağlantı, bu sayfadaki tüm üst düzey çerçeveleri içe aktarır (MCP üzerinde 20 çerçeve ile sınırlı).
`fileId`	`uuid`	Çerçevenin içe aktarılacağı Flowstep dosyası

Çıkış — { fileId, screenId }. screenId, içe aktarılan ekran öğesinin kimliğidir — sonucu görüntülemek için get-screen-image öğesine geçirin. Bir sayfa URL’si birden fazla çerçeveyi içe aktardığında, screenId null ve bunun yerine frameCount döndürülür.

{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbe"
}

Faturalandırma araçları

`get-plan-details`

Geçerli kullanıcının planı, abonelik durumunu ve kalan kotasını alın. Giriş almaz. Çıkış

{
  "plan": {
    "name": "Starter",
    "code": "starter",
    "type": "paid"
  },
  "subscription": {
    "isPaid": true,
    "isTrial": false,
    "startDate": "2025-01-01T00:00:00Z",
    "endDate": null,
    "trialDaysRemaining": null
  },
  "limits": {
    "messages": {
      "daily": { "max": 50, "warn": 40 },
      "monthly": { "max": 500, "warn": 400 },
      "unlimited": false
    }
  },
  "usage": {
    "messages": { "daily": 12, "monthly": 87 }
  },
  "remaining": {
    "messages": { "daily": 38, "monthly": 413 }
  }
}

Limitler plana göre değişiklik gösterir. Oluşturmalar başlamadan önce mevcut kotayı kontrol etmek için bu aracı çağırın.

Başlarken

Flowstep Kullanımı

Ekipler ve Organizasyonlar

Dışa Aktarma ve Entegrasyonlar

MCP Sunucusu

Faturalandırma ve Planlar

Güvenlik ve Gizlilik

MCP Araçlar Referansı

Dosya araçları

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Ekran araçları

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Yapay zeka araçları

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Sohbet araçları

`get-chat-history`

Tasarım araçları

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma araçları

`import-figma`

Faturalandırma araçları

`get-plan-details`

​Dosya araçları

​list-files

​get-file

​create-file

​update-file

​delete-file

​Ekran araçları

​list-screens

​get-screen

​add-screen

​get-screen-image

​Yapay zeka araçları

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Sohbet araçları

​get-chat-history

​Tasarım araçları

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Figma araçları

​import-figma

​Faturalandırma araçları

​get-plan-details

Dosya araçları

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Ekran araçları

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Yapay zeka araçları

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Sohbet araçları

`get-chat-history`

Tasarım araçları

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Figma araçları

`import-figma`

Faturalandırma araçları

`get-plan-details`