Chuyển đến nội dung chính
Tất cả các công cụ trả về một mảng content của các khối nội dung MCP. Các công cụ văn bản trả về { type: "text", text: "<json-string>" }. Các công cụ hình ảnh trả về { type: "image", data: "<base64>", mimeType: "image/png" }. Khi thất bại, isError: true được đặt và khối văn bản chứa thông báo lỗi.

Công cụ tệp

list-files

Liệt kê các tệp Flowstep cho người dùng hiện tại. Đầu vào
Tham sốLoạiMặc địnhMô tả
orderByCreationbooleantrueSắp xếp theo ngày tạo
limitinteger (1–100)20Số lượng tệp để trả về
offsetinteger (≥0)0Độ dời phân trang
Đầu ra — Mảng JSON các đối tượng tệp.
[
  {
    "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

Lấy một tệp duy nhất theo ID. Nội dung tệp được bỏ qua một cách cố ý — sử dụng get-screen hoặc get-screen-image để kiểm tra các màn hình, và get-design-guidelines để lấy các nguyên tắc đính kèm. Đầu vào
Tham sốLoạiMô tả
iduuidID tệp
Đầu ra — Đối tượng tệp JSON.
{
  "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

Tạo một tệp Flowstep mới. Đầu vào
Tham sốLoạiMô tả
titlestring (min 1)Tên tệp
Đầu ra — Đối tượng tệp JSON với id của tệp mới.
{
  "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"
}
Sử dụng id được trả về làm fileId trong các lệnh công cụ tiếp theo.

update-file

Đổi tên một tệp. Đầu vào
Tham sốLoạiMô tả
iduuidID tệp
namestring (min 1)Tên mới
Đầu ra — Đối tượng tệp được cập nhật có hình dạng giống như get-file.
{
  "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

Xóa vĩnh viễn một tệp. name mà bạn chuyển được xác minh so với tên thực tế của tệp trước khi xóa — nếu nó không khớp, quá trình xóa bị hủy. Điều này ngăn chặn việc vô tình xóa tệp sai. Đầu vào
Tham sốLoạiMô tả
iduuidID tệp
namestringTên hiện tại của tệp — phải khớp chính xác hoặc xóa bị hủy
Đầu ra"File deleted successfully"
Điều này không thể hoàn tác. Tất cả các màn hình trong tệp được xóa.

Công cụ màn hình

list-screens

Liệt kê tất cả các màn hình được tạo cho một tệp. Sử dụng giá trị screenId được trả về để tham chiếu các màn hình trong get-screen, get-screen-image, upload-attachment, và như targets trong edit-design, regenerate-design, hoặc expand-design. Đầu vào
Tham sốLoạiMô tả
fileIduuidID tệp
Đầu ra — Mảng JSON của các bản tóm tắt màn hình.
[
  {
    "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 là tên màn hình do người dùng gán, hoặc null nếu không được đặt tên.

get-screen

Lấy mã JSX cho một màn hình cho phép bạn chỉnh sửa hoặc sử dụng mã bên ngoài Flowstep. Sử dụng get-screen-image để xem trước trực quan thay thế. Đầu vào
Tham sốLoạiMô tả
fileIduuidID tệp
screenIduuidscreenId được trả về bởi list-screens hoặc từ mảng screenIds được trả về bởi một công cụ thiết kế
Đầu ra — Màn hình dưới dạng mã (JSX). Lưu ý dòng bình luận đầu tiên là bắt buộc khi sử dụng công cụ add-screen.
<!-- 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

Thêm một màn hình mới vào một tệp Flowstep từ một chuỗi JSX thô. Đầu vào
Tham sốLoạiMô tả
fileIduuidID tệp
jsxContentstringJSX để thêm vào tệp như một màn hình
screenTypestringBắt buộc nếu loại màn hình không được định nghĩa dưới dạng bình luận ở đầu JSX
Ghi chú - Một bình luận tương tự như bên dưới PHẢI có ở dòng đầu tiên của JSX vì nó được sử dụng để thêm màn hình chính xác. screenType, name, và screenId đều tùy chọn — screenId được sử dụng (nội bộ) nếu có (ví dụ: khi chuyển JSX được sao chép từ đầu ra get-screen) nhưng không bắt buộc. Tên màn hình được lấy từ trường name của bình luận (được hiển thị là “Copy of <name>”), hoặc “Untitled” nếu không có. <!-- screenType: "iphone-x-vertical" width: "375" height: "812" name: "Change to a light theme" colorTheme: "blue" --> Đầu ra — ID màn hình mới được thêm.
{ "screenId": "3f9e6eb6-5525-4383-9375-67e0bd762dbf" }

get-screen-image

Hiển thị một màn hình thành PNG và trả về nó dưới dạng hình ảnh nội tuyến. Yêu cầu một ứng dụng khách hỗ trợ các khối nội dung hình ảnh. Đầu vào
Tham sốLoạiMô tả
fileIduuidID tệp
screenIduuidscreenId được trả về bởi list-screens hoặc từ mảng screenIds được trả về bởi một công cụ thiết kế
Đầu ra — Khối nội dung hình ảnh MCP (image/png).

Công cụ AI

regenerate-design, expand-design, và edit-design yêu cầu bối cảnh thiết kế chỉ có trong các màn hình được tạo ban đầu với một mảng designs. Các màn hình được tạo mà không có bối cảnh thiết kế sẽ trả về lỗi. Cách khắc phục: sử dụng upload-attachment để hiển thị màn hình dưới dạng hình ảnh, sau đó gọi create-new-design với hình ảnh trong attachments và một tin nhắn mô tả các thay đổi mong muốn.

create-new-design

Tạo một hoặc nhiều thiết kế màn hình từ một prompt văn bản. Bỏ qua fileId để tạo một tệp mới tự động. Chặn cho đến khi tạo hoàn thành hoặc hết thời gian chờ (180 giây). Đầu vào
Tham sốLoạiMặc địnhMô tả
fileIduuidTệp mục tiêu — bỏ qua để tạo tệp mới tự động
messagestringPrompt mô tả các màn hình được tạo
attachmentsAttachmentRequestData[] (max 5)[]Phần đính kèm được tải lên trước — hình ảnh, PDF hoặc tệp mã. Luôn tải lên qua upload-attachment trước; không nhúng nội dung tệp trong tin nhắn
designsDesignRequestData[][]Tài liệu tham khảo thiết kế
Đầu ra{ fileId, screenIds }. Chuyển mỗi screenId đến get-screen-image để xem kết quả.
{
  "fileId": "5c2170f0-5b09-4a5a-ba7a-4d5c2cfb07e0",
  "screenIds": ["3f9e6eb6-5525-4383-9375-67e0bd762dbe"]
}

regenerate-design

Tạo lại các màn hình hiện có từ đầu hoặc với một biến thể kiểu. Yêu cầu ít nhất một screenId trong targets. Chặn cho đến khi tạo hoàn thành hoặc hết thời gian chờ (180 giây). Đầu vào
Tham sốLoạiMặc địnhMô tả
fileIduuidTệp mục tiêu
messagestringVăn bản prompt
targetsuuid[] (min 1)screenIds của các màn hình để tạo lại
operationVariant"different_layout" | "different_style" | "from_scratch"Biến thể kiểu tùy chọn
designsDesignRequestData[][]Tài liệu tham khảo thiết kế (được giải quyết tự động)
Đầu ra{ fileId, screenIds }. Chuyển mỗi screenId đến get-screen-image để xem kết quả.

expand-design

Thêm các màn hình tiếp theo vào một thiết kế hiện có. Yêu cầu ít nhất một screenId trong targets và một operationVariant bắt buộc. Chặn cho đến khi tạo hoàn thành hoặc hết thời gian chờ (180 giây). Đầu vào
Tham sốLoạiMặc địnhMô tả
fileIduuidTệp mục tiêu
messagestringVăn bản prompt
targetsuuid[] (min 1)screenIds của các màn hình để mở rộng từ
operationVariant"next_screen" | "error_state" | "empty_state" | "web_version" | "mobile_version" | "tablet_version" | "mobile_ios_version" | "mobile_android_version"Bắt buộc — loại màn hình tiếp theo để tạo
designsDesignRequestData[][]Tài liệu tham khảo thiết kế (được giải quyết tự động)
Đầu ra{ fileId, screenIds }. Chuyển mỗi screenId đến get-screen-image để xem kết quả.

edit-design

Sửa đổi các màn hình hiện có thông qua một prompt. Yêu cầu ít nhất một screenId trong targets. Chặn cho đến khi tạo hoàn thành hoặc hết thời gian chờ (180 giây). Đầu vào
Tham sốLoạiMặc địnhMô tả
fileIduuidTệp mục tiêu
messagestringHướng dẫn mô tả các chỉnh sửa để áp dụng
targetsuuid[] (min 1)screenIds của các màn hình để chỉnh sửa
operationVariant"dark_theme" | "light_theme" | "make_pretty"Phím tắt kiểu tùy chọn
attachmentsAttachmentRequestData[] (max 5)[]Phần đính kèm được tải lên trước. Luôn tải lên qua upload-attachment trước
designsDesignRequestData[][]Tài liệu tham khảo thiết kế (được giải quyết tự động)
Đầu ra{ fileId, screenIds }. Chuyển mỗi screenId đến get-screen-image để xem kết quả.

upload-attachment

Tải lên một tệp để sử dụng như một phần đính kèm trong create-new-design hoặc edit-design. Trả về { id, path, type, mimeType } — chuyển đối tượng này trực tiếp vào mảng attachments. Hai chế độ: Chế độ 1 — Màn hình theo ID Chuyển screenIdfileId. Máy chủ tìm nạp trạng thái màn hình từ cơ sở dữ liệu và hiển thị nó dưới dạng hình ảnh.
Tham sốLoạiMô tả
fileIduuidTệp chứa màn hình (bắt buộc)
screenIduuidMàn hình để hiển thị
Chế độ 2 — Tệp bên ngoài Chuyển nội dung tệp trực tiếp. Các tệp nhị phân phải được mã hóa base64; các tệp văn bản (bao gồm mã nguồn) được chuyển dưới dạng chuỗi UTF-8 đơn giản.
Tham sốLoạiMô tả
fileDatastringNội dung tệp — base64 cho tệp nhị phân, chuỗi UTF-8 cho tệp văn bản
fileNamestringTên tệp gốc
mimeType"image/jpeg" | "image/png" | "image/webp" | "application/pdf" | "text/plain" | "text/javascript"Loại MIME. Sử dụng text/javascript cho các tệp .jsx, .tsx, .js, .ts
Kích thước tệp tối đa: 3 MB. Đối với các hình ảnh lớn, ưu tiên image/jpeg hơn image/png. Đầu ra
{
  "id": "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "path": "attachments/a1b2c3d4-e5f6-7890-abcd-ef1234567890",
  "type": "image",
  "mimeType": "image/jpeg"
}
type"image" cho các tải lên hình ảnh/PDF và "document" cho các tệp văn bản/mã.

Công cụ trò chuyện

get-chat-history

Lấy lịch sử tin nhắn trò chuyện cho một tệp. Đầu vào
Tham sốLoạiMô tả
fileIduuidID tệp
Đầu ra — Đối tượng JSON với mảng messages. Mỗi tin nhắn có type ("request" hoặc "response"), author ("human" hoặc "ai"), và content_type ("text", "summary", hoặc "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": []
    }
  ]
}

Công cụ thiết kế

get-design-guidelines

Lấy các nguyên tắc thiết kế được lưu trữ cho một tệp. Đầu vào
Tham sốLoạiMặc địnhMô tả
resourceIduuidID tệp
linkedTo"file""file"Loại tài nguyên
Đầu ra
{
  "guidelines": "## Colors\n\nPrimary: #6366F1\nBackground: #FFFFFF\n\n## Typography\n\nFont: Inter",
  "linkedTo": "file"
}
guidelinesnull nếu chưa đặt nguyên tắc.

update-design-guidelines

Đặt hoặc thay thế các nguyên tắc thiết kế cho một tệp. Nguyên tắc được chuyển dưới dạng chuỗi văn bản thuần túy ở định dạng design.md của Google — không chuyển một đối tượng hoặc JSON. Máy chủ thực hiện xác thực mềm và có thể trả về phần Warnings: trong phản hồi liệt kê các vấn đề (khóa không xác định, màu không phải hex) được chấp nhận nhưng có thể bị bỏ qua bởi AI. Hiển thị những điều này cho người dùng. Đầu vào
Tham sốLoạiMặc địnhMô tả
resourceIduuidID tệp
designGuidelinesstring (min 1)Nội dung văn bản thô của nguyên tắc. Phải là chuỗi thuần túy — không được mã hóa JSON
linkedTo"file""file"Loại tài nguyên
Quy tắc xác thực
  • Frontmatter phải được mở và đóng chính xác
  • Các dòng Frontmatter phải là YAML hợp lệ theo phong cách khối
  • Phần Markdown không được chứa các tiêu đề phần ## trùng lặp
Đầu ra"Design guidelines updated successfully", tùy chọn theo sau bởi phần Warnings:.

delete-design-guidelines

Xóa các nguyên tắc thiết kế cho một tệp. Đầu vào
Tham sốLoạiMặc địnhMô tả
resourceIduuidID tệp
linkedTo"file""file"Loại tài nguyên
Đầu ra"Design guidelines deleted successfully"

Công cụ thanh toán

get-plan-details

Lấy gói hiện tại của người dùng, trạng thái đăng ký và hạn ngạch còn lại. Không lấy đầu vào. Đầu ra
{
  "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 }
  }
}
Giới hạn thay đổi theo gói. Gọi công cụ này trước khi thực hiện một loạt các bước tạo để kiểm tra hạn ngạch có sẵn.