Build with
the whole language.

Start from source

Download the kit, copy its src folder into your project as optical-ui, and install the listed dependencies with your package manager. The examples target React 19, TypeScript, modern CSS, Base UI, Lucide, and Motion. Optical UI is a source kit; it is not a published npm package.

import { OpticalProvider, AIExample, Signal } from './optical-ui';

<OpticalProvider theme={{ hue: 18, saturation: 63, radius: 20 }}>
  <AIExample name="context" />
  <Signal state="listening" size={64} />
</OpticalProvider>

The React tab copies the selected example’s source. It depends on the shared files in the kit. The CSS tab includes your current theme tokens and the AI component styles; the foundational control styles are also required.

Choose by the work it does

Wire the real states

Every playground example uses local state and sample content. It does not call a model, record audio, send messages, or persist data. Replace demonstration timers and values with your own events. A pause or cancel control needs to stop the actual request. An approval button needs a server-side permission check. Never represent illustrative progress as live telemetry.

Keep the material system coherent

Paper holds content. Ceramic gives an action weight. Glass introduces temporary context. Hue, saturation, and radius flow through the provider. Reuse the tokens instead of styling each component independently. The library keeps its original charcoal shell and warm material palette.

Animate the relationship

Use 160ms for acknowledgement, 320ms for control transitions, and 520ms for spatial change, with cubic-bezier(.16,1,.3,1). Morph from the current state rather than restarting. Keep the reading area stable while streaming. Signal states come from your application: idle, listening, thinking, streaming, and complete. The animation represents activity, not a model’s hidden reasoning.

Build the states people actually need

Include empty, loading, error, cancelled, permission-denied, and completed states. Preserve user input on failure. Keep focus visible, give icon controls an accessible name, and test keyboard navigation. Respect reduced motion. Streaming text should announce meaningful stages and completion, not every token. These sources have not received independent accessibility certification; validate your integrated product.

Install the agent skill

The installer writes a project-local skill with source, catalog, dependencies, and design guidance. Inspect it before running. It requires Node 22 or newer and refuses to overwrite an existing installation.

curl -fsSL https://deepcake.ai/optical-downloads/install.mjs | node --input-type=module

Then ask your coding agent to use optical-ui. If your agent uses a different skill folder, move the resulting .agents/skills/optical-ui directory to the folder that agent supports.

Review before shipping

Verify the actual application at phone and desktop sizes, with keyboard and reduced motion. Check your authorization, persistence, cancellation, streaming transport, and error recovery. The UI kit supplies interaction patterns and controls; production readiness depends on the system you connect them to.