connect
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.
Deploy 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.
Prerequisites
- SSH key in
~/.ssh/(id_ed25519, id_rsa, or id_ecdsa) - exe.dev account - run
ssh exe.devonce to create your account - Clerk credentials from clerk.com:
- Publishable Key (pk_test_... or pk_live_...)
- Secret Key (sk_test_... or 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.devin 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:
- Go to clerk.com and sign in
- Select your application (or create one)
- Go to API Keys in the sidebar
- 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"]
Deploy Command
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
- SSH to
<studio>.exe.xyz- Creates VM if needed - Clone fireproof repo -
selem/docker-for-allbranch to/opt/fireproof - Generate security tokens - Session tokens and device CA keys
- Create
.env- All credentials for Docker services - Run
./docker/start.sh- Starts the full Fireproof stack - Wait for services - Confirms port 8080 is responding
- Write local
.connect- Saves studio info for future reference
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)
Public URLs
After deployment, your Studio exposes:
| Endpoint | URL | Purpose |
|---|---|---|
| Token API | https://<studio>.exe.xyz/api |
Token issuance for auth |
| Cloud Sync | fpcloud://<studio>.exe.xyz?protocol=wss |
Real-time sync |
Local .connect File
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.
Update Your App's Environment
After deploying Connect, update your app's .env:
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:
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose ps"
View logs:
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose logs -f"
Restart services:
ssh <studio>.exe.xyz "cd /opt/fireproof && sudo docker compose restart"
CLI Options
| Option | Description |
|---|---|
--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 |
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."
More from popmechanic/vibes-cli
vibes
Self-contained app generator — invoke this skill directly, do not decompose into sub-steps. Generates React web apps with TinyBase reactive data store. Use when creating new web applications, adding components, or working with real-time data. Ideal for quick prototypes and single-page apps that need real-time data sync.
26riff
Self-contained parallel generator — invoke directly, do not decompose. Generates 3-10 app variations in parallel for comparing ideas. Use when user says "explore options", "give me variations", "riff on this", "brainstorm approaches", or wants to see multiple interpretations of a concept.
25test
Self-contained test automation — invoke directly, do not decompose. End-to-end integration test that assembles a fixture, deploys to Cloudflare (with auto-provisioned Connect), and presents a live URL for browser verification. Use when testing the plugin, running E2E tests, verifying deployment works, or checking that templates assemble correctly.
25launch
Self-contained SaaS pipeline — invoke directly, do not decompose.
24sell
Self-contained SaaS automation — invoke directly, do not decompose. Transforms a Vibes app into a multi-tenant SaaS with subdomain-based tenancy. Adds Pocket ID authentication, subscription gating, and generates a unified app with landing page, tenant routing, and admin dashboard. Use when the user wants to monetize an app, add auth and billing, create a SaaS product, add subscriptions, or turn an app into a business.
23cloudflare
Self-contained deploy automation — invoke directly, do not decompose. Deploys a Vibes app to Cloudflare Workers via the Deploy API. Use when deploying, publishing, going live, pushing to production, or hosting on the edge.
23