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

# Flowstep MCP 서버

> Cursor, Claude Code 또는 MCP 호환 클라이언트에서 Flowstep을 MCP 서버로 사용하여 UI 디자인을 직접 생성, 검사 및 관리합니다.

Flowstep은 [Model Context Protocol](https://modelcontextprotocol.io/)을 통해 설계 도구를 노출하여 AI 어시스턴트가 편집기를 떠나지 않고 UI 화면을 생성하고 반복할 수 있습니다.

서버는 `https://api.flowstep.ai/mcp`에서 호스팅됩니다(Streamable HTTP 전송). 실행할 로컬 프로세스가 없습니다.

## 수행할 수 있는 작업

서버는 7개 카테고리에 걸쳐 20개의 도구를 노출합니다:

| 카테고리      | 도구                                                                                            |
| --------- | --------------------------------------------------------------------------------------------- |
| **파일**    | `create-file`, `list-files`, `get-file`, `update-file`, `delete-file`                         |
| **화면**    | `list-screens`, `get-screen`, `get-screen-image`, `add-screen`                                |
| **AI 생성** | `create-new-design`, `regenerate-design`, `expand-design`, `edit-design`, `upload-attachment` |
| **채팅**    | `get-chat-history`                                                                            |
| **설계**    | `get-design-guidelines`, `update-design-guidelines`, `delete-design-guidelines`               |
| **Figma** | `import-figma`                                                                                |
| **청구**    | `get-plan-details`                                                                            |

## 일반적인 사용 사례

**프롬프트에서 화면 생성** — 설명과 함께 `create-new-design`을 호출합니다. Flowstep은 파일과 화면을 한 번에 만듭니다. 반환된 `screenIds`로 `get-screen-image`를 호출하여 결과를 인라인으로 봅니다.

**React 컴포넌트 시각화** — `upload-attachment`를 통해 `.jsx` 또는 `.tsx` 파일을 업로드합니다(`mimeType: text/javascript` 사용). 반환된 첨부 파일을 컴포넌트를 설명하는 메시지와 함께 `create-new-design`에 전달합니다. Flowstep은 소스를 읽고 일치하는 설계 화면을 생성합니다.

**설계에서 반복** — 대상 `screenId`와 수정 지침으로 `edit-design`을 호출하거나, `regenerate-design`으로 화면을 처음부터 다시 만듭니다.

**디자인 가이드라인 유지** — `get-design-guidelines`을 호출하여 현재 스타일 규칙(색상, 타이포그래피, 간격, 톤)을 검색한 후 `update-design-guidelines`을 사용하여 설계가 진화할 때 동기화 상태를 유지합니다. 일관된 가이드라인을 `create-new-design` 또는 `edit-design`에 전달하면 생성된 모든 화면이 브랜드에 맞게 유지됩니다. `delete-design-guidelines`을 사용하여 완전히 초기화합니다.

**Figma에서 가져오기** — `import-figma`를 호출하여 Figma 프레임 링크 및 `fileId`로 프레임을 Flowstep 파일로 편집 가능한 요소로 가져옵니다. 파일의 조직에서 먼저 Figma를 연결해야 합니다.

**할당량 감시** — 생성 배치를 시작하기 전에 `get-plan-details`를 호출하여 남은 일일 및 월간 사용량을 확인합니다.

## 엔드포인트

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

전송: Streamable HTTP. 세션 모델: 상태 비저장(각 요청은 독립적이며 세션 ID 없음).

## 다음 단계

<CardGroup cols={2}>
  <Card title="빠른 시작" icon="bolt" href="/ko/mcp/quickstart">
    Cursor로 5분 이내에 첫 도구 호출을 수행합니다.
  </Card>

  <Card title="인증" icon="lock" href="/ko/mcp/authentication">
    OAuth 2.1 PKCE 작동 방식 및 토큰 발급 방법입니다.
  </Card>

  <Card title="도구" icon="wrench" href="/ko/mcp/tools">
    모든 20개 도구에 대한 전체 입력/출력 참조입니다.
  </Card>

  <Card title="예제" icon="code" href="/ko/mcp/examples">
    일반적인 작업에 대한 엔드-투-엔드 워크플로입니다.
  </Card>
</CardGroup>