Tài liệu tham khảo công cụ MCP

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ại	Mặc định	Mô tả
`orderByCreation`	`boolean`	`true`	Sắp xếp theo ngày tạo
`limit`	`integer` (1–100)	`20`	Số lượng tệp để trả về
`offset`	`integer` (≥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ại	Mô tả
`id`	`uuid`	ID 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ại	Mô tả
`title`	`string` (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ại	Mô tả
`id`	`uuid`	ID tệp
`name`	`string` (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ại	Mô tả
`id`	`uuid`	ID tệp
`name`	`string`	Tê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ại	Mô tả
`fileId`	`uuid`	ID 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ại	Mô tả
`fileId`	`uuid`	ID tệp
`screenId`	`uuid`	`screenId` đượ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ại	Mô tả
`fileId`	`uuid`	ID tệp
`jsxContent`	`string`	JSX để thêm vào tệp như một màn hình
`screenType`	`string`	Bắ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ó.  Đầ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ại	Mô tả
`fileId`	`uuid`	ID tệp
`screenId`	`uuid`	`screenId` đượ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ại	Mặc định	Mô tả
`fileId`	`uuid`	—	Tệp mục tiêu — bỏ qua để tạo tệp mới tự động
`message`	`string`	—	Prompt mô tả các màn hình được tạo
`attachments`	`AttachmentRequestData[]` (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
`designs`	`DesignRequestData[]`	`[]`	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ại	Mặc định	Mô tả
`fileId`	`uuid`	—	Tệp mục tiêu
`message`	`string`	—	Văn bản prompt
`targets`	`uuid[]` (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
`designs`	`DesignRequestData[]`	`[]`	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ại	Mặc định	Mô tả
`fileId`	`uuid`	—	Tệp mục tiêu
`message`	`string`	—	Văn bản prompt
`targets`	`uuid[]` (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
`designs`	`DesignRequestData[]`	`[]`	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ại	Mặc định	Mô tả
`fileId`	`uuid`	—	Tệp mục tiêu
`message`	`string`	—	Hướng dẫn mô tả các chỉnh sửa để áp dụng
`targets`	`uuid[]` (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
`attachments`	`AttachmentRequestData[]` (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
`designs`	`DesignRequestData[]`	`[]`	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 screenId và fileId. 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ại	Mô tả
`fileId`	`uuid`	Tệp chứa màn hình (bắt buộc)
`screenId`	`uuid`	Mà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ại	Mô tả
`fileData`	`string`	Nội dung tệp — base64 cho tệp nhị phân, chuỗi UTF-8 cho tệp văn bản
`fileName`	`string`	Tê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 là "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ại	Mô tả
`fileId`	`uuid`	ID 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ại	Mặc định	Mô tả
`resourceId`	`uuid`	—	ID 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"
}

guidelines là null 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ại	Mặc định	Mô tả
`resourceId`	`uuid`	—	ID tệp
`designGuidelines`	`string` (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ại	Mặc định	Mô tả
`resourceId`	`uuid`	—	ID 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.

​Công cụ tệp

​list-files

​get-file

​create-file

​update-file

​delete-file

​Công cụ màn hình

​list-screens

​get-screen

​add-screen

​get-screen-image

​Công cụ AI

​create-new-design

​regenerate-design

​expand-design

​edit-design

​upload-attachment

​Công cụ trò chuyện

​get-chat-history

​Công cụ thiết kế

​get-design-guidelines

​update-design-guidelines

​delete-design-guidelines

​Công cụ thanh toán

​get-plan-details

Công cụ tệp

`list-files`

`get-file`

`create-file`

`update-file`

`delete-file`

Công cụ màn hình

`list-screens`

`get-screen`

`add-screen`

`get-screen-image`

Công cụ AI

`create-new-design`

`regenerate-design`

`expand-design`

`edit-design`

`upload-attachment`

Công cụ trò chuyện

`get-chat-history`

Công cụ thiết kế

`get-design-guidelines`

`update-design-guidelines`

`delete-design-guidelines`

Công cụ thanh toán

`get-plan-details`