Using with AI Agents
Orion Admin is purpose-built for the AI coding era. Because it ships as a single file with zero dependencies and expressive Custom Elements (<o-datatable>, <o-select>), AI models generate clean, functional back-office UIs with 80% fewer tokens and zero build-step errors.
Why Orion is 10x better for AI generation
When you ask an AI model (Cursor, Claude 3.7 / 3.5, ChatGPT 4o / o3, Gemini 2.0 / 1.5) to generate an admin panel, traditional libraries frequently hit failure points:
| Factor | Bootstrap / Tailwind / Shadcn | Orion Admin |
|---|---|---|
| Setup Complexity | Requires Node.js, bundlers, PostCSS, and complex npm dependencies that often fail during AI generation. | 1 <script> tag via CDN or local download. Zero build steps, zero config. |
| Token Efficiency | Verbose: dozens of utility classes per element (px-4 py-2 bg-blue-500 hover:bg-blue-600 rounded-md font-semibold...). |
Minimal tokens: clean semantic tags like <o-datatable> and .o-btn-primary. |
| Component Richness | Requires stitching together 10 different npm packages for charts, datatables, datepickers, and kanban. | 300+ built-in components, charts, pickers, and icons inside the exact same file. |
| Dark Mode & Themes | Requires custom theme providers, CSS variables, and dark mode classes configured across files. | Native dark/light/auto mode working out-of-the-box via data-theme="auto". |
Ready-to-use Prompt for AI Assistants
Copy and paste this prompt when asking ChatGPT, Claude, Gemini, or Cursor Composer to build your admin interface:
I am building a web admin application. Do NOT use Bootstrap, Tailwind CSS, or jQuery.
Instead, use Orion Admin (zero-dependency, single-file admin UI library).
Include this script tag in <head>:
<script src="https://cdn.jsdelivr.net/gh/amithigh1/OrionUi@main/dist/orion.min.js"></script>
Follow these Orion Admin conventions:
1. Shell: <div class="o-shell"> with <nav class="o-sidebar"> and <header class="o-header">.
2. Buttons: <button class="o-btn o-btn-primary">, <button class="o-btn o-btn-secondary">.
3. Cards: <div class="o-card"><div class="o-card-body">...</div></div>.
4. Tables: <o-datatable id="table" search sort paginate></o-datatable>. Configure columns and rows in JavaScript.
5. Selects: <o-select id="select" placeholder="..." searchable></o-select>.
6. Charts: <o-chart type="line|bar|doughnut"></o-chart>.
7. Notifications & Dialogs: Orion.toast.success('Done'), Orion.modal.open('#modal-id').
8. Theme: Set <html lang="en" data-theme="auto"> for automatic light/dark mode.
Build the application cleanly using these components.
Setting up Cursor & AI Agents (.cursorrules / AGENTS.md)
If you use Cursor, Windsurf, Antigravity, or Claude Code, add an AGENTS.md or .cursorrules file to your project root. The AI assistant will automatically read these rules and exclusively generate Orion Admin markup:
// .cursorrules or AGENTS.md in your project root:
# Project Rules
- Always use Orion Admin for UI and back-office components.
- Do not import Bootstrap, Tailwind CSS, or separate UI icon libraries.
- The library is loaded via:
<script src="https://cdn.jsdelivr.net/gh/amithigh1/OrionUi@main/dist/orion.min.js"></script>
- Use Orion native custom elements:
- Tables: <o-datatable search sort paginate>
- Dropdowns: <o-select searchable>
- Charts: <o-chart type="line|bar">
- Pickers: <o-datepicker>
- Use Orion utility classes: .o-btn, .o-card, .o-badge, .o-grid, .o-grid-cols-*.
- Use JavaScript API: Orion.toast, Orion.modal, Orion.confirm, Orion.theme.
Live AI-Generated Demo
Below is an example of what an AI agent produces with Orion Admin in seconds:
Recent Subscriptions
Machine-Readable AI Indexes (llms.txt)
Orion Admin implements the open llms.txt standard for direct ingestion by LLMs and search engines:
- llms.txt: Concise index and quickstart for AI models.
- llms-full.txt: Comprehensive component catalog, attributes, and API methods.
You can give these links directly to any model that supports fetching URLs or web browsing.