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

> Discover the build tools powering Builder.io Agent Native. Learn how Vite and Rollup are used for efficient development and optimized production builds.

- Repository: [Builder.io/agent-native](https://github.com/BuilderIO/agent-native)
- Tags: deep-dive
- Published: 2026-07-18

---

**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`](https://github.com/BuilderIO/agent-native/blob/main/vite.config.ts) that imports the framework's core Vite preset and React plugins.

In [`templates/tasks/vite.config.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/tasks/vite.config.ts), the configuration sets up the Agent Native plugin alongside React Router:

```typescript
// 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`](https://github.com/BuilderIO/agent-native/blob/main/templates/slides/vite.config.ts) and [`templates/chat/vite.config.ts`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/templates/clips/chrome-extension/vite.config.ts), the build pipeline exposes `rollupOptions` for fine-grained control over the output bundles:

```typescript
// 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`](https://github.com/BuilderIO/agent-native/blob/main/templates/tasks/vite.config.ts), [`templates/slides/vite.config.ts`](https://github.com/BuilderIO/agent-native/blob/main/templates/slides/vite.config.ts), and [`templates/chat/vite.config.ts`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/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`](https://github.com/BuilderIO/agent-native/blob/main/vite.config.ts). The Chrome extension template demonstrates this pattern for customizing output bundles and handling extension-specific build requirements.