Find your way around Spektral

Spektral has one window and very few screens. Learn the header and you know where everything is.

The Spektral components workspace with the header, a Browse Components list showing Button, Badge, Card and form components, and the chat panel on the right
The components page: browse on the right, inspect on the left, talk to the agent in the same panel.

The header, left to right

  1. Project menu

    The folder name in the far top-left. Open it to create a project, open another one, or reveal the current one in your file manager.

    The project menu open, showing options to create a new project, open an existing project, and recent projects
    Everything project-level lives behind the folder name.
  2. Page switcher

    Four destinations: Components (build and inspect), Tokens (colour, spacing, type), Guidance (the rules the agent follows), and Matrix (what exists on which platform). Teams on a paid plan also get Releases and Work Orders.

  3. Platform selector

    Which platform you are looking at — React, Vue, and so on. Switching it changes the code you see, not the spec or the tokens, because those are shared.

  4. Component selector

    The component currently open. Use it to jump straight to another one, or press Browse Components to see the whole library as cards.

Preview and Spec

Every component has two views, toggled at the top-left of the content area.

  1. Preview

    The component rendered live from your Storybook, with a controls table underneath. Change a prop and the preview updates; press Show code or Copy code to take the snippet into an app. This is the view to send to a designer or a product engineer.

    The Button preview rendering a live button, with a props table listing children, variant, size, rounded, fullWidth and type controls
    A live Storybook render plus interactive props — no separate tool to open.
  2. Spec

    The framework-agnostic contract: intent, props, events, structure, behaviour, states, and keyboard interactions. Read it as a document or flip to YAML for the file itself. Every section has an Edit with AI button, and the spec is what the agent reads whenever it regenerates or ports the component — so the reasoning travels with the code.

    The Button spec in document view showing intent, props, events, structure and behaviour sections, each with an Edit with AI button
    The spec is the source of truth. Code is a rendering of it, once per platform.

The chat panel

The right-hand panel is where work happens. Empty, it asks what you are working on — something new, or a change to what is open. While the agent runs it shows a plan, a live activity log of every tool call it makes, and a Stop button. See Build a component.

The Storybook bar

Bottom-left, there is a Storybook status light with Start and Stop. Spektral runs Storybook for you so previews render and accessibility checks can execute; the Storybook ↗ link in the Preview toolbar opens the full Storybook in your browser when you want the real thing.

Nothing is hidden from you. Every panel in the app is a view over files in your project folder. If you prefer an editor, open the folder — Spektral will pick up your changes.

You know the map. Next, build a component.