connect

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:connect". Do not decompose the steps below into separate plan tasks.
规划模式:如果你正在规划工作,整个技能作为一个规划步骤即可:"调用 /vibes:connect"。请勿将以下步骤拆分为单独的规划任务。

Deploy Connect Studio

部署Connect Studio

Deploy Fireproof Connect to exe.dev as your personal sync backend. Your Studio VM runs the full Fireproof sync stack and can be used by multiple apps.
将Fireproof Connect部署到exe.dev作为你的个人同步后端。你的Studio虚拟机运行完整的Fireproof同步栈,可被多个应用使用。

Prerequisites

前置条件

  1. SSH key in
    ~/.ssh/
    (id_ed25519, id_rsa, or id_ecdsa)
  2. exe.dev account - run
    ssh exe.dev
    once to create your account
  3. Clerk credentials from clerk.com:
    • Publishable Key (pk_test_... or pk_live_...)
    • Secret Key (sk_test_... or sk_live_...)
  1. SSH密钥存储在
    ~/.ssh/
    目录下(支持id_ed25519、id_rsa或id_ecdsa格式)
  2. exe.dev账号 - 运行一次
    ssh exe.dev
    即可创建账号
  3. Clerk凭据来自clerk.com
    • 可发布密钥(pk_test_... 或 pk_live_...)
    • 密钥(sk_test_... 或 sk_live_...)

Gather Config

收集配置信息

Use AskUserQuestion to collect deployment config before running the deploy script.
Question 0: "Have you created an exe.dev account? (Run `ssh exe.dev` in your terminal to create one)"
Header: "exe.dev"
Options:
- Label: "Yes, I have an account"
  Description: "I've already run ssh exe.dev and verified my account."
- Label: "No, I need to set one up"
  Description: "I haven't created an exe.dev account yet."
If "No": Instruct the user:
Run
ssh exe.dev
in your terminal. This will create your account automatically. You'll need an SSH key in ~/.ssh/ (the command will guide you). Once your account is confirmed, come back and we'll continue.
Then STOP and wait for them to confirm they've completed this step.
Question 1: "What codename for your Studio? (becomes <codename>.exe.xyz)"
Header: "Studio"
Options: Suggest "${username}-studio" + user enters via "Other"

Question 2: "Do you have your Clerk keys ready?"
Header: "Clerk"
Options: ["Yes, I have them", "No, I need to get them first"]
If user needs Clerk keys, provide these instructions:
  1. Go to clerk.com and sign in
  2. Select your application (or create one)
  3. Go to API Keys in the sidebar
  4. Copy both the Publishable Key and Secret Key
After receiving the codename, ask for the keys:
Question: "Paste your Clerk Publishable Key (starts with pk_test_ or pk_live_)"
Header: "Publishable"
Options: [User enters via "Other"]

Question: "Paste your Clerk Secret Key (starts with sk_test_ or sk_live_)"
Header: "Secret"
Options: [User enters via "Other"]
在运行部署脚本前,使用AskUserQuestion收集部署配置信息。
Question 0: "你是否已创建exe.dev账号?(在终端中运行`ssh exe.dev`即可创建)"
Header: "exe.dev账号"
Options:
- Label: "是,我已有账号"
  Description: "我已运行ssh exe.dev并验证了账号。"
- Label: "否,我需要先创建"
  Description: "我还未创建exe.dev账号。"
如果选择"否":指导用户:
在终端中运行
ssh exe.dev
。这将自动创建你的账号。 你需要在~/.ssh/目录下有一个SSH密钥(命令会引导你完成)。 账号确认后,请返回继续后续步骤。
然后停止操作,等待用户确认已完成此步骤。
Question 1: "你的Studio代号是什么?(将成为<codename>.exe.xyz)"
Header: "Studio配置"
Options: 建议使用"${username}-studio",用户也可通过"其他"输入自定义名称
Question 2: "你是否已准备好Clerk密钥?"
Header: "Clerk凭据"
Options: ["是,我已准备好", "否,我需要先获取"]
如果用户需要Clerk密钥,提供以下说明:
  1. 访问clerk.com并登录
  2. 选择你的应用(或创建一个新应用)
  3. 进入侧边栏的"API Keys"页面
  4. 复制可发布密钥和密钥
获取代号后,询问密钥信息:
Question: "请粘贴你的Clerk可发布密钥(以pk_test_或pk_live_开头)"
Header: "可发布密钥"
Options: [用户通过"其他"输入]

Question: "请粘贴你的Clerk密钥(以sk_test_或sk_live_开头)"
Header: "密钥"
Options: [用户通过"其他"输入]

Deploy Command

部署命令

bash
cd "${CLAUDE_PLUGIN_ROOT}/scripts" && [ -d node_modules ] || npm install
node "${CLAUDE_PLUGIN_ROOT}/scripts/deploy-connect.js" \
  --studio <codename> \
  --clerk-publishable-key "pk_test_..." \
  --clerk-secret-key "sk_test_..."
bash
cd "${CLAUDE_PLUGIN_ROOT}/scripts" && [ -d node_modules ] || npm install
node "${CLAUDE_PLUGIN_ROOT}/scripts/deploy-connect.js" \
  --studio <codename> \
  --clerk-publishable-key "pk_test_..." \
  --clerk-secret-key "sk_test_..."

What It Does

