Are There Builder.io SDKs for Native Apps? A Complete Guide to Agent-Native

Yes, Builder.io provides a dedicated React Native SDK through the BuilderIO/agent-native repository that enables full integration of Builder.io experiences into iOS and Android applications.

The BuilderIO/agent-native repository delivers a comprehensive mobile SDK that brings Builder.io's visual editing and AI agent capabilities to native mobile platforms. This React Native-based solution allows developers to embed Builder.io components, actions, and real-time collaboration features directly into mobile applications using familiar React patterns.

React Native SDK Architecture

Shared Core Package

The mobile SDK leverages @agent-native/core as its foundation. In packages/core/src/client/index.ts, the core exports React hooks and utilities that work across both web and native environments. The mobile-specific package at packages/mobile-app imports these core utilities and re-exports them with React Native-compatible implementations.

Key hooks provided include:

• useAgentRouteState – Manages navigation state synchronization with Builder.io
• useActionQuery – Fetches data from Builder.io actions
• useActionMutation – Executes mutations and side effects (defined in packages/core/src/client/hooks/useActionMutation.ts)

Native Component Library

Builder.io provides platform-agnostic UI components specifically designed for mobile layouts. The AgentSidebar component, implemented in packages/core/src/client/components/AgentSidebar.tsx, renders natively on iOS and Android without platform-specific modifications. Additional components like AgentToggleButton and ExtensionsListPage are exported from the core client package and optimized for touch interfaces.

Installation and Configuration

Developers install the SDK via npm using the package defined in packages/mobile-app/package.json. The module publishes as @builder.io/mobile-app (aliased as @agent-native/mobile-app).

Configuration relies on standard React Native tooling:

• Metro bundler: Configured via packages/mobile-app/metro.config.js for module resolution
• Expo integration: The packages/mobile-app/eas.json file enables Expo Application Services builds and deployments

Implementation Examples

Provider Setup

Wrap your application root with AgentNativeProvider to establish the Builder.io connection and authentication context.

// App.tsx
import { AgentNativeProvider, AgentSidebar } from '@agent-native/core/client';
import { View } from 'react-native';

export default function App() {
  return (
    <AgentNativeProvider apiBaseUrl="https://api.builder.io">
      <View style={{ flex: 1 }}>
        <AgentSidebar />
        <MainContent />
      </View>
    </AgentNativeProvider>
  );
}

Action Handling with Hooks

Invoke Builder.io actions using the useActionMutation hook. This hook is located at packages/core/src/client/hooks/useActionMutation.ts and provides loading states, error handling, and response data.

import { useActionMutation } from '@agent-native/core/client';
import { Button, Text } from 'react-native';

function MainContent() {
  const [runAction, { data, loading, error }] = useActionMutation('custom-action');

  const handlePress = () => {
    runAction({ input: { query: 'search term' } });
  };

  return (
    <>
      <Text>{loading ? 'Processing...' : data?.result}</Text>
      <Button title="Execute Action" onPress={handlePress} />
      {error && <Text style={{ color: 'red' }}>{error.message}</Text>}
    </>
  );
}

File Upload Integration

The SDK integrates with Builder.io Connect for media handling. Use the uploadFile utility to leverage automatic provider registration for S3-compatible endpoints or native Builder.io storage.

import { uploadFile } from '@agent-native/core/client';
import * as ImagePicker from 'expo-image-picker';

async function handleImageUpload() {
  const result = await ImagePicker.launchImageLibraryAsync();
  if (!result.canceled) {
    const response = await fetch(result.uri);
    const blob = await response.blob();
    const fileUrl = await uploadFile(blob, {
      filename: 'photo.jpg',
      contentType: 'image/jpeg'
    });
    console.log('Uploaded to Builder.io:', fileUrl);
  }
}

Summary

• Builder.io provides a React Native SDK through the BuilderIO/agent-native repository for native iOS and Android integration.
• The architecture separates concerns with @agent-native/core handling universal logic while packages/mobile-app provides native-specific wrappers.
• Key implementation files include packages/core/src/client/index.ts for exports and packages/core/src/client/hooks/useActionMutation.ts for action handling.
• The SDK supports Builder.io Connect features including file uploads and real-time content syncing in mobile environments.
• Configuration is managed through standard React Native tooling via metro.config.js and eas.json.

Frequently Asked Questions

Does Builder.io support native iOS and Android development without React Native?

The Agent-Native SDK is specifically built for React Native applications. For pure native development using Swift, Objective-C, Kotlin, or Java, you would need to create React Native native modules to bridge the JavaScript-based SDK, or utilize Builder.io's REST APIs directly in native code.

What authentication methods does the mobile SDK support?

The mobile SDK inherits authentication capabilities from the core package, supporting Builder.io's standard API key and OAuth flows. The AgentNativeProvider component accepts authentication tokens and configuration props, enabling secure connections to Builder.io workspaces from mobile devices without storing credentials in native code.

Can I use Builder.io's visual editor with the native mobile SDK?

Yes, the SDK renders Builder.io components visually through the AgentSidebar and related components exported from packages/core/src/client/components/AgentSidebar.tsx. These components connect to Builder.io's visual editing interface, allowing content creators to modify mobile app experiences in real-time while seeing changes reflected immediately in the native app preview.

How does file uploading work in the native SDK compared to web?

The native SDK uses the same uploadFile utility as the web version, but automatically handles mobile-specific considerations like camera roll access and file system permissions. When connected to Builder.io, it registers the appropriate file upload provider (Builder.io native or custom S3-compatible endpoints) without requiring manual configuration differences from the web implementation.

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