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

# Hướng dẫn nhanh MCP

> Kết nối Flowstep với trình soạn thảo AI của bạn và chạy lệnh công cụ đầu tiên.

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

* Một tài khoản Flowstep ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **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:

    ```json theme={"system"}
    {
      "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.

    <Note>
      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](https://app.flowstep.ai) trước.
    </Note>

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

  <Tab title="Claude Code">
    **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):

    ```json theme={"system"}
    {
      "mcpServers": {
        "flowstep": {
          "type": "http",
          "url": "https://api.flowstep.ai/mcp"
        }
      }
    }
    ```

    <Note>
      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ó.
    </Note>

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

    <Note>
      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](https://app.flowstep.ai) trước.
    </Note>

    ## 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.
  </Tab>
</Tabs>

## Bước tiếp theo

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