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

# MCP 빠른 시작

> Flowstep을 AI 에디터에 연결하고 첫 번째 도구 호출을 실행합니다.

## 필수 요구사항

* Flowstep 계정 ([app.flowstep.ai](https://app.flowstep.ai))

<Tabs>
  <Tab title="Cursor">
    **Cursor v0.43 이상 필요**

    ## 1단계 — 서버 추가

    `~/.cursor/mcp.json` (전역) 또는 프로젝트 루트의 `.cursor/mcp.json`을 만들거나 편집합니다:

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

    저장 후 Cursor를 재시작합니다.

    ## 2단계 — 인증

    Cursor MCP 패널(Settings → MCP)을 열고 Flowstep 옆의 **Connect**를 클릭합니다. Cursor가 브라우저를 열어 Flowstep OAuth 로그인 페이지로 이동합니다. Flowstep 자격증명(이메일/비밀번호 또는 Google)으로 로그인합니다. 브라우저가 리디렉션되고 Cursor가 토큰을 자동으로 저장합니다.

    <Note>
      인증하기 전에 Flowstep 계정이 필요합니다. 계정이 없으면 먼저 [app.flowstep.ai](https://app.flowstep.ai)에서 가입하세요.
    </Note>

    ## 3단계 — 도구 호출 실행

    Cursor 채팅에서 다음과 같이 물어봅니다:

    > "List my Flowstep files"

    Cursor가 `list-files`를 호출하고 파일 목록을 반환합니다. 응답이 비어 있으면 먼저 파일을 만듭니다:

    > "Create a new Flowstep file called 'Dashboard'"

    ## 4단계 — 화면 생성

    ```
    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가 `create-new-design` (파일을 만들고 한 번에 화면을 생성함)을 호출한 다음 `get-screen-image`를 호출합니다. 채팅에서 렌더링된 디자인을 인라인으로 볼 수 있습니다.
  </Tab>

  <Tab title="Claude Code">
    **Claude Code CLI 필요**

    ## 1단계 — 서버 추가

    프로젝트 루트에 `.mcp.json` (프로젝트 범위) 또는 `~/.claude/mcp.json` (전역)을 만듭니다:

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

    <Note>
      Claude Code HTTP 서버의 경우 `"type": "http"` 필드가 필요합니다. Cursor는 필요하지 않습니다.
    </Note>

    ## 2단계 — 인증

    Claude Code 채팅에서 모든 Flowstep 도구를 실행합니다. 처음 사용할 때 Claude Code가 브라우저를 열어 Flowstep OAuth 로그인 페이지로 이동합니다. Flowstep 자격증명(이메일/비밀번호 또는 Google)으로 로그인합니다. 브라우저가 리디렉션되고 토큰이 자동으로 저장됩니다.

    <Note>
      인증하기 전에 Flowstep 계정이 필요합니다. 계정이 없으면 먼저 [app.flowstep.ai](https://app.flowstep.ai)에서 가입하세요.
    </Note>

    ## 3단계 — 도구 호출 실행

    Claude Code 채팅에서 다음과 같이 물어봅니다:

    > "List my Flowstep files"

    Claude Code가 `list-files`를 호출하고 파일 목록을 반환합니다. 응답이 비어 있으면 먼저 파일을 만듭니다:

    > "Create a new Flowstep file called 'Dashboard'"

    ## 4단계 — 화면 생성

    ```
    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가 `create-new-design` (파일을 만들고 한 번에 화면을 생성함)을 호출한 다음 `get-screen-image`를 호출합니다. 채팅에서 렌더링된 디자인을 인라인으로 볼 수 있습니다.
  </Tab>
</Tabs>

## 다음 단계

* [도구 레퍼런스](/ko/mcp/tools) — 모든 20개 도구의 전체 입력/출력 문서
* [예제](/ko/mcp/examples) — 다단계 워크플로우
* [다른 클라이언트](/ko/mcp/clients/claude-code) — Windsurf, Claude Desktop, claude.ai