AI-powered Knowledge Base UI Kit built on Memvid - the video-based memory format for AI.
Canvas provides drop-in React components and server utilities to build search, chat, and dashboard interfaces powered by your documents and data.
| Package | Description | npm |
|---|---|---|
@memvid/canvas-core |
Core engine, memory client, LLM providers | |
@memvid/canvas-react |
React components, templates, hooks | |
@memvid/canvas-server |
Server utilities, Next.js route handlers |
npm install @memvid/canvas-react @memvid/canvas-server
# or
pnpm add @memvid/canvas-react @memvid/canvas-server// app/api/canvas/[...path]/route.ts
import { createCanvasCatchAll } from '@memvid/canvas-server/next';
import { loadSettings, getApiKey, resolvePath } from '@memvid/canvas-core';
const basePath = process.cwd();
export const { GET, POST, OPTIONS } = createCanvasCatchAll({
basePath,
config: () => {
const settings = loadSettings(basePath);
const provider = settings?.llmProvider || 'openai';
const memoryPath = resolvePath(settings?.memoryPath || './data/memory.mv2', basePath);
return {
llm: {
provider,
apiKey: getApiKey(provider) || '',
model: settings?.llmModel,
},
memory: memoryPath,
};
},
});// app/page.tsx
'use client';
import { CanvasShell } from '@memvid/canvas-react/components';
import '@memvid/canvas-react/styles/canvas.css';
export default function Page() {
return <CanvasShell apiBasePath="/api/canvas" />;
}# .env.local
OPENAI_API_KEY=sk-...
# or
ANTHROPIC_API_KEY=sk-ant-...- Search - Semantic, lexical, and hybrid search across your documents
- Chat - RAG-powered chat with source citations
- Dashboard - Memory statistics and timeline view
- File Upload - Ingest PDFs, DOCX, XLSX, TXT, MD, JSON, and more
- Dark/Light Mode - Built-in theme support
- Customizable - Slots, hooks, and CSS variables for full control
┌─────────────────────────────────────────────────────────────┐
│ 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) │
└─────────────────────────────────────────────────────────────┘
The server package creates these endpoints:
| Endpoint | Method | Description |
|---|---|---|
/api/canvas/chat |
POST | Chat with memory context |
/api/canvas/search |
POST | Search documents |
/api/canvas/ingest |
POST | Upload and ingest files |
/api/canvas/memory |
GET | Memory info and stats |
/api/canvas/stats |
GET | Detailed statistics |
/api/canvas/settings |
GET/POST | Settings management |
Canvas can ingest:
- Documents: PDF, DOCX, DOC, TXT, MD
- Spreadsheets: XLSX, XLS, CSV
- Presentations: PPTX, PPT
- Data: JSON, XML, YAML
// Use absolute path for consistency
const memoryPath = path.join(process.cwd(), 'data', 'memory.mv2');{
llm: {
provider: 'openai', // 'openai' | 'anthropic' | 'google'
model: 'gpt-4o-mini', // or 'claude-sonnet-4-20250514', etc.
apiKey: process.env.OPENAI_API_KEY,
}
}:root {
--canvas-primary: #818cf8;
--canvas-accent: #22c55e;
--canvas-background: #09090b;
--canvas-surface: #18181b;
--canvas-border: #27272a;
--canvas-text: #fafafa;
--canvas-muted: #a1a1aa;
}# Clone
git clone https://github.com/memvid/canvas.git
cd canvas
# Install
pnpm install
# Build all packages
pnpm build
# Run demo
cd memvid-memory-demo
pnpm dev# Dry run (preview what would be published)
pnpm publish:dry
# Publish all packages to npm
pnpm publish:all- Memvid - Video-based memory for AI
- Documentation
- npm: @memvid/canvas-core
- npm: @memvid/canvas-react
- npm: @memvid/canvas-server
MIT