v2.0 is here! New components and themes are coming soon! Stay tuned.
TWJ Labs UI
Other

Supported Components for AI

A list of components available in TWJ Labs UI that leverage AI capabilities.

Supported AI Components

Master list of AI-powered components available in TWJ Labs UI: (This list includes components that are currently available and those planned for future releases.)

1. Form Elements (The "Hands" of the AI)

These allow the AI to fill out data for the user.

ComponentAI ActionsExample User CommandDocs
Input / TextareasetValue(text), clear()"Fill in my email address."Input Textarea
ButtononClick()"Click the submit button."Button
SwitchturnOn(), turnOff(), toggle()"Enable notifications."Switch
Selectselect(value), open(), close()"Change the currency to USD."In Development
Checkboxcheck(), uncheck(), toggle()"Agree to the terms."In Development
Radio Groupselect(value)"Choose the 'Pro' plan."In Development
SlidersetValue(number), increase(), decrease()"Turn the volume up to 80%."In Development
Date PickersetDate(dateString), nextMonth()"Schedule a meeting for next Friday."In Development
Color PickersetColor(hex)"Make the background blue."In Development

2. Navigation & Layout (The "Legs" of the AI)

These allow the AI to move the user around the interface.

ComponentAI ActionsExample User CommandDocs
TabsswitchTab(tabId)"Go to the Settings tab."In Development
Accordionexpand(id), collapse(id)"Open the FAQ section."In Development
PaginationnextPage(), prevPage(), goTo(page)"Show me the next set of results."In Development
Scroll AreascrollToTop(), scrollToBottom()"Scroll back up."In Development
Carouselnext(), prev(), goToSlide(index)"Show the next image."In Development

3. Feedback & Overlays (The "Focus" of the AI)

These allow the AI to manage distractions and windows.

ComponentAI ActionsExample User CommandDocs
Modal / Dialogopen(), close()"Open my profile settings."In Development
Sheet / Sidebaropen(), close(), toggle()"Close the side menu."In Development
Toast / Alertdismiss()"Clear all notifications."In Development
Tooltipshow(), hide()"What does this icon do?"In Development

On this page