25+ web components · v1.0

Web components for
AI-generated interfaces.

A standards-based component library built for Codicent. One script tag wires up authentication, live data, and drop-in UI elements — in any framework, or none at all.

index.html
<!-- one line loads everything -->
<script src="…/auto-setup.js"
data-mention="your-project"></script>
<simple-auth></simple-auth>
<simple-counter search="messages"></simple-counter>
<simple-data-table search="messages" limit="4"></simple-data-table>
25+
Production components
Auth0
Built-in authentication
Realtime
OData + SignalR data
Zero build
Just a script tag
Quick start

One line. Everything wired.

Auto-setup loads the runtime, handles authentication, and registers every component. Built so both developers and AI tools can generate working UI from a single import.

Auto-setup · recommended
<script src="…/auto-setup.js"
data-api-key="your-api-key"
data-mention="your-project"></script>
With Auth0
<script src="…/auto-setup.js"
data-use-auth0
data-auth0-domain="auth.codicent.com"
data-mention="codicentdev"></script>
Live demos

See it running.

25+ components

Component gallery

Every component with interactive examples, light/dark theming, and copy-paste code.

Open gallery →
Auth0

Authentication

Auth0 login, JWT handling, and authenticated OData calls with live chat integration.

Test auth →
Realtime

Live data

OData queries, SignalR realtime updates, data visualization, and export functions.

Connect data →
Catalog

Everything in the box.

All components register as standard custom elements and accept data-* JSON configuration.

Basic UI
simple-buttonsimple-cardsimple-h1…h6simple-listsimple-switchsimple-checkboxsimple-dropdownsimple-progress-barsimple-accordionsimple-tabssimple-modalsimple-tooltipsimple-skeleton
Chat & AI
simple-chat-messagesimple-chat-containersimple-ai-buttonsimple-send-buttoncodicent-chat
Data
simple-countersimple-data-tablesimple-chartsimple-pagination
Input
simple-text-inputsimple-file-upload
Auth
simple-auth
Display
simple-timelinesimple-notificationsimple-avatarsimple-tagsimple-breadcrumb