Atmate SDK

The Atmate SDK allows you to embed powerful app creation, preview, and AI chat functionality into your own applications. Build complete app development workflows with just a few lines of code.

Features

• 🚀 App Creation: Embeddable app creation forms with framework selection
• 👁️ Live Preview: Real-time app preview with fullscreen support
• 💬 AI Chat: Interactive AI assistant for app development
• 🎨 Customizable: Flexible theming and configuration options
• 📱 Responsive: Mobile-friendly components
• ⚡ React Hooks: Easy integration with React applications
• 🔧 TypeScript: Full TypeScript support with comprehensive types

Quick Start

Installation

npm install @atmate/sdk
# or
yarn add @atmate/sdk

Basic Usage

import {
  initialize,
  AppCreator,
  AppPreview,
  AppChat,
  AppBuilder
} from '@atmate/sdk';

// Initialize the SDK
initialize({
  apiUrl: 'https://your-api-endpoint.com',
  teamSlug: 'your-team',
  authToken: 'your-auth-token', // optional
  theme: {
    primary: '#3b82f6',
    background: '#ffffff',
    text: '#1e293b',
  },
});

// Use individual components
function MyApp() {
  return (
    <div>
      {/* App creation form */}
      <AppCreator
        companyId="your-company-id"
        onAppCreated={(app) => console.log('App created:', app)}
      />

      {/* App preview */}
      <AppPreview
        appId="app-id-here"
        config={{ allowFullscreen: true }}
      />

      {/* AI chat interface */}
      <AppChat
        appId="app-id-here"
        config={{ autoFocus: true }}
      />

      {/* Complete app builder */}
      <AppBuilder
        companyId="your-company-id"
        config={{ layout: 'split' }}
      />
    </div>
  );
}

Components

AppCreator

Embeddable app creation form with framework selection and validation.

<AppCreator
  companyId="your-company-id"
  config={{
    enabled: true,
    showAdvancedOptions: false,
    defaultFramework: 'nextjs',
    allowFrameworkSelection: true,
  }}
  onAppCreated={(app) => {
    console.log('New app created:', app);
  }}
  onError={(error) => {
    console.error('Creation failed:', error);
  }}
/>

Props:

• companyId (required): Company/team identifier
• config: Configuration object for the creator
• className: Additional CSS classes
• onAppCreated: Callback when app is successfully created
• onError: Callback for error handling

AppPreview

Live preview component with fullscreen support and auto-refresh.

<AppPreview
  appId="your-app-id"
  config={{
    enabled: true,
    autoRefresh: true,
    refreshInterval: 5000,
    allowFullscreen: true,
    showCode: true,
  }}
  onPreviewLoad={(url) => {
    console.log('Preview loaded:', url);
  }}
  style={{ height: '600px' }}
/>

Props:

• appId (required): App identifier
• config: Configuration object for the preview
• className: Additional CSS classes
• style: Inline styles
• onPreviewLoad: Callback when preview loads
• onError: Callback for error handling

AppChat

Interactive AI chat interface for app development assistance.

<AppChat
  appId="your-app-id"
  config={{
    enabled: true,
    autoFocus: true,
    allowImageUpload: false,
    maxMessages: 100,
    placeholder: "Ask me anything about your app...",
  }}
  onMessageSent={(message) => {
    console.log('Message sent:', message);
  }}
  onMessageReceived={(message) => {
    console.log('AI response:', message);
  }}
/>

Props:

• appId (required): App identifier
• config: Configuration object for the chat
• className: Additional CSS classes
• style: Inline styles
• onMessageSent: Callback when user sends a message
• onMessageReceived: Callback when AI responds
• onError: Callback for error handling

AppBuilder

Complete app development interface combining all components.

<AppBuilder
  companyId="your-company-id"
  appId="existing-app-id" // optional
  config={{
    layout: 'split', // 'split', 'tabbed', or 'stacked'
    showHeader: true,
    headerTitle: 'App Builder',
    chatPosition: 'right',
    previewPosition: 'left',
    resizable: true,
  }}
  onAppCreated={(app) => {
    console.log('App created:', app);
  }}
  onAppUpdated={(app) => {
    console.log('App updated:', app);
  }}
