跳转到主要内容

​
配置

使用 Claude Code CLI 添加服务器：
如需与仓库中的所有协作者共享该服务器，请改为将其添加到项目根目录的 .mcp.json 中，并提交该文件：
Claude Code 的 HTTP 服务器必须包含 "type": "http" 字段。

​
身份验证

Claude Code 会在首次调用 Flowstep 工具时自动处理 OAuth 2.1 PKCE 流程。您的浏览器会打开 Flowstep 登录页面。使用您的 Flowstep 凭据登录（邮箱/密码或 Google），在授权页面上点击 Allow，CLI 便会捕获回调。无需创建或轮换任何 API 密钥。
身份验证前您需要一个 Flowstep 账户。请在 app.flowstep.ai 创建。

​
验证连接

在 Claude Code 会话中输入 /mcp。Flowstep 应显示为已连接，且其工具可用。然后输入：

​
用法示例

Claude Code 会调用 ai-design-screens → get-screen-image，并在对话中内联显示渲染结果。由于 Claude Code 已打开您的代码仓库，您可以继续输入 “Now build this screen in our app”（现在在我们的应用中构建这个屏幕），它会通过 get-screen-jsx 读取该设计，并使用您的组件来实现它。