# What Frontend Frameworks Power Builder.io Agent Native?

> Discover the frontend frameworks powering Builder.io Agent Native. Learn how React, Next.js, and shadcn/ui create its dynamic interface.

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

---

**Builder.io Agent Native is built on React and Next.js, utilizing a Nitro-based server-side rendering layer, shadcn/ui for UI primitives, and Tabler Icons for iconography.**

Builder.io Agent Native leverages a modern React ecosystem to deliver its AI-powered development interface. The repository implements a Next.js architecture that combines server-side rendering capabilities with a component-based React frontend. Understanding the specific frontend frameworks used in Builder.io Agent Native helps developers contribute effectively and extend the platform's visualization capabilities.

## Core Frontend Stack: React and Next.js

According to the source code, the core UI is a **React** application running on **Next.js**, leveraging the Nitro server-side rendering layer. The root [`package.json`](https://github.com/BuilderIO/agent-native/blob/main/package.json) declares the primary dependencies:

- `react` & `react-dom` – The foundational UI library used throughout the codebase.
- `next` – Provides routing, server-side rendering (SSR), static generation, and API routes.
- `@builder.io/react` – The Builder.io React SDK for rendering Builder-generated content.

## UI Component Architecture

The project extends React's capabilities with specialized UI libraries for consistent design.

### shadcn/ui Primitives

The codebase uses **shadcn/ui** for foundational UI components. These React components reside in `packages/core/src/components/` and provide TypeScript-typed primitives that are imported into views across the application.

### Tabler Icons

For iconography, the project imports **Tabler Icons** as React components, enabling vector-based icons to integrate directly into the JSX component tree without additional font loading.

## Builder.io SDK Integration

The frontend consumes `@builder.io/react` to fetch and render visual content created in the Builder.io visual editor. This integration allows the React application to consume JSON-based content models and render them as interactive components within the Next.js page structure.

## Project Structure and Key Files

The frontend code is organized across several directories to separate concerns:

- **`app/`** – Contains client-side Next.js pages and application entry points.
- **`packages/core/src/`** – Houses shared React UI primitives, hooks, and utilities.
- **`packages/code-agents-ui/`** – Contains React components specific to the Agent UI interface.
- **`packages/dispatch/`** – Defines action definitions that frontend components call via `useActionQuery` and `useActionMutation` hooks.

## Implementation Examples

### Rendering Builder.io Content in a Next.js Page

The following snippet from [`app/pages/index.tsx`](https://github.com/BuilderIO/agent-native/blob/main/app/pages/index.tsx) demonstrates how the application initializes the Builder SDK and renders visual content within a Next.js page component:

```tsx
// app/pages/index.tsx
import { BuilderComponent, builder } from '@builder.io/react';
import type { NextPage } from 'next';

// Configure Builder.io (API key is set via env var)
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY ?? '');

const HomePage: NextPage = () => (
  <main className="p-8">
    {/* Render a Builder.io model named “page” */}
    <BuilderComponent model="page" />
  </main>
);

export default HomePage;

```

### Using shadcn/ui Components

Components in `packages/core/src/components/` wrap shadcn/ui primitives to maintain consistent styling. The example below shows a button component extending the shadcn implementation:

```tsx
// packages/core/src/components/Button.tsx
import { Button as ShadcnButton } from '@/components/ui/button';

export const Button = (props: React.ComponentProps<typeof ShadcnButton>) => (
  <ShadcnButton {...props} />
);

```

### Embedding Tabler Icons

Icons are imported as React components from `tabler-icons-react` and used inline with standard JSX syntax:

```tsx
import { ArrowRight } from 'tabler-icons-react';

export const LearnMoreLink = () => (
  <a href="/learn" className="flex items-center gap-1">
    Learn more <ArrowRight size={16} />
  </a>
);

```

## Summary

Builder.io Agent Native utilizes a modern, type-safe frontend stack designed for scalability:

- **React and Next.js** form the core framework, providing component architecture and server-side rendering via the Nitro layer implemented in the repository.
- **shadcn/ui** delivers accessible, customizable UI primitives stored in `packages/core/src/components/`.
- **Tabler Icons** supplies the iconography as React components imported from `tabler-icons-react`.
- **@builder.io/react** enables seamless integration with the Builder.io visual CMS for content rendering.
- Component code is distributed across `app/`, `packages/core/`, and `packages/code-agents-ui/` directories to separate page logic from shared UI.

## Frequently Asked Questions

### What frontend frameworks does Builder.io Agent Native use?

Builder.io Agent Native uses **React** as the UI library and **Next.js** as the application framework. The implementation leverages Next.js for routing, API routes, and server-side rendering through the Nitro layer mentioned in the source configuration.

### How are UI components implemented in Builder.io Agent Native?

The project uses **shadcn/ui** for base components like buttons and inputs, which are wrapped and extended in `packages/core/src/components/`. All components are written in TypeScript and follow React functional component patterns with strict typing.

### Where is the frontend source code located in the repository?

Client-side code resides primarily in the `app/` directory for Next.js pages, while shared reusable components live in `packages/core/src/` and Agent-specific UI components are housed in `packages/code-agents-ui/`. Action handlers used by the frontend are defined in `packages/dispatch/`.

### What icon library does Builder.io Agent Native use?

The frontend uses **Tabler Icons** imported as React components from the `tabler-icons-react` package. This approach allows SVG icons to be rendered directly within the React component tree without requiring external font files or CSS.