quickstart

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:

1. Start the dev server

   npm run dev
   

   Vite will serve the app at http://localhost:5173 (or another port if 5173 is occupied).

2. 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.

3. 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

• SDK package: @evenrealities/even_hub_sdk on npm
• Official docs: https://hub.evenrealities.com/docs/getting-started/overview
• Community Discord: https://discord.gg/Y4jHMCU4sv

---

Task

Scaffold a new Even Hub G2 project for: $ARGUMENTS