Getting Started

Add an AI-powered infinite canvas to your React app in 3 steps: install, add VryoProvider, and create the agent endpoint. No code? Use the Workspace to build with the AI instead.

Prerequisites

You need a Next.js 14+ (App Router) or React 18+ project. VRYO uses tldraw for the canvas host, so you don't need to install tldraw separately — it's a peer dependency included by @vryo/client.

1. Install packages

npm install @vryo/client @vryo/core
npm install @vryo/server   # server-only

2. Add the provider

Wrap your canvas route with VryoProvider. Import the glass stylesheet once in your root layout.

app/canvas/page.tsx

"use client";
import { VryoProvider } from "@vryo/client";
import "@vryo/client/styles";   // glass panel CSS

export default function CanvasPage() {
  return (
    <VryoProvider
      style={{ width: "100%", height: "100vh" }}
      agentEndpoint="/api/vryo/agent"
    />
  );
}

3. Create the agent endpoint

The agent endpoint accepts a canvasState + message and returns an AgentPatch. Set ANTHROPIC_API_KEY in .env.local to use real Claude, otherwise the export falls back to a canned demo.

app/api/vryo/agent/route.ts

import { callAgentWithCanvas } from "@vryo/server";
import type { CanvasState } from "@vryo/core";

export async function POST(request: Request) {
  const { canvasState, message } = await request.json() as {
    canvasState: CanvasState;
    message: string;
  };
  const patch = await callAgentWithCanvas(canvasState, message);
  return Response.json(patch);
}

4. Apply patches manually (optional)

Use the ref API to apply patches from outside the provider — e.g. from a button or WebSocket handler.

app/canvas/page.tsx

"use client";
import { useRef } from "react";
import { VryoProvider, VryoProviderRef, AgentPatch } from "@vryo/client";

export default function CanvasPage() {
  const ref = useRef<VryoProviderRef>(null);

  function handlePatch(patch: AgentPatch) {
    ref.current?.applyPatch(patch);
  }

  return <VryoProvider ref={ref} style={{ width: "100%", height: "100vh" }} />;
}

5. Try the Workspace (no code required)

Don't want to write code yet? Open the VRYO Workspace to build dashboards with the AI copilot — upload data, chat, and export the result as React code.

💬

Chat

Describe your dashboard in natural language

📐

Templates

5 pre-built dashboards: Sales, Marketing, Product, Finance, HR

🔌

Connect

Upload CSV/JSON, paste data, or fetch from a URL

📤

Export

Generate React code, download JSON, or share

Next steps

Workspace — Build dashboards with the AI copilot — no code needed
Concepts — Understand CanvasState, AgentPatch, and widget schemas
API Reference — Full hook and component API — including useWidget, useDataSource, useDashboardActions
Recipes — Data binding, templates, export, live data, and more
Widget Reference — All 6 widget types with full property documentation

Getting Started

Add an AI-powered infinite canvas to your React app in 3 steps: install, add VryoProvider, and create the agent endpoint. No code? Use the Workspace to build with the AI instead.

Prerequisites

You need a Next.js 14+ (App Router) or React 18+ project. VRYO uses tldraw for the canvas host, so you don't need to install tldraw separately — it's a peer dependency included by @vryo/client.

1. Install packages

npm install @vryo/client @vryo/core
npm install @vryo/server   # server-only

2. Add the provider

Wrap your canvas route with VryoProvider. Import the glass stylesheet once in your root layout.

app/canvas/page.tsx

"use client";
import { VryoProvider } from "@vryo/client";
import "@vryo/client/styles";   // glass panel CSS

export default function CanvasPage() {
  return (
    <VryoProvider
      style={{ width: "100%", height: "100vh" }}
      agentEndpoint="/api/vryo/agent"
    />
  );
}

3. Create the agent endpoint

The agent endpoint accepts a canvasState + message and returns an AgentPatch. Set ANTHROPIC_API_KEY in .env.local to use real Claude, otherwise the export falls back to a canned demo.

app/api/vryo/agent/route.ts

import { callAgentWithCanvas } from "@vryo/server";
import type { CanvasState } from "@vryo/core";

export async function POST(request: Request) {
  const { canvasState, message } = await request.json() as {
    canvasState: CanvasState;
    message: string;
  };
  const patch = await callAgentWithCanvas(canvasState, message);
  return Response.json(patch);
}

4. Apply patches manually (optional)

Use the ref API to apply patches from outside the provider — e.g. from a button or WebSocket handler.

app/canvas/page.tsx

"use client";
import { useRef } from "react";
import { VryoProvider, VryoProviderRef, AgentPatch } from "@vryo/client";

export default function CanvasPage() {
  const ref = useRef<VryoProviderRef>(null);

  function handlePatch(patch: AgentPatch) {
    ref.current?.applyPatch(patch);
  }

  return <VryoProvider ref={ref} style={{ width: "100%", height: "100vh" }} />;
}

5. Try the Workspace (no code required)

Don't want to write code yet? Open the VRYO Workspace to build dashboards with the AI copilot — upload data, chat, and export the result as React code.

💬

Chat

Describe your dashboard in natural language

📐

Templates

5 pre-built dashboards: Sales, Marketing, Product, Finance, HR

🔌

Connect

Upload CSV/JSON, paste data, or fetch from a URL

📤

Export

Generate React code, download JSON, or share

Next steps

Workspace — Build dashboards with the AI copilot — no code needed
Concepts — Understand CanvasState, AgentPatch, and widget schemas
API Reference — Full hook and component API — including useWidget, useDataSource, useDashboardActions
Recipes — Data binding, templates, export, live data, and more
Widget Reference — All 6 widget types with full property documentation