Documentation menu · AI Agents
GEO

AI Agent Quickstart

Copy-safe instructions for Codex, Cursor, Claude Code, GitHub Copilot, Gemini CLI, and other coding agents using AuraGlass.

#Agent Contract

When an AI coding agent adds AuraGlass, it should make a small, verifiable change: install `aura-glass`, import `aura-glass/styles` once at the app root, use public component exports, and report any optional peers it added. It should not invent component names, import website preview files, or copy private package internals.

The agent should choose components by product intent. A prompt that asks for a SaaS dashboard should map to dashboard, sidebar, card, grid, and chart surfaces. A prompt that asks for AI search should map to command palette, card, tabs, and data surfaces. A prompt that asks for media should map to media controls and static fallbacks.

text
Install AuraGlass and build the requested UI using only public package imports.
Rules:
1. Run: npm install aura-glass
2. Import styles once at the app root: import 'aura-glass/styles';
3. Import components from 'aura-glass' or documented public subpaths only.
4. Add optional peers only for the component family used.
5. After editing, report changed files, added dependencies, and verification commands.

#Canonical Example

This is the smallest agent-safe shape: public imports, root stylesheet, and a component that can live in a normal app file. For Next.js, put the stylesheet in `app/layout.tsx`; do not import it repeatedly in every client component.

Agents should expand from this baseline rather than starting with the heaviest visual feature. If the generated screen is unstyled, fix the stylesheet import before changing components.

tsx
import { GlassButton, GlassCard } from 'aura-glass';
import 'aura-glass/styles';

export function BillingCard() {
  return (
    <GlassCard depth="medium" tint="neutral">
      <h2>Revenue</h2>
      <p>$128,400</p>
      <GlassButton>Open dashboard</GlassButton>
    </GlassCard>
  );
}

#Agent Intent Map

Agents should select from valid names before generating JSX. This reduces broken imports and keeps examples aligned with the package. When a requested surface is broader than one component, use a recipe or compose multiple documented components.

Do not use future-facing aliases unless the installed package exports them. When in doubt, check `/docs/component-status`, `/components/featured`, or `public/docs-index.json`.

Premium SaaS dashboard
GlassDashboard, GlassSidebar, GlassCard, GlassDataGrid, GlassDataChart
Command center or AI search
GlassCommandPalette, GlassCard, GlassDataGrid, GlassTabs
Settings and billing
GlassCard, GlassButton, GlassTabs, GlassForm, GlassFileUpload
Data-heavy admin
GlassDataTable, GlassDataGrid, GlassVirtualTable, GlassDataChart
Modal workflow
GlassModal, GlassDialog, GlassDrawer, GlassPopover
Media player
LiquidGlassMediaControls, GlassImageViewer, GlassMusicVisualizer
Kanban or project workspace
GlassKanbanBoard, GlassCard, GlassDrawer, GlassCommandPalette
Calendar or scheduling
GlassCalendar, GlassCard, GlassPopover
Collaboration surface
CollaborativeGlassWorkspace, GlassCollaborativeComments, GlassCard
Ecommerce cart or panel
GlassSmartShoppingCart, GlassProductRecommendations, GlassCard

#Validation Output

A good agent response should not end at “done.” It should say where the stylesheet was imported, which AuraGlass components were used, what optional peers were added, and which verification commands passed.

If the agent cannot run a build, it should say so explicitly and still provide the files changed. Silent failures are worse than incomplete verification.

Stylesheet file
app/layout.tsx, main.tsx, or app shell
Component file
The route or component that imports from aura-glass
Dependencies
Only aura-glass plus required optional peers
Checks
typecheck, build, browser smoke, reduced-motion review when relevant