{"id":22764,"library":"vite-plugin-opencode-assistant","title":"vite-plugin-opencode-assistant","description":"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.","status":"active","version":"1.0.53","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vite","plugin","opencode","ai","assistant","chat","hmr","real-time","typescript"],"install":[{"cmd":"npm install vite-plugin-opencode-assistant","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-opencode-assistant","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-opencode-assistant","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency: requires Vite >=4.0.0 to run as a plugin","package":"vite","optional":false}],"imports":[{"note":"ESM-only; package is a Vite plugin with TypeScript types, default export only","wrong":"const opencodeAssistant = require('vite-plugin-opencode-assistant')","symbol":"opencodeAssistant","correct":"import opencodeAssistant from 'vite-plugin-opencode-assistant'"},{"note":"Type import required; do not import as value","wrong":"import { OpenCodeAssistantOptions } from 'vite-plugin-opencode-assistant'","symbol":"OpenCodeAssistantOptions","correct":"import type { OpenCodeAssistantOptions } from 'vite-plugin-opencode-assistant'"},{"note":"Type import for the OpenCode settings object structure","wrong":"import { DefaultOpenCodeSettings } from 'vite-plugin-opencode-assistant'","symbol":"DefaultOpenCodeSettings","correct":"import type { DefaultOpenCodeSettings } from 'vite-plugin-opencode-assistant'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport opencodeAssistant from 'vite-plugin-opencode-assistant';\n\nexport default defineConfig({\n  plugins: [\n    opencodeAssistant({\n      enabled: true,\n      webPort: 5097,\n      proxyPort: 6097,\n      hostname: '127.0.0.1',\n      theme: 'auto',\n      hotkey: 'ctrl+k',\n      warmupChromeMcp: true,\n    }),\n  ],\n});","lang":"typescript","description":"Minimal Vite config with opencode-assistant plugin and customizable options for OpenCode Web UI integration."},"warnings":[{"fix":"Upgrade Vite to >=4.0.0.","message":"vite-plugin-opencode-assistant requires Vite >=4.0.0; using with older versions will cause plugin loading failures.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Install OpenCode CLI: curl -fsSL https://opencode.ai/install | bash","message":"OpenCode CLI must be installed separately (via curl, npm, or brew) before the plugin can start its services.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Use default import: import opencodeAssistant from 'vite-plugin-opencode-assistant'","message":"The plugin uses default export only; named exports are types. Attempting to destructure a named function will result in undefined.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Configure distinct ports or ensure proxyPort is available.","message":"Proxy port (proxyPort) must not conflict with other local services; if the port is in use, the plugin may fail silently.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run `npm install -D vite-plugin-opencode-assistant` in your project root.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'vite-plugin-opencode-assistant'"},{"fix":"Use `import opencodeAssistant from 'vite-plugin-opencode-assistant'` instead of `import { opencodeAssistant } from ...`","cause":"Probably using named import instead of default import.","error":"TypeError: opencodeAssistant is not a function"},{"fix":"Switch to ESM (use import statement) or configure your project to support ESM.","cause":"Using CommonJS require() to import an ESM-only package.","error":"Error: require() of ES Module not supported"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}