/>

Props:

• companyId (required): Company/team identifier
• appId: Existing app ID to load (optional)
• config: Configuration object for the builder
• className: Additional CSS classes
• style: Inline styles
• onAppCreated: Callback when new app is created
• onAppUpdated: Callback when app is updated
• onError: Callback for error handling

React Hooks

useAdorableApp

Hook for managing app state and operations.

import { useAdorableApp } from '@atmate/sdk';

function MyComponent({ appId }) {
  const { app, loading, error, refresh, updateApp } = useAdorableApp(appId);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>{app?.name}</h1>
      <p>Status: {app?.status}</p>
      <button onClick={refresh}>Refresh</button>
      <button onClick={() => updateApp({ description: 'Updated!' })}>
        Update
      </button>
    </div>
  );
}

useAppChat

Hook for managing chat functionality.

import { useAppChat } from '@atmate/sdk';

function ChatComponent({ appId }) {
  const { messages, loading, error, sendMessage, clearMessages } = useAppChat(appId);

  return (
    <div>
      {messages.map(msg => (
        <div key={msg.id}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}

      <button
        onClick={() => sendMessage('Hello AI!')}
        disabled={loading}
      >
        Send Message
      </button>

      <button onClick={clearMessages}>
        Clear Chat
      </button>
    </div>
  );
}

useAppPreview

Hook for managing app preview functionality.

import { useAppPreview } from '@atmate/sdk';

function PreviewComponent({ appId }) {
  const { previewUrl, loading, error, refresh } = useAppPreview(appId);

  return (
    <div>
      {previewUrl ? (
        <iframe src={previewUrl} width="100%" height="400" />
      ) : (
        <div>No preview available</div>
      )}

      <button onClick={refresh} disabled={loading}>
        {loading ? 'Refreshing...' : 'Refresh Preview'}
      </button>
    </div>
  );
}

Configuration

SDK Configuration

import { initialize } from '@atmate/sdk';

initialize({
  // API endpoint (required)
  apiUrl: 'https://your-api-endpoint.com',

  // Team slug for API requests (required)
  teamSlug: 'your-team',

  // Optional authentication token
  authToken: 'your-auth-token',

  // Theme customization
  theme: {
    primary: '#3b82f6',
    secondary: '#64748b',
    background: '#ffffff',
    text: '#1e293b',
    border: '#e2e8f0',
    success: '#10b981',
    warning: '#f59e0b',
    error: '#ef4444',
  },

  // Global component configuration
  components: {
    appCreator: {
      enabled: true,
      showAdvancedOptions: false,
    },
    appPreview: {
      enabled: true,
      autoRefresh: true,
      refreshInterval: 5000,
    },
    appChat: {
      enabled: true,
      allowImageUpload: false,
      maxMessages: 100,
    },
  },

  // Enable debug mode
  debug: true,
});

Custom Styling

The SDK includes default CSS styles, but you can customize the appearance:

/* Override CSS variables */
:root {
  --atmate-primary: #your-color;
  --atmate-background: #your-bg;
  --atmate-border-radius: 12px;
}

/* Custom component styles */
.atmate-app-creator {
  border: 2px solid #custom-border;
}

.atmate-button-primary {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

Or disable default styles and provide your own:

// Don't import the default CSS
import {
  AppCreator,
  AppPreview,
  AppChat
} from '@atmate/sdk/components';

// Provide your own CSS classes
<AppCreator
  className="my-custom-creator"
  companyId="company-id"
/>

Examples

Basic Integration

import React from 'react';
import { initialize, AppBuilder } from '@atmate/sdk';

// Initialize once in your app
initialize({
  apiUrl: process.env.REACT_APP_API_URL,
  teamSlug: 'my-team',
  theme: {
    primary: '#6366f1',
    background: '#f8fafc',
  },
});

function App() {
  return (
    <div className="app">
      <h1>My App Builder</h1>
      <AppBuilder
        companyId="my-company"
        config={{
          layout: 'split',
          showHeader: true,
          headerTitle: 'Build Your App',
        }}
        onAppCreated={(app) => {
          console.log('New app:', app);
          // Handle app creation (e.g., navigate to app page)
        }}
        style={{ height: '80vh' }}
      />
    </div>
  );
}

export default App;

Custom Layout

import React, { useState } from 'react';
import { AppCreator, AppPreview, AppChat } from '@atmate/sdk';

function CustomBuilder() {
  const [currentApp, setCurrentApp] = useState(null);
  const [activeTab, setActiveTab] = useState('create');

  return (
    <div className="custom-builder">
      <nav className="tabs">
        <button
          onClick={() => setActiveTab('create')}
          className={activeTab === 'create' ? 'active' : ''}
        >
          Create
        </button>
        {currentApp && (
          <>
            <button
              onClick={() => setActiveTab('preview')}
              className={activeTab === 'preview' ? 'active' : ''}
            >
              Preview
            </button>
            <button
              onClick={() => setActiveTab('chat')}
              className={activeTab === 'chat' ? 'active' : ''}
            >
              Chat
            </button>
          </>
        )}
      </nav>

      <div className="tab-content">
        {activeTab === 'create' && (
          <AppCreator
            companyId="my-company"
            onAppCreated={(app) => {
              setCurrentApp(app);
              setActiveTab('chat');
            }}
          />
        )}

        {activeTab === 'preview' && currentApp && (
          <AppPreview
            appId={currentApp.id}
            config={{ allowFullscreen: true }}
          />
        )}

        {activeTab === 'chat' && currentApp && (
          <AppChat
            appId={currentApp.id}
            config={{ autoFocus: true }}
          />
        )}
      </div>
    </div>
  );
}

With Error Handling

import React, { useState } from 'react';
import { AppBuilder } from '@atmate/sdk';

function BuilderWithErrorHandling() {
  const [error, setError] = useState(null);

  const handleError = (err) => {
    console.error('SDK Error:', err);
    setError(err.message);
  };

  const clearError = () => setError(null);

  return (
    <div>
      {error && (
        <div className="error-banner">
          <span>Error: {error}</span>
          <button onClick={clearError}>×</button>
        </div>
      )}

      <AppBuilder
        companyId="my-company"
        config={{
          layout: 'tabbed',
          showHeader: true,
        }}
        onError={handleError}
        onAppCreated={(app) => {
          console.log('App created successfully:', app);
          clearError();
        }}
      />
    </div>
  );
}

API Reference

Types

interface AdorableApp {
  id: string;
  name: string;
  description?: string;
  framework: string;
  status: 'draft' | 'building' | 'deployed' | 'error';
  previewUrl?: string;
  deployUrl?: string;
  sourceCode?: string;
  companyId: string;
  createdAt: string;
  updatedAt: string;
}

interface ChatMessage {
  id: string;
  role: 'user' | 'assistant' | 'system';
  content: string;
  images?: any[];
  createdAt: string;
}

interface SDKConfig {
  apiUrl: string;
  authToken?: string;
  teamSlug?: string;
  theme: SDKTheme;
  components: ComponentConfigs;
  debug?: boolean;
}

Utility Functions

import { createApp, getApp, sendChatMessage } from '@atmate/sdk';

// Create a new app
const response = await createApp({
  name: 'My App',
  description: 'A great app',
  framework: 'nextjs',
  companyId: 'my-company',
});

// Get app details
const app = await getApp('app-id');

// Send chat message
const chatResponse = await sendChatMessage('app-id', 'Hello AI!');

Requirements

• React 16.8+
• TypeScript 4.0+ (optional but recommended)
• Modern browser with ES6+ support

Support

• 📚 Documentation
• 🐛 Issue Tracker
• 💬 Community Support
• 📧 Email Support

License

MIT License - see LICENSE file for details.