> ## 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 MCP의 일반적인 작업을 위한 종단 간 워크플로우입니다.

## 1. 화면 생성 및 미리보기

가장 일반적인 워크플로우는 화면을 생성하고(같은 단계에서 파일을 생성) 결과를 확인하는 것입니다.

```
1. create-new-design { "message": "Mobile sign-in screen for a developer tool.
                                  Email/password fields, Google SSO button, dark theme." }
                     → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

2. get-screen-image  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                     → [inline PNG]
```

`fileId`를 생략하면 새 파일이 자동으로 생성됩니다. 기존 `fileId`를 전달하면 대신 해당 파일에 화면을 추가할 수 있습니다.

**AI 어시스턴트에 전달할 프롬프트:**

> Generate a Flowstep design: a mobile sign-in screen for a developer tool with email/password and a Google SSO button in dark theme, then show me the image.

***

## 2. React 컴포넌트 시각화

`.jsx` 또는 `.tsx` 파일을 첨부파일로 업로드하고 Flowstep에 일치하는 디자인을 생성하도록 요청합니다. Flowstep은 소스를 읽고 화면을 생성합니다. 앱을 실행할 필요가 없습니다.

```
1. upload-attachment  { "fileData": "<UTF-8 contents of ApiKeys.tsx>",
                        "fileName": "ApiKeys.tsx",
                        "mimeType": "text/javascript" }
                      → { "id": "ATT_ID", "path": "...", "type": "document",
                          "mimeType": "text/javascript" }

2. create-new-design  { "message": "Generate a desktop screen that matches this React component.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "document" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → [inline PNG]
```

**AI 어시스턴트에 전달할 프롬프트:**

> Read `src/components/settings/ApiKeys.tsx`, upload it as an attachment, and generate a Flowstep screen that matches the component layout. Show me the rendered image.

***

## 3. MCP로 생성한 화면 반복 작업

`edit-design`과 `regenerate-design`은 `designs` 배열로 생성한 화면에만 있는 디자인 컨텍스트가 필요합니다. 디자인 컨텍스트가 없는 화면의 경우 해결책은 화면을 첨부파일로 렌더링하고 이미지로 `create-new-design`을 호출하는 것입니다.

```
1. upload-attachment  { "fileId": "FILE_ID", "screenId": "SCREEN_ID" }
                      → { "id": "ATT_ID", "path": "...", "type": "image", "mimeType": "image/jpeg" }

2. create-new-design  { "fileId": "FILE_ID",
                        "message": "Change the color scheme to dark mode and
                                    add a 'Remember me' checkbox below the password field.",
                        "attachments": [{ "id": "ATT_ID", "path": "...", "type": "image" }] }
                      → { "fileId": "FILE_ID", "screenIds": ["NEW_SCREEN_ID"] }

3. get-screen-image   { "fileId": "FILE_ID", "screenId": "NEW_SCREEN_ID" }
                      → [inline PNG]
```

디자인 컨텍스트가 있는 화면의 경우 `message`에서 변경 사항과 `targets`의 화면으로 `edit-design`을 직접 호출할 수 있습니다.

***

## 4. 화면을 전체 흐름으로 확장

기존 디자인에 후속 화면을 추가합니다.

```
1. list-screens   { "fileId": "FILE_ID" }
                  → [{ "screenId": "BASE_SCREEN_ID", "prompt": "Sign-in screen", ... }]

2. expand-design  { "fileId": "FILE_ID",
                    "message": "Add the next screen in the user flow",
                    "operationVariant": "next_screen",
                    "targets": ["BASE_SCREEN_ID"] }
                  → { "fileId": "FILE_ID", "screenIds": ["NEXT_SCREEN_ID"] }

3. get-screen-image { "fileId": "FILE_ID", "screenId": "NEXT_SCREEN_ID" }
                    → [inline PNG]
```

2단계를 `operationVariant: "error_state"` 또는 `"empty_state"`로 반복하여 엣지 케이스 화면을 추가합니다.

<Note>
  `operationVariant`은 `expand-design`의 필수 매개변수입니다. 기본 화면도 `designs` 배열(디자인 컨텍스트)로 생성되어야 합니다. 디자인 컨텍스트가 없는 화면의 경우 예제 3의 첨부파일 해결책을 사용합니다.
</Note>

***

## 5. 배치 작업 전 할당량 감사

여러 생성을 시작하기 전에 남은 용량을 확인합니다.

```
get-plan-details {}
→ {
    "remaining": {
      "messages": { "daily": 38, "monthly": 413 }
    }
  }
```

`daily`가 낮으면 리셋되는 00:00 UTC 이후에 배치를 예약합니다.