MCP 빠른 시작

사전 요구 사항

Flowstep 계정(app.flowstep.ai)

claude.ai나 Claude Desktop에서 Claude를 사용하고 계신가요? Flowstep은 Claude 디렉터리에 등록된 커넥터입니다. claude.ai/directory/flowstep에서 한 번의 클릭으로 추가하세요. claude.ai를 참고하세요.

Cursor
Claude Code

Cursor v0.43+ 필요

1단계 — 서버 추가

Add Flowstep to Cursor를 클릭해 한 번에 설치하거나, ~/.cursor/mcp.json(전역) 또는 프로젝트 루트의 .cursor/mcp.json을 만들거나 편집하세요.

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

저장한 뒤 Cursor를 다시 시작하세요.

2단계 — 인증

Cursor MCP 패널(Settings → MCP)을 열고 Flowstep 옆의 Connect를 클릭하세요. Cursor가 브라우저에서 Flowstep 로그인 페이지를 엽니다. Flowstep 자격 증명(이메일/비밀번호 또는 Google)으로 로그인한 다음, 동의 화면에서 Allow를 클릭하세요. 브라우저가 Cursor로 돌아가고, Cursor가 토큰을 자동으로 저장합니다.

인증하기 전에 Flowstep 계정이 필요합니다. 계정이 없다면 먼저 app.flowstep.ai에서 가입하세요.

3단계 — 도구 호출 실행

Cursor 채팅에서 다음과 같이 요청하세요.

“내 Flowstep 파일 목록 보여줘”

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

“‘Dashboard’라는 새 Flowstep 파일 만들어 줘”

4단계 — 화면 생성

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Cursor가 ai-design-screens를 호출합니다(새 파일을 만들고 한 단계에서 화면을 생성). 그다음 get-screen-image를 호출합니다. 채팅에 렌더링된 디자인이 인라인으로 표시됩니다.

Claude Code CLI 필요

1단계 — 서버 추가

프로젝트에서 다음을 실행하세요.

claude mcp add --transport http flowstep https://api.flowstep.ai/mcp

팀과 서버를 공유하려면 프로젝트 루트의 .mcp.json에 추가하세요.

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

"type": "http" 필드는 Claude Code HTTP 서버에 필수입니다. Cursor에는 필요하지 않습니다.

2단계 — 인증

Claude Code 채팅에서 아무 Flowstep 도구나 실행하세요. 처음 사용할 때 Claude Code가 브라우저에서 Flowstep 로그인 페이지를 엽니다. Flowstep 자격 증명(이메일/비밀번호 또는 Google)으로 로그인한 다음, 동의 화면에서 Allow를 클릭하세요. 브라우저가 돌아오고 토큰이 자동으로 저장됩니다. Claude Code에서 /mcp를 입력해 Flowstep이 연결되었는지 확인하세요.

인증하기 전에 Flowstep 계정이 필요합니다. 계정이 없다면 먼저 app.flowstep.ai에서 가입하세요.

3단계 — 도구 호출 실행

Claude Code 채팅에서 다음과 같이 요청하세요.

“내 Flowstep 파일 목록 보여줘”

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

“‘Dashboard’라는 새 Flowstep 파일 만들어 줘”

4단계 — 화면 생성

Generate a mobile login screen in Flowstep for a SaaS app with email/password
fields and a Google sign-in button. After it finishes, show me the image.

Claude Code가 ai-design-screens를 호출합니다(새 파일을 만들고 한 단계에서 화면을 생성). 그다음 get-screen-image를 호출합니다. 채팅에 렌더링된 디자인이 인라인으로 표시됩니다.

ai-design-screens와 다른 AI 디자인 도구는 Flowstep 메시지 사용량 한도를 사용합니다. 목록 조회, 읽기, 렌더링은 무료입니다. 사용 한도를 참고하세요.

다음 단계

도구 참조 — 22개 도구 전체의 입력 및 출력 문서
예제 — 여러 단계로 이루어진 워크플로
다른 클라이언트 — Windsurf, Codex, Claude Desktop, claude.ai

시작하기

Flowstep 사용하기

팀 및 조직

내보내기 및 연동

MCP 서버

결제 및 요금제

보안 및 개인정보

MCP 빠른 시작

사전 요구 사항

1단계 — 서버 추가

2단계 — 인증

3단계 — 도구 호출 실행

4단계 — 화면 생성

1단계 — 서버 추가

2단계 — 인증

3단계 — 도구 호출 실행

4단계 — 화면 생성

다음 단계

​사전 요구 사항

​1단계 — 서버 추가

​2단계 — 인증

​3단계 — 도구 호출 실행

​4단계 — 화면 생성

​1단계 — 서버 추가

​2단계 — 인증

​3단계 — 도구 호출 실행

​4단계 — 화면 생성

​다음 단계

사전 요구 사항

1단계 — 서버 추가

2단계 — 인증

3단계 — 도구 호출 실행

4단계 — 화면 생성

1단계 — 서버 추가

2단계 — 인증

3단계 — 도구 호출 실행

4단계 — 화면 생성

다음 단계