执行内容

  1. SSH to
    <studio>.exe.xyz
    - Creates VM if needed
  2. Clone fireproof repo -
    selem/docker-for-all
    branch to
    /opt/fireproof
  3. Generate security tokens - Session tokens and device CA keys
  4. Create
    .env
    - All credentials for Docker services
  5. Run
    ./docker/start.sh
    - Starts the full Fireproof stack
  6. Wait for services - Confirms port 8080 is responding
  7. Write local
    .connect
    - Saves studio info for future reference
  1. SSH连接到
    <studio>.exe.xyz
    - 按需创建虚拟机
  2. 克隆Fireproof仓库 - 将
    selem/docker-for-all
    分支克隆到
    /opt/fireproof
  3. 生成安全令牌 - 会话令牌和设备CA密钥
  4. 创建
    .env
    文件
    - 存储Docker服务的所有凭据
  5. 运行
    ./docker/start.sh
    - 启动完整的Fireproof栈
  6. 等待服务启动 - 确认8080端口正常响应
  7. 写入本地
    .connect
    文件
    - 保存Studio信息以备后续使用

Architecture

架构

Studio VM (<codename>.exe.xyz)
├── /opt/fireproof/
│   ├── docker-compose.yaml (from repo)
│   ├── docker/
│   │   ├── nginx.conf (routes all traffic)
│   │   └── start.sh (orchestrates services)
│   └── .env (generated credentials)
└── Docker services (port 8080 exposed)
    ├── nginx proxy
    ├── dashboard (internal 7370)
    └── cloud-backend (internal 8909)
Studio虚拟机 (<codename>.exe.xyz)
├── /opt/fireproof/
│   ├── docker-compose.yaml (来自仓库)
│   ├── docker/
│   │   ├── nginx.conf (路由所有流量)
│   │   └── start.sh (编排服务)
│   └── .env (生成的凭据)
└── Docker服务(暴露8080端口)
    ├── nginx代理
    ├── dashboard(内部端口7370)
    └── cloud-backend(内部端口8909)

Public URLs

公共URL

After deployment, your Studio exposes:
EndpointURLPurpose
Token API
https://<studio>.exe.xyz/api
Token issuance for auth
Cloud Sync
fpcloud://<studio>.exe.xyz?protocol=wss
Real-time sync
部署完成后,你的Studio将暴露以下端点:
端点URL用途
Token API
https://<studio>.exe.xyz/api
用于认证的令牌颁发
云同步
fpcloud://<studio>.exe.xyz?protocol=wss
实时同步

Local
.connect
File

本地
.connect
文件

The deploy script creates a
.connect
file in your project:
studio: <codename>
api_url: https://<codename>.exe.xyz/api
cloud_url: fpcloud://<codename>.exe.xyz?protocol=wss
clerk_publishable_key: pk_test_...
This file is gitignored and used to auto-configure app deployments.
部署脚本会在你的项目中创建一个
.connect
文件:
studio: <codename>
api_url: https://<codename>.exe.xyz/api
cloud_url: fpcloud://<codename>.exe.xyz?protocol=wss
clerk_publishable_key: pk_test_...
该文件已被git忽略,用于自动配置应用部署。

Update Your App's Environment

更新应用环境变量

After deploying Connect, update your app's
.env
:
bash
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
VITE_API_URL=https://<studio>.exe.xyz/api
VITE_CLOUD_URL=fpcloud://<studio>.exe.xyz?protocol=wss
部署Connect后,更新你的应用
.env
文件:
bash
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...
VITE_API_URL=https://<studio>.exe.xyz/api
VITE_CLOUD_URL=fpcloud://<studio>.exe.xyz?protocol=wss

Troubleshooting

故障排除

Check Docker status:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose ps"
View logs:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose logs -f"
Restart services:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose restart"
检查Docker状态:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose ps"
查看日志:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose logs -f"
重启服务:
bash
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose restart"

CLI Options

CLI选项

OptionDescription
--studio <name>
Studio VM name (required)
--clerk-publishable-key <key>
Clerk publishable key (required)
--clerk-secret-key <key>
Clerk secret key (required)
--dry-run
Show what would be done without executing

选项描述
--studio <name>
Studio虚拟机名称(必填)
--clerk-publishable-key <key>
Clerk可发布密钥(必填)
--clerk-secret-key <key>
Clerk密钥(必填)
--dry-run
显示将要执行的操作但不实际运行

What's Next?

下一步操作?

After successful deployment, present these options using AskUserQuestion:
Question: "Your Connect Studio is live at https://${studio}.exe.xyz! What's next?"
Header: "Next"
Options:
- Label: "Deploy an app that uses this Studio"
  Description: "Generate and deploy a Vibes app configured to sync through your Studio. I'll set up the environment automatically."

- Label: "Update an existing app to use Connect"
  Description: "Configure an existing app's .env to point to your new Studio for cloud sync."

- Label: "I'm done for now"
  Description: "Your Studio is running 24/7 on exe.dev. Any app configured with these URLs will sync through it."
部署成功后,使用AskUserQuestion呈现以下选项:
Question: "你的Connect Studio已在https://${studio}.exe.xyz上线!接下来要做什么?"
Header: "下一步"
Options:
- Label: "部署一个使用该Studio的应用"
  Description: "生成并部署一个配置为通过你的Studio进行同步的Vibes应用。我会自动设置环境。"

- Label: "更新现有应用以使用Connect"
  Description: "配置现有应用的.env文件,使其指向新的Studio进行云同步。"

- Label: "暂时完成操作"
  Description: "你的Studio将在exe.dev上7*24小时运行。任何配置了这些URL的应用都将通过它进行同步。"