vite-plugin-opencode-assistant

1.0.53 verified Mon Apr 27 auth: no javascript

A Vite plugin that embeds an OpenCode AI assistant panel directly into your dev server page, enabling real-time code modification through chat and instant preview via HMR. Current stable version is 1.0.53, released with a weekly cadence. Key differentiators: automatic session management, element selector for component source context, proxy service for cross-origin iframe support, and Chrome DevTools MCP warmup. Requires the OpenCode CLI to be installed separately and Vite >=4.0.0 as a peer dependency. Ships TypeScript types and supports configuration for theme, hotkeys, and language.

Common errors

error Error: Cannot find module 'vite-plugin-opencode-assistant' ↓

cause Package not installed or not in node_modules.

fix

Run npm install -D vite-plugin-opencode-assistant in your project root.

error TypeError: opencodeAssistant is not a function ↓

cause Probably using named import instead of default import.

fix

Use import opencodeAssistant from 'vite-plugin-opencode-assistant' instead of import { opencodeAssistant } from ...

error Error: require() of ES Module not supported ↓

cause Using CommonJS require() to import an ESM-only package.

fix

Switch to ESM (use import statement) or configure your project to support ESM.

Warnings

breaking vite-plugin-opencode-assistant requires Vite >=4.0.0; using with older versions will cause plugin loading failures. ↓

fix Upgrade Vite to >=4.0.0.

breaking OpenCode CLI must be installed separately (via curl, npm, or brew) before the plugin can start its services. ↓

fix Install OpenCode CLI: curl -fsSL https://opencode.ai/install | bash

gotcha The plugin uses default export only; named exports are types. Attempting to destructure a named function will result in undefined. ↓

fix Use default import: import opencodeAssistant from 'vite-plugin-opencode-assistant'

gotcha Proxy port (proxyPort) must not conflict with other local services; if the port is in use, the plugin may fail silently. ↓

fix Configure distinct ports or ensure proxyPort is available.

Install

npm install vite-plugin-opencode-assistant

yarn add vite-plugin-opencode-assistant

pnpm add vite-plugin-opencode-assistant

Imports

opencodeAssistant

wrong

const opencodeAssistant = require('vite-plugin-opencode-assistant')

correct

import opencodeAssistant from 'vite-plugin-opencode-assistant'

ESM-only; package is a Vite plugin with TypeScript types, default export only

OpenCodeAssistantOptions

wrong

import { OpenCodeAssistantOptions } from 'vite-plugin-opencode-assistant'

correct

import type { OpenCodeAssistantOptions } from 'vite-plugin-opencode-assistant'

Type import required; do not import as value

DefaultOpenCodeSettings

wrong

import { DefaultOpenCodeSettings } from 'vite-plugin-opencode-assistant'

correct

import type { DefaultOpenCodeSettings } from 'vite-plugin-opencode-assistant'

Type import for the OpenCode settings object structure

Quickstart

Minimal Vite config with opencode-assistant plugin and customizable options for OpenCode Web UI integration.

// vite.config.ts
import { defineConfig } from 'vite';
import opencodeAssistant from 'vite-plugin-opencode-assistant';

export default defineConfig({
  plugins: [
    opencodeAssistant({
      enabled: true,
      webPort: 5097,
      proxyPort: 6097,
      hostname: '127.0.0.1',
      theme: 'auto',
      hotkey: 'ctrl+k',
      warmupChromeMcp: true,
    }),
  ],
});