Templates

// app/canvas/page.tsx
"use client";
import { VryoProvider } from "@vryo/client";
import "@vryo/client/styles";

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

Next.js + VRYO

Full-stack canvas app with VryoProvider, server-side agent route, and Claude integration. Includes example widgets and mock data.

// src/App.tsx
import { VryoProvider, VryoProviderRef } from "@vryo/client";
import { useRef } from "react";
import "@vryo/client/styles";

export default function App() {
  const ref = useRef<VryoProviderRef>(null);
  return (
    <VryoProvider
      ref={ref}
      style={{ width: "100vw", height: "100vh" }}
    />
  );
}

Vite + VRYO

Client-only canvas with manual patches. No server required — bring your own LLM endpoint or use static data.

// app/api/vryo/agent/route.ts
import { callAgentWithCanvas } from "@vryo/server";
import OpenAI from "openai";

const openai = new OpenAI();

export async function POST(request: Request) {
  const { canvasState, message } = await request.json();
  const completion = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      { role: "system", content: buildSystemPrompt(canvasState) },
      { role: "user", content: message },
    ],
  });
  return Response.json(parsePatch(completion));
}

VRYO + OpenAI

Canvas with an OpenAI (GPT-4o / GPT-4) or Groq agent endpoint. Drop-in replacement for the default Claude agent.