Ví dụ MCP

1. Tạo và xem trước một màn hình

Quy trình phổ biến nhất: tạo một màn hình (đồng thời tạo tệp ở cùng bước), rồi xem kết quả.

1. list-files         {}
                      → { "files": [ ... ] }          // check for an existing file first

2. ai-design-screens  { "message": "Mobile sign-in screen for a developer tool.
                                    Email/password fields, Google SSO button, dark theme." }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"],
                          "designGuidelinesUpdated": null }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Bỏ qua fileId sẽ tự động tạo một tệp mới. Truyền một fileId hiện có để thêm màn hình vào tệp đó thay thế. Prompt cho trợ lý AI của bạn:

Tạo một thiết kế Flowstep: màn hình đăng nhập di động cho một công cụ dành cho lập trình viên, với trường email/password và nút Google SSO theme tối, rồi cho tôi xem hình ảnh.

2. Trực quan hóa một thành phần React

Tải lên một tệp .jsx hoặc .tsx làm tệp đính kèm, rồi yêu cầu Flowstep tạo một thiết kế tương ứng. Flowstep đọc mã nguồn và tạo ra một màn hình, không cần chạy ứng dụng.

1. upload-attachment  { "text": "<UTF-8 contents of ApiKeys.tsx>",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "assetUrl": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. ai-design-screens  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]

Với các tệp mã nguồn dài hơn 64.000 ký tự, hãy dùng upload-attachment với mimeType và fileName thay thế, rồi chạy uploadCommand được trả về. Xem upload-attachment. Prompt cho trợ lý AI của bạn:

Đọc src/components/settings/ApiKeys.tsx, tải nó lên làm tệp đính kèm, và tạo một màn hình Flowstep khớp với bố cục của thành phần. Cho tôi xem hình ảnh đã kết xuất.

3. Lặp lại trên một màn hình

Thay đổi một màn hình hiện có tại chỗ bằng hướng dẫn tự do, và trong cùng một lệnh gọi, thêm một màn hình mới phù hợp với nó.

1. list-screens       { "fileId": "FILE_ID" }
                      → { "screens": [{ "screenId": "SCREEN_ID", "name": "Sign-in", ... }] }

2. ai-design-screens  { "fileId": "FILE_ID",
                        "message": "Edit this sign-in screen: switch it to dark mode and add a
                                    'Remember me' checkbox below the password field. Then add a
                                    matching forgot-password screen.",
                        "elementIds": ["SCREEN_ID"] }
                      → { "status": "generated", "fileId": "FILE_ID",
                          "screenIds": ["SCREEN_ID", "NEW_SCREEN_ID"], ... }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
   get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]

screenIds liệt kê mọi màn hình mà lệnh gọi đã xây dựng hoặc thay đổi, vì vậy hãy gọi get-screen-image một lần cho mỗi màn hình. Bỏ câu cuối cùng trong tin nhắn nếu bạn chỉ muốn chỉnh sửa màn hình hiện có. Để chỉ thay đổi một phần của màn hình, hãy gọi get-screen-jsx với "includeIds": true trước, rồi truyền data-id của phần tử bạn muốn thay đổi vào elementIds. Để áp dụng một preset chỉ với một cú nhấp cho toàn bộ màn hình, hãy gọi ai-edit-screen-variant thay thế, chẳng hạn với "operationVariant": "light_theme" hoặc "different_layout". Prompt cho trợ lý AI của bạn:

Trong tệp Flowstep “Login flow” của tôi, hãy chuyển màn hình đăng nhập sang theme tối, thêm một ô đánh dấu “Remember me” bên dưới trường mật khẩu, và thêm một màn hình quên mật khẩu tương ứng. Cho tôi xem kết quả.

4. Mở rộng một màn hình thành luồng đầy đủ

Thêm các màn hình tiếp theo vào một thiết kế hiện có.

1. list-screens                { "fileId": "FILE_ID" }
                               → { "screens": [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }] }

