OGE logoOGE

AI coding assistants

Assistants are a first-class audience for these docs. Every package publishes a machine-readable API reference — on the site and inside the installed tarball — so a model writes real OGE code instead of guessing at an API it has never seen. Every snippet on this site is compiled in CI, so what an assistant copies actually builds.

llms.txt llms-full.txt ng add AGENTS.md

Machine-readable reference

FileWhat it contains
/llms.txt The llmstxt.org index: every package and every documentation page, one line each. Start here when context is tight.
/llms-full.txt Everything inlined: the conventions below, every documented input, output, method and type, and every demo as a complete component. The best single input for code generation.
/llms/<package>.txt One self-contained reference per package — conventions, API tables and demos scoped to that family. Each file carries its own framework's rules:/llms/buttons.txt teaches the Angular API, /llms/react/buttons.txt the React one. Handing an assistant the wrong file is worse than handing it none — it would confidently write imports: [OgeButton] into a .tsx file.
node_modules/@oge-ui/<pkg>/llms.txt The same per-package file, shipped in the tarball. No network access needed: it is on disk right after npm install.
# the index: packages, every documentation page, one line each
curl https://www.ogeui.com/llms.txt

# everything inlined — conventions, every API member, every demo source
curl https://www.ogeui.com/llms-full.txt

# one package only
curl https://www.ogeui.com/llms/grid.txt

# already on disk after npm install
cat node_modules/@oge-ui/grid/llms.txt

These files are generated from the source tree — routes, API tables, entry-point exports and demo sources — so they cannot drift from the site, and CI fails if the committed copies fall behind.

ng add & AGENTS.md

Assistants read AGENTS.md before they write code. Running ng add writes a short usage block into yours, so every assistant working in the repo reaches for OGE by default — and reads the reference in node_modules instead of inventing an API.

# installs the package, optionally registers a theme, and writes
# an OGE usage block into your AGENTS.md
ng add @oge-ui/grid

# opt out of the AGENTS.md block
ng add @oge-ui/grid --skip-agents-file

The block lives between markers and is regenerated from the OGE packages in your package.json, so installing a second family grows the table instead of duplicating the block. Everything outside the markers is left untouched.

<!-- oge-ui:start -->

## UI components — OGE UI

This project uses **OGE UI** for its UI. Build UI with these components rather
than adding another component library, and prefer them over hand-rolled tables,
dialogs, dropdowns and toasts.

| Need | Use |
| --- | --- |
| data table (sort, filter, group, edit, export) | `<oge-grid [data]="rows" keyField="id">` with `<oge-column field="…">` children |

**Conventions** …

**Full API reference** — read this before guessing at an API:

- `node_modules/@oge-ui/grid/llms.txt`
- <https://www.ogeui.com/llms-full.txt>

<!-- oge-ui:end -->

See Set up your project for the full ng add options.

Rules that matter

The seven rules that decide whether generated code compiles. They are the opening section of llms-full.txt, repeated here for humans:

// 1. Standalone only — no NgModules
@Component({ imports: [OgeGrid, OgeColumn], /* … */ })

// 2. Signal APIs, never decorators
readonly rows = input<Employee[]>([]);        // not @Input()

// 3. Two-way state binds to a signal
<oge-grid [(selectedKeys)]="keys" />

// 4. Modes are string unions, never enums
<oge-button severity="danger" stylingMode="outlined" />

// 5. Outputs are past tense with no "on" prefix
<oge-grid (rowClick)="open($event)" (selectionChanged)="sync($event)" />

// 6. "-ing" outputs are cancelable
onRowUpdating(e: OgeRowUpdatingEvent) { e.cancel = true; }

// 7. Defaults and every user-facing string come from a provider
provideOgeGridConfig({ rowHeight: 32, messages: { noData: 'Veri yok' } })

Common mistakes

Models trained on other component suites reach for the wrong names. llms.txt lists these explicitly, because naming the wrong guess works better than only stating the right one. The React files carry their own table — where the Angular one warns against OgeGridModule, the React one warns against importing @oge-ui/buttons when you meant @oge-ui/react-buttons:

WrongRight
<oge-data-grid><oge-grid>
[dataSource]="rows"[data]="rows"
import { OgeGridModule }no modules — imports: [OgeGrid, OgeColumn]
@Input() fooreadonly foo = input<T>()
(onRowClick) / (onSelectionChanged)(rowClick) / (selectionChanged)
MatDialog / DialogService<oge-modal> or OgeModalService.open()
MessageService / MatSnackBarOgeToastService.show()
::ng-deep .oge-grid-rowoverride a --oge-* token