설정
Claude Code CLI로 서버를 추가하세요..mcp.json에 추가하고 파일을 커밋하세요.
"type": "http" 필드는 Claude Code HTTP 서버에 필수입니다.인증
Claude Code는 처음 Flowstep 도구를 호출할 때 OAuth 2.1 PKCE 흐름을 자동으로 처리합니다. 브라우저가 Flowstep 로그인 페이지를 엽니다. Flowstep 자격 증명(이메일/비밀번호 또는 Google)으로 로그인하고 동의 화면에서 Allow를 클릭하면, CLI가 콜백을 받습니다. 생성하거나 교체해야 하는 API 키는 없습니다.인증하기 전에 Flowstep 계정이 필요합니다. app.flowstep.ai에서 계정을 만드세요.
연결 확인
Claude Code 세션에/mcp를 입력하세요. Flowstep이 연결된 상태로 표시되고 도구를 사용할 수 있어야 합니다. 그런 다음 다음 내용을 입력하세요.
사용 예시
ai-design-screens를 호출한 다음 get-screen-image를 호출하고, 렌더링 결과를 인라인으로 보여줍니다. Claude Code는 이미 저장소를 열어 두고 있으므로, 이어서 “Now build this screen in our app”(이제 우리 앱에서 이 화면을 만들어 줘)이라고 요청할 수 있습니다. 그러면 get-screen-jsx로 디자인을 읽고 여러분의 컴포넌트를 사용해 구현합니다.