> ## 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.

# Ví dụ MCP

> Quy trình làm việc từ đầu đến cuối cho các tác vụ MCP Flowstep phổ biến.

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

Quy trình làm việc phổ biến nhất: tạo một màn hình (tạo tệp trong cùng một bước), sau đó xem kết quả.

```
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

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

Bỏ qua `fileId` sẽ tạo một tệp mới tự động. Chuyển `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:**

> Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

***

## 2. Hình dung một thành phần React

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

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

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

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

**Prompt cho trợ lý AI của bạn:**

> Read `src/components/settings/ApiKeys.tsx`, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

***

## 3. Lặp lại trên một màn hình được tạo bằng MCP

`edit-design` và `regenerate-design` yêu cầu ngữ cảnh thiết kế chỉ có trên các màn hình được tạo với mảng `designs`. Đối với các màn hình được tạo mà không có, giải pháp khác là kết xuất màn hình như một tệp đính kèm và gọi `create-new-design` với hình ảnh.

```
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

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

Đối với các màn hình có ngữ cảnh thiết kế, gọi `edit-design` trực tiếp với thay đổi trong `message` và màn hình trong `targets`.

***

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

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

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

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "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 ranh giới.

<Note>
  `operationVariant` là tham số bắt buộc cho `expand-design`. Màn hình cơ sở cũng phải được tạo với mảng `designs` (ngữ cảnh thiết kế) — đối với các màn hình không có, hãy sử dụng giải pháp khác từ Ví dụ 3.
</Note>

***

## 5. Kiểm toán hạn ngạch trước một công việc hàng loạt

Kiểm tra dung lượng còn lại trước khi khởi động nhiều phần tạo.

```
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
```

Nếu `daily` thấp, hãy lên lịch công việc hàng loạt sau 00:00 UTC khi nó được đặt lại.