Roadmap
Components, recipes and visual tools for agent and voice interfaces. Web first, mobile web now, native next.
Component libraries are plentiful; tools for designing AI interfaces are not. The Studio is where JDS earns its place: pick a preset, tune it visually, preview every state, copy the code. It grows in small steps, one surface at a time (orbs, then prompt input, then recipes, conversation and activity), until it can configure a whole agent experience. Tokens already export to SwiftUI, Compose and React Native; orb specs and native components follow.
Studio: agent panel
Agent Panel component
Docked or floating, left or right, card, page or glass
Slide, fade or spring entrance
Chat and voice modes, composer options
Live preview with generated code
Studio: voice orb
One state API for every orb: idle, connecting, listening, thinking, speaking, error
Presets, speed, glow and sensitivity, previewed in every state, with generated code
Plasma and liquid, the first WebGL shader families
Studio: voice orb, round two
Custom palettes
Preview the orb inside real surfaces
Minimal dot for composer buttons, headers and call pills
Glass orb
Shape and material controls per family
Studio: prompt input
Frame, context header and option chips
Attachments, model picker, tools, suggestions, dictation, mentions
Send button and submit styles
Generated code
Recipes
Voice agent: orb styled in the Studio, split or focus layout, session interface (live)
Particles merged in: chat app, agent panel, agent run, inbox and more, each installable (live)
Agent side panel: panel, orb and composer from their Studios, chat and hold-to-talk voice, useChat-shaped session (live)
Chat app: composer from the Prompt Input Studio (live)
Studio choices carry into recipes: each Studio's Code tab has the matching recipe snippet (live)
Quick filters by voice, side panel, chat and operations (live)
Studio: conversation and agent activity
Bubbles, shape, density, avatars and message actions
Reasoning, plan, tool calls, approvals, citations, sources and artifacts in one turn
Working and done states, on a page or in a side panel
Generated code
Studio: voice call, command bar and artifact
Voice call: layout, captions, waveform, status, hand-off and backdrop on the voice agent recipe (live)
Command bar: a ⌘K bar that runs commands and asks the agent, with its own Studio (live)
Artifact: document, code or preview, opening beside the chat, as a sheet, full screen or inline (live)
Studio: whole experiences
Start from what you're building: a chat app, a side panel copilot or a voice agent
Look, parts and behaviour in one flow, sharing the site theme
The whole app live alongside the controls: chat, voice mode and ⌘K all work
Export one install, the root layout, the page and a Markdown spec
Mobile
Touch pass: tap equivalents for hover, 44px targets, safe areas and dynamic viewport
Agent panel as a bottom drawer on phones
Mobile recipes previewed in an iPhone frame, with a Web / Mobile switch on Recipes
Mobile voice agent and mobile chat (live)
Minimized call, push-to-talk and approve from phone (live)
Native tokens
Tokens exported as W3C design tokens JSON (DTCG)
SwiftUI, Jetpack Compose and React Native exports, from Customize and the Styling page
Durations, easings and springs carried over, so motion feels the same on every platform
Studio: motion and backgrounds
Motion Studio: springs, durations, easing and streamed-content entrances, felt on real interactions (live)
Exports a replacement lib/motion.ts, so the whole app moves the new way
Ambient Background component: gradient mesh, aurora and dot fields, with grain, tinted by the theme (live)
Backgrounds Studio, previewed behind an empty chat and a voice call, with generated code (live)
Studio: navigation and backgrounds, round two
Nav Sidebar component with its own Studio (live)
Spotlight, rays, waves and grid backgrounds (live)
Richer drift in ambient background layers (live)
JDS Pro
License-gated registry and a /pro page
Live previews of Pro components in the docs
Surfaces and effects
Lit surface lighting tokens, scoped to any element with data-surface
Metal and glass surface presets, segmented toggle group
Voice Glow and Liquid Glass effects
Site background setting in Customize, to test surfaces over ambient backgrounds
Agentic refocus
Voice Panel Studio: drawer or full screen, hands-free or push-to-talk, panel material (live)
Mobile voice panel recipe (live)
Agent takeover recipe: edge light, take back bar, inline signals, context selection (live)
Agent runs status and popover for the side panel: approve in place, live timers (live)
Catalog split into agent, voice, effects and foundations
Skills: taste built into the system
Installable agent skills from the registry: layout, type, color, motion, copy and mobile
Short rules with a reason each, written for the agent that builds with JDS
A check script in the skill: token contrast in light and dark, and the banned patterns in source (live)
Type scale and touch target checks
Served alongside llms.txt, so any agent picks them up
Orbs: more families and visualizers
Mesh gradient, aurora, sonic rings and halo
Visualizers: circular waveform, radial bars, spectrogram, audio ribbon, pulsing rings
Native components
Orb specs written platform-neutral
Groundwork for native iOS and Android components
Foundation, components and compositions
Tokens, themes and customizer
21 agent and voice components, 52 primitives
10 compositions, since merged into recipes
Docs for humans and agents, visual regression tests