Chuyển đến nội dung chính
Flowstep là canvas thiết kế cho phần mềm do tác nhân xây dựng. Máy chủ Flowstep MCP đưa canvas đó ra ngoài qua Model Context Protocol, để các tác nhân mà nhóm bạn đã sử dụng có thể thiết kế màn hình, xem kết quả đã kết xuất và xây dựng từ đó, mà không cần rời khỏi trình soạn thảo hay terminal. Các màn hình do tác nhân tạo qua MCP sẽ nằm trong cùng các tệp Flowstep mà nhóm bạn làm việc. Chúng vẫn có thể chỉnh sửa trên canvas, chia sẻ được, và sẵn sàng để xuất hoặc sao chép sang Figma. Máy chủ được lưu trữ tại https://api.flowstep.ai/mcp (giao thức truyền tải Streamable HTTP). Bạn không cần chạy tiến trình cục bộ hay quản lý API key. Các máy khách đăng nhập bằng tài khoản Flowstep của bạn thông qua OAuth.

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

Máy chủ cung cấp 22 công cụ, chia thành tám nhóm: Ba công cụ Thiết kế AI sử dụng cùng hạn mức tin nhắn với ứng dụng Flowstep. Tất cả các công cụ khác đều miễn phí. Xem Giới hạn sử dụng.

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

Tạo màn hình từ prompt: gọi ai-design-screens với một mô tả. Bỏ qua fileId và Flowstep sẽ tạo tệp cùng các màn hình trong một bước. Gọi get-screen-image cho từng screenId được trả về để xem kết quả ngay trong cuộc trò chuyện. Trực quan hóa một thành phần React: tải tệp nguồn .jsx hoặc .tsx của bạn lên bằng upload-attachment (mimeType: text/javascript), rồi truyền tệp đính kèm được trả về vào ai-design-screens cùng một tin nhắn mô tả màn hình. Flowstep đọc mã nguồn và tạo ra một thiết kế tương ứng. Lặp lại trên một thiết kế: gọi ai-design-screens với một hoặc nhiều screenId (hoặc id phần tử riêng lẻ) trong elementIds và hướng dẫn tự do để thay đổi chúng tại chỗ. Cùng một lệnh gọi cũng có thể thêm màn hình mới, nên một yêu cầu có thể vừa chỉnh sửa một màn hình vừa tạo màn hình tiếp theo. Dùng ai-edit-screen-variant để áp dụng một preset, chẳng hạn theme tối hoặc bố cục khác, cho toàn bộ một màn hình. Mở rộng một luồng: gọi ai-generate-screen-variant để thêm màn hình tiếp theo, trạng thái lỗi hoặc trạng thái rỗng, hoặc phiên bản web, máy tính bảng hay di động của một màn hình hiện có. Làm việc theo hướng mã nguồn trước: đọc bất kỳ màn hình nào dưới dạng JSX bằng get-screen-jsx, rồi ghi JSX của bạn trở lại bằng add-screen-jsx (màn hình mới) hoặc replace-screen-jsx (ghi đè một màn hình hiện có). Để dùng hình ảnh của riêng bạn, hãy tải chúng lên bằng upload-attachment và đặt assetUrl được trả về vào JSX của bạn. Các công cụ này miễn phí. Giữ đầu ra đúng thương hiệu: dùng update-design-guidelines để lưu màu sắc, kiểu chữ và quy tắc thành phần của bạn trên một tệp dưới dạng văn bản DESIGN.md. Các lần tạo bằng AI với tệp đó sẽ tuân theo. Đọc lại bằng get-design-guidelines, hoặc xóa bằng delete-design-guidelines. Nhập từ Figma: gọi import-figma với liên kết khung Figma và một fileId để đưa khung vào canvas dưới dạng các phần tử có thể chỉnh sửa. Trước đó, tổ chức sở hữu tệp phải đã kết nối Figma. Kiểm tra hạn mức: gọi get-plan-details để xem gói, mức sử dụng và số tin nhắn còn lại trước khi chạy một loạt lần tạo.

Endpoint

Giao thức truyền tải: Streamable HTTP. Mô hình phiên: không trạng thái (mỗi yêu cầu độc lập, không có session ID). Máy chủ hỗ trợ phiên bản giao thức MCP 2026-07-28, được quảng bá tại https://api.flowstep.ai/.well-known/mcp.json. Các máy khách dùng giao thức 2025-11-25 trước đó vẫn kết nối đến cùng endpoint.

Bước tiếp theo

Bắt đầu nhanh

Kết nối một máy khách và chạy lệnh gọi công cụ đầu tiên của bạn.

Xác thực

Cách đăng nhập OAuth 2.1 PKCE và phê duyệt hoạt động.

Công cụ

Tài liệu đầy đủ về đầu vào và đầu ra của cả 22 công cụ.

Ví dụ

Quy trình đầu cuối cho các tác vụ phổ biến.