Choose the Right AuraGlass Component

#Selection Intent Map

Use valid public names before inventing a component. If a user asks for a product surface rather than a single component, compose several components or start from a recipe.

Choose boring, reliable components first. Add 3D, visualizers, or realtime only when the prompt clearly asks for those capabilities.

#Selection Heuristics

For dashboards, prioritize layout and data density: `AppShell`, `Sidebar`, `Card`, `Table`, and `StatCard`, with `ChartFrame` when the d3 peers are acceptable. For command centers, prioritize keyboard flow: `CommandPalette`, `Tabs`, cards, and tables.

For constrained embeds, docs cards, and previews, compose only the compound parts the bounded surface needs and size the wrapper in app CSS. That prevents viewport-oriented components from escaping their container.

#Example Composition

A good agent-generated composition has enough props to be believable and bounded. Avoid bare `<Component />` examples when the component normally needs data, state, or compound children.

import { Card, Command, CommandPalette } from 'aura-glass';
import 'aura-glass/styles.css';

export function AiCommandCenter() {
  return (
    <Card.Root>
      <Card.Body>
        <p>Press Cmd/Ctrl+K to search agents, jobs, and documents.</p>
        <CommandPalette>
          <Command.Root>
            <Command.Input placeholder="Search agents, jobs, and documents..." />
            <Command.List>
              <Command.Group heading="Agents">
                <Command.Item value="run-agent">Run agent</Command.Item>
                <Command.Item value="open-jobs">Open jobs</Command.Item>
              </Command.Group>
            </Command.List>
          </Command.Root>
        </CommandPalette>
      </Card.Body>
    </Card.Root>
  );
}