viagen

A Vite plugin that embeds Claude Code into your dev server. Chat with Claude to build, edit, and fix your app in real time.

npm install viagen

Setup

// vite.config.ts
import { defineConfig } from 'vite'
import { viagen } from 'viagen'

export default defineConfig({
  plugins: [viagen()],
})

Features

Sandbox

Deploy to a remote Vercel Sandbox with one command. Token-based auth on all endpoints.

Zero config

One plugin, one env var. No framework dependency — works with any Vite project.

Chat panel

Built-in chat UI injected into your page. Ask Claude to build features, fix bugs, refactor code.

Error overlay

"Fix This Error" button on Vite's error overlay. One click and Claude starts fixing.

Full tool access

Claude can read, write, edit files, run commands, and search your codebase.

Streaming SSE

Real-time streamed responses. Watch Claude think and work through your codebase.

Sandbox

Deploy your dev server to a remote Vercel Sandbox — an isolated microVM with full tool access and token-based auth on every endpoint.

# Prerequisites: ANTHROPIC_API_KEY in .env
# + Vercel auth (pick one):
vercel link && vercel env pull
# or set VERCEL_TOKEN, VERCEL_TEAM_ID, VERCEL_PROJECT_ID

# Deploy
npx viagen sandbox

# Stop
npx viagen sandbox stop <sandboxId>

Options

viagen({
  position: 'bottom-right',  // toggle button position
  model: 'sonnet',           // claude model
  panelWidth: 420,           // chat panel width in px
  overlay: true,             // fix button on error overlay
  ui: true,                  // inject chat panel into pages
})

API

POST /via/chat        — send a message, streamed SSE response
POST /via/chat/reset  — clear conversation history
GET  /via/health      — check API key status
GET  /via/error       — latest build error (if any)
GET  /via/ui          — standalone chat interface

GitHub npm