Packages

Quick Start

1. Install

npm install @memvid/canvas-react @memvid/canvas-server# orpnpm add @memvid/canvas-react @memvid/canvas-server

2. Create API Route (Next.js App Router)

// app/api/canvas/[...path]/route.tsimport{createCanvasCatchAll}from'@memvid/canvas-server/next';import{loadSettings,getApiKey,resolvePath}from'@memvid/canvas-core';constbasePath=process.cwd();exportconst{GET,POST,OPTIONS}=createCanvasCatchAll({  basePath,config:()=>{constsettings=loadSettings(basePath);constprovider=settings?.llmProvider||'openai';constmemoryPath=resolvePath(settings?.memoryPath||'./data/memory.mv2',basePath);return{llm:{        provider,apiKey:getApiKey(provider)||'',model:settings?.llmModel,},memory:memoryPath,};},});

3. Add the UI

// app/page.tsx'use client';import{CanvasShell}from'@memvid/canvas-react/components';import'@memvid/canvas-react/styles/canvas.css';exportdefaultfunctionPage(){return<CanvasShellapiBasePath="/api/canvas"/>;}

4. Add Environment Variables

# .env.localOPENAI_API_KEY=sk-...# orANTHROPIC_API_KEY=sk-ant-...

Features

Architecture

┌─────────────────────────────────────────────────────────────┐│                     Your Next.js App                         │├─────────────────────────────────────────────────────────────┤│  @memvid/canvas-react                                        ││  ├── CanvasShell (full app)                                  ││  ├── Search, Chat, Dashboard templates                       ││  └── useChat, useSearch hooks                                │├─────────────────────────────────────────────────────────────┤│  @memvid/canvas-server                                       ││  ├── Next.js route handlers                                  ││  └── File ingestion, search, chat endpoints                  │├─────────────────────────────────────────────────────────────┤│  @memvid/canvas-core                                         ││  ├── CanvasEngine (orchestrates LLM + Memory)                ││  ├── MemoryClient (wraps @memvid/sdk)                        ││  └── LLM providers (OpenAI, Anthropic, Google)               │├─────────────────────────────────────────────────────────────┤│  @memvid/sdk                                                 ││  └── .mv2 file format (video-based memory)                   │└─────────────────────────────────────────────────────────────┘

API Endpoints

Supported File Types

Configuration

Memory Path

// Use absolute path for consistencyconstmemoryPath=path.join(process.cwd(),'data','memory.mv2');

LLM Providers

{llm:{provider:'openai',// 'openai' | 'anthropic' | 'google'model:'gpt-4o-mini',// or 'claude-sonnet-4-20250514', etc.apiKey:process.env.OPENAI_API_KEY,}}

Theme Customization

:root {--canvas-primary:#818cf8;--canvas-accent:#22c55e;--canvas-background:#09090b;--canvas-surface:#18181b;--canvas-border:#27272a;--canvas-text:#fafafa;--canvas-muted:#a1a1aa;}

Development

# Clonegit clone https://github.com/memvid/canvas.gitcd canvas# Installpnpm install# Build all packagespnpm build# Run democd memvid-memory-demopnpm dev

Publishing

# Dry run (preview what would be published)pnpm publish:dry# Publish all packages to npmpnpm publish:all

Links

License