What Frontend Frameworks Power Builder.io Agent Native?

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 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 demonstrates how the application initializes the Builder SDK and renders visual content within a Next.js page component:

// 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:

// 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:

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.

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