shadcn.io is not affiliated with official shadcn/ui
Home Automation Chat Block for Vue
A home hub's thread beside a device pane: type commands or use the lamp, heating and door controls and scenes, and both write one state, each change landing as a system line in the thread.
Installation
Overview
Control a home from a conversation or a panel, with this home automation chat for Vue with Ark UI. A framed window of fixed height holds the thread of Lumenholt, a home hub, beside a "Devices" pane: a living room lamp (a Switch and a brightness Slider), the hall heating (a target slider) and the front door (a lock switch), with three scene buttons, Evening, Away and Movie. The thread and the pane write one state: type "turn off the lamp", "set heating to 19" or "movie" and the hub answers with a system line while the pane moves; move a control and a line such as "Lamp set to 40 percent" lands in the thread. The pressed scene is derived from the devices. Nothing is connected: the status line says the devices are typed. Below 768 px a two-view switch shows the chat or the devices. It's the starting point for a smart-home assistant or any chat that also holds a control panel.
FAQ
What stays in the page, and how do I make it real?
Everything. The three devices are one typed object, a typed line is read by a small pure parser of a few phrases (not a model), and no device is controlled. To wire it for real, send each change to your hub where change and post update the state, and feed the hub's own events back into the same state and thread.
How do the thread and the pane stay in step?
They share one state. A typed command and a control both end in the same function that sets the devices and appends a system line, so the lamp can't be on in the pane and off in the thread. Dragging a slider moves the value live and posts the line once, when you let go.
How is the active scene chosen?
It isn't stored: the scene whose settings match the devices exactly is pressed, and when none matches the badge reads Custom. Change the lamp by one step and Evening lets go; set it back and it presses again.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and the status line reports what changed. Switches and sliders have visible labels and spoken values ("60 percent", "21 degrees"), a disabled brightness slider says why by the lamp being off, and the pressed scene is exposed as a pressed button, not a color.