What Build Tools and Bundlers Power Builder.io Agent Native?

Builder.io Agent Native uses Vite as its primary build tool and bundler, leveraging Rollup internally for production optimization.

The BuilderIO/agent-native repository employs a modern, ES-module-first build pipeline centered on Vite. This configuration provides fast cold starts during development and highly optimized production bundles across all template applications, from task managers to Chrome extensions.

Vite as the Primary Build Tool

Development Server and Production Bundler

Vite serves as both the development server and the production bundler for every template in the Agent Native ecosystem. Each template directory contains a vite.config.ts that imports the framework's core Vite preset and React plugins.

In templates/tasks/vite.config.ts, the configuration sets up the Agent Native plugin alongside React Router:

// templates/tasks/vite.config.ts
import { agentNative } from "@agent-native/core/vite";
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [agentNative(), reactRouter()],
});

This pattern repeats across templates/slides/vite.config.ts and templates/chat/vite.config.ts, ensuring consistent build behavior throughout the monorepo.

Version Requirements and Constraints

The core package enforces strict Vite version compatibility. In packages/core/package.json, the dependency declaration specifies "vite": ">=7" with a locked version at "8.1.0" in the core package itself. This constraint guarantees that all Agent Native applications benefit from Vite's latest performance improvements and plugin APIs.

Rollup Integration for Production Optimization

While Vite handles the development experience, it delegates production bundling to Rollup. This architecture gives Agent Native projects access to Rollup's advanced tree-shaking capabilities and extensive plugin ecosystem without requiring复杂的 manual configuration.

Custom Rollup Configuration in Chrome Extensions

The Chrome extension template demonstrates how to pass custom Rollup options through Vite's configuration layer. In templates/clips/chrome-extension/vite.config.ts, the build pipeline exposes rollupOptions for fine-grained control over the output bundles:

// templates/clips/chrome-extension/vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      // Custom Rollup configuration for extension-specific output
    },
  },
});

This approach allows developers to modify chunking strategies, external dependencies, and output formats while maintaining Vite's developer-friendly interface.

Testing Infrastructure

For testing compiled code, the repository uses Vitest, a Vite-native test runner. While Vitest shares Vite's configuration and plugin pipeline, it functions strictly as a test execution environment rather than a bundler, keeping the build tool responsibilities clearly separated.

Summary

• Vite provides the primary development server and production bundling for all Agent Native templates.
• Rollup powers Vite's production builds, offering advanced tree-shaking and output optimization.
• Template configurations in templates/tasks/vite.config.ts, templates/slides/vite.config.ts, and templates/chat/vite.config.ts import @agent-native/core/vite and @react-router/dev/vite plugins.
• The core package requires Vite version >=7 (specifically locked to 8.1.0) to ensure consistent build behavior.
• Vitest handles testing duties but does not participate in the bundling process.

Frequently Asked Questions

Does Builder.io Agent Native use Webpack?

No. The BuilderIO/agent-native repository exclusively uses Vite for bundling, not Webpack. All template applications and the core framework rely on Vite's native ES module dev server and its Rollup-based production builds.

What version of Vite is required for Agent Native?

Agent Native requires Vite version 7 or higher. The packages/core/package.json specifically declares "vite": ">=7" as a dependency, with the current implementation tested against version 8.1.0 to ensure compatibility with the latest plugin APIs.

How does Vite handle React compilation in Agent Native?

Agent Native templates use the @vitejs/plugin-react-swc plugin (referenced through the core Vite preset) to enable React Fast Refresh and SWC-based compilation. This setup provides instant feedback during development and optimized builds for production, as seen in the vite.config.ts files across all template directories.

Can I customize the Rollup configuration in Agent Native projects?

Yes. While Vite abstracts most bundling concerns, you can access the underlying Rollup configuration through the build.rollupOptions field in your vite.config.ts. The Chrome extension template demonstrates this pattern for customizing output bundles and handling extension-specific build requirements.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}