Hướng dẫn nhanh MCP

Điều kiện tiên quyết

Một tài khoản Flowstep (app.flowstep.ai)

Cursor
Claude Code

Yêu cầu Cursor v0.43+

Bước 1 — Thêm máy chủ

Tạo hoặc chỉnh sửa ~/.cursor/mcp.json (toàn cục) hoặc .cursor/mcp.json ở thư mục gốc dự án của bạn:

{
  "mcpServers": {
    "flowstep": {
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Khởi động lại Cursor sau khi lưu.

Bước 2 — Xác thực

Mở bảng Cursor MCP (Settings → MCP) và bấm Connect bên cạnh Flowstep. Cursor mở trình duyệt của bạn đến đăng nhập OAuth của Flowstep. Đăng nhập bằng thông tin xác thực Flowstep của bạn (email/mật khẩu hoặc Google). Trình duyệt chuyển hướng trở lại và Cursor lưu trữ token tự động.

Bạn cần một tài khoản Flowstep trước khi xác thực. Nếu bạn chưa có, hãy đăng ký tại app.flowstep.ai trước.

Bước 3 — Chạy một lệnh công cụ

Trong một cuộc trò chuyện Cursor, hỏi:

“List my Flowstep files”

Cursor gọi list-files và trả về danh sách tệp của bạn. Nếu phản hồi trống, hãy tạo một tệp trước:

“Create a new Flowstep file called ‘Dashboard‘“

Bước 4 — Tạo một màn hình

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

Cursor gọi create-new-design (cái tạo tệp và tạo các màn hình trong một bước), sau đó get-screen-image. Bạn sẽ thấy thiết kế được hiển thị trực tuyến trong cuộc trò chuyện.

Yêu cầu Claude Code CLI

Bước 1 — Thêm máy chủ

Tạo .mcp.json ở thư mục gốc dự án của bạn (phạm vi dự án) hoặc ~/.claude/mcp.json (toàn cục):

{
  "mcpServers": {
    "flowstep": {
      "type": "http",
      "url": "https://api.flowstep.ai/mcp"
    }
  }
}

Trường "type": "http" là bắt buộc đối với các máy chủ HTTP của Claude Code. Cursor không cần nó.

Bước 2 — Xác thực

Chạy bất kỳ công cụ Flowstep nào từ một cuộc trò chuyện Claude Code. Khi sử dụng lần đầu tiên, Claude Code mở trình duyệt của bạn đến đăng nhập OAuth của Flowstep. Đăng nhập bằng thông tin xác thực Flowstep của bạn (email/mật khẩu hoặc Google). Trình duyệt chuyển hướng trở lại và token được lưu trữ tự động.

Bạn cần một tài khoản Flowstep trước khi xác thực. Nếu bạn chưa có, hãy đăng ký tại app.flowstep.ai trước.

Bước 3 — Chạy một lệnh công cụ

Trong một cuộc trò chuyện Claude Code, hỏi:

“List my Flowstep files”

Claude Code gọi list-files và trả về danh sách tệp của bạn. Nếu phản hồi trống, hãy tạo một tệp trước:

“Create a new Flowstep file called ‘Dashboard‘“

Bước 4 — Tạo một màn hình

Create a new Flowstep file called "Login flow", then generate a mobile login screen
for a SaaS app with email/password fields and a Google sign-in button.
After it finishes, show me the image.

Claude Code gọi create-new-design (cái tạo tệp và tạo các màn hình trong một bước), sau đó get-screen-image. Bạn sẽ thấy thiết kế được hiển thị trực tuyến trong cuộc trò chuyện.

Bước tiếp theo

Tài liệu tham khảo công cụ — tài liệu đầu vào/đầu ra đầy đủ cho tất cả 20 công cụ
Ví dụ — quy trình làm việc đa bước
Các ứng dụng khách khác — Windsurf, Claude Desktop, claude.ai

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ư

Hướng dẫn nhanh MCP

Điều kiện tiên quyết

Bước 1 — Thêm máy chủ

Bước 2 — Xác thực

Bước 3 — Chạy một lệnh công cụ

Bước 4 — Tạo một màn hình

Bước 1 — Thêm máy chủ

Bước 2 — Xác thực

Bước 3 — Chạy một lệnh công cụ

Bước 4 — Tạo một màn hình

Bước tiếp theo

​Điều kiện tiên quyết

​Bước 1 — Thêm máy chủ

​Bước 2 — Xác thực

​Bước 3 — Chạy một lệnh công cụ

​Bước 4 — Tạo một màn hình

​Bước 1 — Thêm máy chủ

​Bước 2 — Xác thực

​Bước 3 — Chạy một lệnh công cụ

​Bước 4 — Tạo một màn hình

​Bước tiếp theo

Điều kiện tiên quyết

Bước 1 — Thêm máy chủ

Bước 2 — Xác thực

Bước 3 — Chạy một lệnh công cụ

Bước 4 — Tạo một màn hình

Bước 1 — Thêm máy chủ

Bước 2 — Xác thực

Bước 3 — Chạy một lệnh công cụ

Bước 4 — Tạo một màn hình

Bước tiếp theo