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

# Máy chủ Flowstep MCP

> Sử dụng Flowstep như một máy chủ MCP để tạo, kiểm tra và quản lý thiết kế UI trực tiếp từ Cursor, Claude Code hoặc bất kỳ ứng dụng khách nào tương thích với MCP.

Flowstep công khai các công cụ thiết kế của nó thông qua [Model Context Protocol](https://modelcontextprotocol.io/), cho phép trợ lý AI của bạn tạo và lặp lại các màn hình UI mà không cần rời khỏi trình soạn thảo của mình.

Máy chủ được lưu trữ tại `https://api.flowstep.ai/mcp` (vận chuyển HTTP Streamable). Không cần chạy quy trình cục bộ.

## Bạn có thể làm gì

Máy chủ công khai 20 công cụ trên bảy danh mục:

| Danh mục       | Công cụ                                                                                       |
| -------------- | --------------------------------------------------------------------------------------------- |
| **Tệp**        | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **Màn hình**   | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **Tạo AI**     | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **Trò chuyện** | `get-chat-history`                                                                            |
| **Thiết kế**   | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma**      | `import-figma`                                                                                |
| **Thanh toán** | `get-plan-details`                                                                            |

## Các trường hợp sử dụng phổ biến

**Tạo các màn hình từ một prompt** — gọi `create-new-design` với một mô tả. Flowstep tạo tệp và các màn hình trong một bước. Gọi `get-screen-image` với `screenIds` được trả về để xem kết quả trực tuyến.

**Trực quan hóa một thành phần React** — tải lên tệp `.jsx` hoặc `.tsx` của bạn qua `upload-attachment` (sử dụng `mimeType: text/javascript`), sau đó chuyển phần đính kèm được trả về vào `create-new-design` với một tin nhắn mô tả thành phần. Flowstep đọc mã nguồn và tạo một màn hình thiết kế phù hợp.

**Lặp lại một thiết kế** — gọi `edit-design` với `screenId` mục tiêu và hướng dẫn để sửa đổi nó, hoặc `regenerate-design` để tạo lại một màn hình từ đầu.

**Duy trì các nguyên tắc thiết kế** — gọi `get-design-guidelines` để lấy các quy tắc kiểu hiện tại của bạn (màu sắc, kiểu chữ, khoảng cách, giọng điệu), sau đó sử dụng `update-design-guidelines` để giữ chúng đồng bộ khi thiết kế của bạn phát triển. Chuyển các hướng dẫn nhất quán vào `create-new-design` hoặc `edit-design` đảm bảo mỗi màn hình được tạo ra đều tuân theo thương hiệu. Sử dụng `delete-design-guidelines` để đặt lại chúng hoàn toàn.

**Nhập từ Figma** — gọi `import-figma` với liên kết khung Figma và `fileId` để đưa khung vào tệp Flowstep dưới dạng các phần tử có thể chỉnh sửa. Tổ chức của tệp phải có Figma được kết nối trước.

**Kiểm tra hạn ngạch** — gọi `get-plan-details` để xem mức sử dụng còn lại hàng ngày và hàng tháng trước khi bắt đầu một loạt các bước tạo.

## Điểm cuối

```
https://api.flowstep.ai/mcp
```

Vận chuyển: HTTP Streamable. Mô hình phiên: không trạng thái (mỗi yêu cầu độc lập, không có ID phiên).

## Bước tiếp theo

<CardGroup cols={2}>
  <Card title="Hướng dẫn nhanh" icon="bolt" href="/vi/mcp/quickstart">
    Lệnh công cụ đầu tiên trong vòng 5 phút với Cursor.
  </Card>

  <Card title="Xác thực" icon="lock" href="/vi/mcp/authentication">
    Cách OAuth 2.1 PKCE hoạt động và cách các token được phát hành.
  </Card>

  <Card title="Công cụ" icon="wrench" href="/vi/mcp/tools">
    Tài liệu tham khảo đầu vào/đầu ra đầy đủ cho tất cả 20 công cụ.
  </Card>

  <Card title="Ví dụ" icon="code" href="/vi/mcp/examples">
    Quy trình làm việc từ đầu đến cuối cho các tác vụ phổ biến.
  </Card>
</CardGroup>