| name | quickstart |
| description | Scaffold a new Even Hub G2 smart glasses app from scratch with Vite, TypeScript, SDK, simulator, and CLI. Use when creating a new Even Hub project, starting a glasses app, or bootstrapping development. |
| allowed-tools | ["Read","Grep","Glob","Bash","Write","Edit"] |
| argument-hint | ["project name or description"] |
You are scaffolding a complete Even Hub G2 smart glasses project. Follow every step below in order. Do not skip any step. Use the project name derived from $ARGUMENTS (default to my-evenhub-app if none is given).
What This Does
Creates a fully working Even Hub project directory containing:
- A Vite + TypeScript app (or user's preferred framework)
- The Even Hub SDK installed and ready to use
- The Even Hub CLI and Simulator as dev dependencies
- A generated
app.json manifest
- A working
src/main.ts starter file that renders text on the G2 display
Steps
1. Determine the project name
Extract the project name from $ARGUMENTS. Strip spaces and special characters to produce a valid directory name (e.g. "My Cool App" → my-cool-app). If no argument is provided, use my-evenhub-app.
Also derive a package_id slug by removing hyphens from the directory name (e.g. my-cool-app → mycoolapp). The package_id in app.json must be lowercase with no hyphens (e.g. com.example.mycoolapp).
2. Create the project with Vite
Run the following command (substitute <name> with the project name):
npm create vite@latest <name> -- --template vanilla-ts
If the user specified a different framework (react, vue, svelte, etc.), honour that by replacing vanilla-ts with the appropriate Vite template. When in doubt, use vanilla-ts.
3. Install base dependencies
cd <name> && npm install
4. Install the Even Hub SDK
npm install @evenrealities/even_hub_sdk
5. Install dev tools (CLI + Simulator)
npm install -D @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
6. Generate the app manifest
npx evenhub init
This writes app.json to the project root. If the command is interactive, fill in the fields using the values from the template below. After generation, open app.json and correct it to match the template:
- Set
min_sdk_version to "0.0.12" (the init command may default to an older version).
- Set
permissions to [] unless the app actually requires specific permissions. Remove any placeholder permissions generated by the init command.
- Verify all other fields match the app.json template section below. Edit any remaining placeholder values to match the project.
7. Replace src/main.ts with starter code and clean up boilerplate
Overwrite src/main.ts with exactly the following content. Then delete any unused boilerplate files left by the Vite template (e.g., src/counter.ts, src/style.css, src/assets/).
import { waitForEvenAppBridge, TextContainerProperty, CreateStartUpPageContainer } from '@evenrealities/even_hub_sdk'
const bridge = await waitForEvenAppBridge()
const mainText = new TextContainerProperty({
xPosition: 0,
yPosition: 0,
width: 576,
height: 288,
borderWidth: 0,
borderColor: 5,
paddingLength: 4,
containerID: 1,
containerName: 'main',
content: 'Hello from G2!',
isEventCapture: 1,
})
const result = await bridge.createStartUpPageContainer(new CreateStartUpPageContainer({
containerTotalNum: 1,
textObject: [mainText],
}))
console.log('Page created:', result === 0 ? 'success' : 'failed')
8. Confirm the project structure
Print a summary of the created files. The final project should look like:
<name>/
app.json
index.html
package.json
src/
main.ts
...
app.json Template
If npx evenhub init does not produce the file automatically, create app.json in the project root with this content (update values to match the project):
{
"package_id": "com.example.<name>",
"edition": "202601",
"name": "<Human-readable app name>",
"version": "0.1.0",
"min_app_version": "2.0.0",
"min_sdk_version": "0.0.12",
"entrypoint": "index.html",
"permissions": [],
"supported_languages": ["en"]
}
Field explanations:
package_id — Reverse-domain unique identifier for your app (e.g. com.acme.myapp). No hyphens allowed — use only lowercase letters and digits in each segment.edition — Even Hub platform edition the app targets; use "202601" for current G2 firmware.name — Human-readable display name shown in the Even Hub app store / launcher.version — Semantic version of your app (MAJOR.MINOR.PATCH).min_app_version — Minimum Even Hub companion app version required to run this app.min_sdk_version — Minimum Even Hub SDK version required. Match the SDK version you build against (currently "0.0.12").entrypoint — HTML file Vite serves as the app root; leave as "index.html".permissions — Array of permission objects ({ "name": "...", "desc": "..." }). Use [] for apps that need no special permissions. Valid names: network, location, g2-microphone, phone-microphone, album, camera.supported_languages — ISO 639-1 language codes the app supports.
Next Steps
Tell the user how to run the project after scaffolding:
-
Start the dev server
npm run dev
Vite will serve the app at http://localhost:5173 (or another port if 5173 is occupied).
-
Preview in the simulator
npx evenhub-simulator http://localhost:5173
The simulator renders the G2 display (576x288, 4-bit greyscale) in a desktop window so you can iterate without hardware.
-
Test on real glasses
Ensure your computer and the glasses are on the same Wi-Fi network, then run:
npx evenhub qr --url http://<your-ip>:5173
Scan the QR code from the Even Hub companion app to sideload the app onto your G2.
Hardware Quick Reference
| Property | Value |
|---|
| Display resolution | 576 x 288 px |
| Colour depth | 4-bit greyscale (16 shades of green) |
| Camera | None |
| Speaker | None |
| Connectivity | Bluetooth 5.2 |
| Input | Touchpad on the frame; optional R1 ring controller |
Keep these constraints in mind when designing layouts: full-width containers should use width: 576, full-height containers should use height: 288, and all colours must be greyscale values 0–15.
Key Resources
Task
Scaffold a new Even Hub G2 project for: $ARGUMENTS
