https://api.flowstep.ai/mcp에서 호스팅됩니다(Streamable HTTP 전송). 실행할 로컬 프로세스도, 관리할 API 키도 없습니다. 클라이언트는 OAuth를 통해 Flowstep 계정으로 로그인합니다.
할 수 있는 작업
서버는 여덟 개 범주에 걸쳐 22개 도구를 제공합니다.
세 가지 AI 디자인 도구는 Flowstep 앱과 같은 메시지 사용량 한도를 사용합니다. 나머지 도구는 모두 무료입니다. 사용 한도를 참고하세요.
일반적인 사용 사례
프롬프트에서 화면 생성 — 설명과 함께ai-design-screens를 호출하세요. fileId를 생략하면 Flowstep이 파일과 화면을 한 단계에서 만듭니다. 반환된 각 screenId에 대해 get-screen-image를 호출하면 결과를 인라인으로 볼 수 있습니다.
React 컴포넌트 시각화 — upload-attachment(mimeType: text/javascript)로 .jsx 또는 .tsx 소스를 업로드한 다음, 반환된 첨부 파일을 화면을 설명하는 메시지와 함께 ai-design-screens에 전달하세요. Flowstep이 소스를 읽고 맞는 디자인을 생성합니다.
디자인 반복 수정 — 하나 이상의 screenId(또는 개별 요소 ID)를 elementIds에 넣고 자유 형식 지시와 함께 ai-design-screens를 호출하면 화면을 제자리에서 변경할 수 있습니다. 같은 호출로 새 화면을 추가할 수도 있으므로, 한 번의 요청으로 화면을 편집하고 다음 화면을 만들 수 있습니다. ai-edit-screen-variant를 사용하면 다크 테마나 다른 레이아웃 같은 프리셋을 화면 전체에 적용할 수 있습니다.
흐름 확장 — ai-generate-screen-variant를 호출해 다음 화면, 오류 또는 빈 상태 화면, 기존 화면의 웹, 태블릿, 모바일 버전을 추가하세요.
코드 우선 작업 — get-screen-jsx로 화면을 JSX로 읽은 다음, add-screen-jsx(새 화면)나 replace-screen-jsx(기존 화면 덮어쓰기)로 직접 작성한 JSX를 다시 쓰세요. 자체 이미지를 사용하려면 upload-attachment로 업로드하고 반환된 assetUrl을 JSX에 넣으세요. 이 도구들은 무료입니다.
브랜드에 맞는 결과 유지 — update-design-guidelines를 사용해 색상, 타이포그래피, 컴포넌트 규칙을 파일에 DESIGN.md 텍스트로 저장하세요. 해당 파일에 대한 AI 생성 결과가 이 규칙을 따릅니다. get-design-guidelines로 다시 읽거나 delete-design-guidelines로 지울 수 있습니다.
Figma에서 가져오기 — Figma 프레임 링크와 fileId로 import-figma를 호출하면 프레임을 캔버스의 편집 가능한 요소로 가져옵니다. 파일이 속한 조직에서 먼저 Figma를 연결해야 합니다.
사용량 확인 — 여러 생성을 시작하기 전에 get-plan-details를 호출해 요금제, 사용량, 남은 메시지를 확인하세요.
엔드포인트
2026-07-28을 지원하며, 이 버전은 https://api.flowstep.ai/.well-known/mcp.json에서 알립니다. 이전 2025-11-25 프로토콜의 클라이언트도 같은 엔드포인트에 연결합니다.
다음 단계
빠른 시작
클라이언트를 연결하고 첫 번째 도구 호출을 실행하세요.
인증
OAuth 2.1 PKCE 로그인과 승인이 작동하는 방식입니다.
도구
22개 도구 전체의 입력 및 출력 참조입니다.
예제
일반적인 작업을 위한 엔드투엔드 워크플로입니다.