The built-in plugins are minimal and can be used as references for custom integrations.

Script injection pattern

Both Vite and Webpack plugins inject a module script into the HTML head:

• Vite: relativeAgentPlugin(src)
• Webpack: new RelativeAgentWebpackPlugin(src)

Each one injects:

<script async type="module" src="/vibeagent.js"></script>

Webpack agent bundle handler

WebpackVibeAgentHandlerPlugin registers a dev-server route that serves the built agent bundle at the injected URL (default /vibeagent.js). It resolves the bundle via @vibenv/vibe-agent/vibeagent.js using import.meta.resolve with a require.resolve fallback. Keep the injected script URL and handler route in sync.

Dev script injection

The dev plugins inject a local Vite entry for the agent UI:

• Vite: devAgentPlugin() injects http://localhost:5173/src/main.ts.
• Webpack: new DevAgentWebpackPlugin({ scriptUrl }) defaults to the same URL.

Project root injection

If your UI needs a project root constant, use the env provider plugins:

• Vite: agentEnvProviderVitePlugin() defines __PROJECT_ROOT__ via Vite define.
• Webpack: new AgentEnvProviderWebpackPlugin() defines __PROJECT_ROOT__ via DefinePlugin.