Roadmap
Components, recipes and visual tools for agent and voice interfaces. Web first, native later.
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 and specs stay platform-neutral so iOS and Android can 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: chat, voice, copilot, coding or research agent
Configure layout, style, components, behaviour and states in one flow
Live app preview alongside the controls
Copy as React, Tailwind or JDS
Studio: motion and backgrounds
Motion presets you can feel
Ambient backgrounds: gradient mesh, grain, aurora, dot fields
Generated code
Orbs: more families and visualizers
Mesh gradient, aurora, sonic rings and halo
Visualizers: circular waveform, radial bars, spectrogram, audio ribbon, pulsing rings
Portable foundations
Tokens exported as W3C design tokens JSON
Motion and orb specs written platform-neutral
Groundwork for native iOS and Android
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