Documentation menu · AI Agents
GEO

Install AuraGlass With an Agent

Exact install and import steps an AI coding agent should use for AuraGlass.

#Agent Install Steps

The agent should install the core package first, then add the stylesheet import in the framework root. It should not scatter CSS imports across generated component files because that makes future cleanup harder.

After the install, the agent should render one simple component and run a local check. If the app is Next.js, run `next build` or the project build script. If the app is Vite, run the project typecheck/build script.

bash
npm install aura-glass@5.0.2

import 'aura-glass/styles.css';

#Optional Peers for Agents

Optional peers are feature costs. Agents should list why a peer was added. For example, the d3 peers are justified by a chart adapter inside `ChartFrame` (from `aura-glass/data`); Three.js peers are justified by 3D or spatial components; the date peers are justified by `aura-glass/date` components.

If the task only asks for cards, buttons, or a dashboard shell, do not install chart, 3D, AI, or realtime peers unless the generated code actually imports that family.

Core controls and surfaces
react ^19, react-dom ^19, aura-glass/styles.css
Motion-rich components
motion ^12 only when the selected surface uses aura-glass/motion
Icons
First-party `aura-glass/icons` entrypoint; no icon peer dependency
Forms and validation
react-hook-form ^7 only when a form recipe or aura-glass/forms binding uses it
Date and calendar
@internationalized/date and react-aria-components for aura-glass/date
Charts and analytics
d3-scale and d3-shape for chart adapters framed by aura-glass/data
3D and spatial effects
three, @react-three/fiber, @react-three/drei from aura-glass/three
AI surfaces
The app supplies provider calls; aura-glass/ai renders Thread, Message, and Composer from props

#Bad vs Good Install Output

Bad output says “installed AuraGlass” without naming files or checks. Good output names the changed root layout, the component file, the added dependencies, and the verification result.

This matters because most setup failures are not visible in a text answer. The reviewer needs concrete files and commands to inspect.

Bad
Added AuraGlass and used it in the UI
Good
Added `aura-glass` to package.json, imported styles in `app/layout.tsx`, used `Card` in `BillingPanel.tsx`, and `npm run build` passed