How tools are built

Build & Deploy

How the browser tools on this site are built, and how to add a new one.

On this pageSee how Zip merge and the chat work · Learn about Rollspace · Add a new tool

Zip merge

• Page: /tools/zip-merge
• UI: docs/.vitepress/theme/ZipMergeTool.vue
• Logic: rollspace/src/lib/mergeTwoZips.ts (bundled via docs/.vitepress/lib/mergeTwoZips.ts)
• Strategies: compatible-namespaced (default), secondary-wins, primary-wins
• Output: a merged zip plus MERGE-MANIFEST.json

Everything runs in the browser. No files are uploaded.

AI assistant

The chat is locked on purpose. It makes no API calls and uses no keys.

• Page: /chat. The floating implemented.stream AI button opens it. /ai-assistant explains it.
• Floating button: docs/.vitepress/theme/ChatLauncher.vue
• Locked panel: docs/.vitepress/theme/ChatLocked.vue. It shows "quota reached" and a Continue on Vercel link to vercel.com. Visitors click it themselves; nothing redirects.

There is no server route. The old Gemini widget and its /api/gemini/chat route were removed.

Rollspace

rollspace/ is a full-stack sandbox app. It is not deployed to implemented.stream. Run it locally with npm run dev inside that folder.

Its Firebase settings belong in rollspace/firebase-applet-config.json. That file is gitignored. Copy firebase-applet-config.example.json and fill in your own values.

Adding a tool

1. Ship the component in the same PR.
2. Add a page under docs/tools/.
3. Add it to the Tools sidebar and the Tools overview.
4. Document it on this page.

Next steps

NextZone overviewPreviousTheme tokensZoneAll Build & Deploy pages