Workspace

Sidebar tabs

The left sidebar has four tabs. Each tab serves a different part of the workflow.

Widget palette

The sidebar rail includes quick-add buttons for every widget type. Click any icon to add a blank widget to the canvas, then configure it through the Copilot or directly on the canvas.

Keyboard shortcuts

Smart suggestions

When you upload data, the Copilot analyses column types and automatically suggests relevant visualisations. Numeric columns become chart series, date columns become time axes, and categorical columns become group-by dimensions. You can accept a suggestion or type your own request.

How the data flows

1. Upload — CSV/JSON files are parsed client-side (nothing leaves your browser). Column types (string, number, date) are auto-detected.
2. Prompt enrichment — When you chat, the data schema is appended to your message so the AI knows what columns exist.
3. Agent patch — The agent returns an AgentPatch with widget configurations. The workspace injects your data records into matching widgets.
4. Live canvas — Widgets render on the tldraw canvas with full interactivity, zooming, panning, and cross-filtering.

Export as code

The Export tab generates a self-contained React component. Copy the code into your project and install @vryo/client:

import { VryoProvider } from "@vryo/client";
import "@vryo/client/styles";

const widgets = [/* paste your exported JSON */];

export function Dashboard() {
  return (
    <VryoProvider
      initialState={{ widgets }}
      style={{ width: "100%", height: "80vh" }}
    />
  );
}

Tips

• Start with a template — it's faster than building from scratch.
• Upload your data first — the AI gives much better results when it knows your columns.
• Use the command palette (⌘K) to quickly add widgets or switch tabs.
• Undo freely — every action is tracked and reversible.
• Export early, iterate in code — the workspace is the starting point, not the end.

Next steps