# Quickstart

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

- Skill: `even-realities/quickstart` (Agent Skill)
- Install (CLI): `npx skillmds@latest add even-realities/quickstart`
- Raw SKILL.md: https://api.skillmd.com/api/skills/even-realities/quickstart/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: even-realities (https://skillmd.com/u/even-realities)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/even-realities/quickstart

---


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):

```bash
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

```bash
cd <name> && npm install
```

### 4. Install the Even Hub SDK

```bash
npm install @evenrealities/even_hub_sdk
```

### 5. Install dev tools (CLI + Simulator)

```bash
npm install -D @evenrealities/evenhub-cli @evenrealities/evenhub-simulator
```

### 6. Generate the app manifest

```bash
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/`).

```typescript
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):

```json
{
  "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**

   ```bash
   npm run dev
   ```

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

2. **Preview in the simulator**

   ```bash
   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:

   ```bash
   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](https://www.npmjs.com/package/@evenrealities/even_hub_sdk)
- **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