2. ai-generate-screen-variant  { "fileId": "FILE_ID",
                                 "screenId": "BASE_SCREEN_ID",
                                 "operationVariant": "next_screen" }
                               → { "status": "generated", "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"], ... }

3. get-screen-image            { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                               → [inline PNG]

Lặp lại bước 2 với operationVariant: "error_state" hoặc "empty_state" để thêm các màn hình trường hợp biên, hoặc "web_version" / "tablet_version" cho các nền tảng khác.

operationVariant là bắt buộc đối với ai-generate-screen-variant, và công cụ này chỉ nhận đúng một screenId. Để thêm một màn hình không phải là biến thể của màn hình hiện có, hãy dùng ai-design-screens với fileId.

5. Chuyển một màn hình sang mã nguồn, rồi ghi thay đổi trở lại

Đọc một màn hình dưới dạng JSX, xây dựng từ đó, rồi đẩy JSX đã chỉnh sửa trở lại canvas, mà không tốn tin nhắn nào.

1. get-screen-jsx      { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → { "name": "Settings", "fidelity": "ui", "screenType": "web",
                           "colorTheme": "default", "jsx": "<div ...>...</div>", "fragments": [] }

2. replace-screen-jsx  { "fileId": "FILE_ID", "screenId": "SCREEN_ID",
                         "jsx": "<div ...>...edited...</div>" }
                       → { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }

3. get-screen-image    { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                       → [inline PNG]

Các trường bị bỏ qua (name, fidelity, screenType, colorTheme, fragments) giữ nguyên giá trị hiện tại. Để giữ bản gốc và thêm phiên bản của bạn bên cạnh, hãy gọi add-screen-jsx với screenType và jsx thay vì replace-screen-jsx. Để hiển thị hình ảnh của riêng bạn trong màn hình, hãy tải nó lên bằng upload-attachment và đặt assetUrl được trả về vào img src trong JSX của bạn. Xem Hình ảnh trong JSX.

6. Kiểm tra hạn mức trước khi chạy tác vụ hàng loạt

Kiểm tra dung lượng còn lại trước khi bắt đầu nhiều lần tạo. get-plan-details có thể gọi miễn phí.

get-plan-details {}
→ { "plan": { ... }, "subscription": { ... }, "limits": { ... }, "usage": { ... },
    "remaining": { "messages": { "daily": ..., "monthly": ... } } }

Nếu remaining.messages.daily còn thấp, hãy lên lịch tác vụ hàng loạt sau 00:00 UTC, khi hạn mức được đặt lại.

Bắt đầu

Sử dụng Flowstep

Nhóm & Tổ chức

Xuất & Tích hợp

Máy chủ MCP

Thanh toán & Gói dịch vụ

Bảo mật & Quyền riêng tư

1. Tạo và xem trước một màn hình

2. Trực quan hóa một thành phần React

3. Lặp lại trên một màn hình

4. Mở rộng một màn hình thành luồng đầy đủ

5. Chuyển một màn hình sang mã nguồn, rồi ghi thay đổi trở lại

6. Kiểm tra hạn mức trước khi chạy tác vụ hàng loạt

​1. Tạo và xem trước một màn hình

​2. Trực quan hóa một thành phần React

​3. Lặp lại trên một màn hình

​4. Mở rộng một màn hình thành luồng đầy đủ

​5. Chuyển một màn hình sang mã nguồn, rồi ghi thay đổi trở lại

​6. Kiểm tra hạn mức trước khi chạy tác vụ hàng loạt

1. Tạo và xem trước một màn hình

2. Trực quan hóa một thành phần React

3. Lặp lại trên một màn hình

4. Mở rộng một màn hình thành luồng đầy đủ

5. Chuyển một màn hình sang mã nguồn, rồi ghi thay đổi trở lại

6. Kiểm tra hạn mức trước khi chạy tác vụ hàng loạt