Build with your coding agent

How it works

Your app's code lives in Broctic. Claude Code, Codex, Cursor or any other coding agent connects to it through the Broctic MCP server and edits it; the phone on the app's Studio page — and Expo Go on your own phone — re-renders within about two seconds of every edit, without a refresh. The dot beside the Studio's tabs names each version as it arrives. You pay for the agent you already use; Broctic does not bill for its tokens.

Set it up once

One file is the server and its installer. It needs Node 22 or later.

mkdir -p ~/.broctic
curl -fsSL https://broctic.com/downloads/broctic.mjs -o ~/.broctic/broctic.mjs
node ~/.broctic/broctic.mjs login
node ~/.broctic/broctic.mjs install

1. login

   Opens Settings → API keys. Create an organization key — it starts with brk_, not the bpk_ key an app ships with — and paste it. It is checked, then stored in ~/.broctic/credentials.json, readable only by you.

2. install

   Registers the server with Claude Code, Codex and Cursor for every folder, not one project, and adds a short skill so a new session knows Broctic exists. No client config gets a copy of the key.

node ~/.broctic/broctic.mjs status shows which key is in use and which agents have the server.

Ask for an app

Start a new session in any folder and say what you want, in plain words:

The agent creates the app and gives you a link to its Studio page. Open it: the phone is the live preview. From there the agent works through the requirements in order, runs the app in a real browser and looks at screenshots of what it built before calling anything done.

Two ways for the agent to edit

• Through the MCP server. Small find-and-replace edits (studio_edit_files) cost only the lines that change; whole new files go through studio_write_files.
• In a folder on your machine. studio_sync, or the command below, mirrors the project into a folder so the agent can use its own file tools. Every save reaches the phone; edits made in the Studio come back down.

node ~/.broctic/broctic.mjs dev app_… ~/Projects/my-app

If a file changed in both places, the copy in your folder wins and the Studio's copy is kept in .broctic/conflicts/ — and in the version history either way.

What the agent builds with

Every Studio app starts from a kit of components in the style of Apple's own apps — large titles, a gradient hero card, stat tiles, grouped lists, chips, progress bars — and the agent is told to compose them rather than invent its own. That is what makes the first screen look designed instead of like a wireframe, and what keeps every screen matching.

The kit is shared; the look is not. Each app gets its own palette, built from one accent colour, and its own mascot, so two apps from the same kit do not look like the same app.

More tools when you need them

The server offers the app-building tools by default, because every tool costs your agent context on every turn. The App Store, screenshot, analytics, monetization and research tools are separate toolsets — see MCP tools.