A working panel in five focused steps.
Build a React panel that runs inside Zana using @zana-ai/zcc-plugin-sdk. Plugins are full-trust after install — confirm each install, and keep host-daemon tokens on the server.
Small surface area, fast feedback.
Everything begins with package.json zcc. The host owns slots, reload, and the full-trust install confirm.
- 1
Seed a thread
Plugins → New plugin (or Browse → Create a plugin) inserts “Create a new zcc plugin that …”. Send it from the current project — not a dedicated Extensions folder. Folder/git/npm install stays install, not create.
- 2
Scaffold, install, iterate
The agent runs `zcc plugin new hello --app`, then `cd zcc-plugin-hello`, `zcc plugin install .`, and `zcc plugin dev`. That writes package.json zcc, server.ts, and app.tsx.
- 3
Return a panel
Default-export definePluginApp and register app.slots.navPanel. The host React instance is globalThis.__ZCC_HOST_REACT__.
- 4
Watch and reload
`zcc plugin dev` rebuilds the app and reloads. Path installs load server.ts from source. Install an existing tree from Plugins → Browse (folder, git, or npm).
- 5
Reload and refine
A failed reload keeps the last good generation. Plugins are full-trust in-process on the server after a loud confirm.
Declare the smallest useful plugin.
The contract lives in package.json zcc. Start with a panel, then add skills or MCP only when you have a concrete need. Install is the full-trust confirm.
{
"name": "zcc-plugin-hello",
"engines": { "zcc": ">=1.0.0", "zccPluginSdk": ">=0.1.0" },
"zcc": {
"name": "Hello",
"app": "./app.tsx",
"server": "./server.ts",
"skills": ["skills"]
}
}Keep the source editable and the result visible.
Once the folder is connected as a local source, build changes can refresh the installed artifact without an application restart.
- Source remains in your working directory
- zcc plugin dev watches, rebuilds, and reloads
- A failed reload keeps the last good generation