Live Interactive Examples
Try commands in the chat to control these widgets
Click any "Insert" button below to copy example commands to the chat input. Then press Enter to see it work.
Level 1: BEGINNER
Single Independent Widget
Dev Notes
Key Pattern: Independent State
const [count, setCount] = useState(0)Component manages its own state using useState. Event listeners for tool integration. This widget is completely self-contained.
Count: 0
Level 2: INTERMEDIATE
Multiple Independent Widgets
Dev Notes
Key Pattern: Isolation
Each widget manages its own state - no coordination needed. These widgets are completely independent. Changing one doesn't affect the others.
Simple State
Settings
Current: default
Array State
Chat
CRUD Operations
Data
- Item 1
- Item 2
Level 3: ADVANCED
Shared State Architecture
Dev Notes
Why Shared State?
- Coordinate behavior across multiple widgets
- Single source of truth for application state
- Predictable state updates and easier testing
All components share a SINGLE StateManager. When one changes, all update automatically.
Form Widget
StateManager (Live)
Menu: CLOSED
Feature: OFF
Notifications: OFF
Priority: medium
Status: inactive
Theme: light
Try interacting with any widget above and watch this state update in real-time
Code Examples & Documentation
Learn how to implement these patterns in your own application
Basic Tool Decorators
Advanced Features
Ready to Build Your Own?
These examples are just the beginning. Explore our documentation to learn how to build complex AI-powered applications with Supernal Interface.