{"_id":"@atmate/sdk","name":"@atmate/sdk","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atmate/sdk","version":"1.0.0","description":"Embeddable SDK for app creation, preview, and AI chat functionality","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.esm.js","require":"./dist/index.js","types":"./dist/index.d.ts"},"./styles":"./styles/atmate-sdk.css","./package.json":"./package.json"},"scripts":{"build":"npm run clean && rollup -c","build:watch":"rollup -c -w","dev":"rollup -c -w","clean":"rimraf dist","prepublishOnly":"npm run validate && npm run build","validate":"npm run typecheck && npm run test","test":"jest --passWithNoTests","test:watch":"jest --watch","lint":"eslint \"**/*.{ts,tsx}\"","lint:fix":"eslint \"**/*.{ts,tsx}\" --fix","typecheck":"tsc --noEmit","format":"prettier --write \"**/*.{ts,tsx,js,json,md}\"","format:check":"prettier --check \"**/*.{ts,tsx,js,json,md}\""},"keywords":["react","sdk","app-builder","ai-chat","embeddable","typescript","low-code","no-code"],"author":{"name":"Atmate Team","email":"team@atmate.com"},"repository":{"type":"git","url":"git+https://gitlab.com/atmate-dev/atmate.git"},"bugs":{"url":"https://gitlab.com/atmate-dev/atmate/-/issues"},"homepage":"https://atmate.dev","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"clsx":"^1.2.1"},"devDependencies":{"@types/react":"^18.0.0","@types/react-dom":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.0.0","@typescript-eslint/parser":"^5.0.0","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.0.0","@rollup/plugin-typescript":"^8.0.0","eslint":"^8.0.0","eslint-plugin-react":"^7.0.0","eslint-plugin-react-hooks":"^4.0.0","jest":"^28.0.0","prettier":"^2.8.0","rimraf":"^3.0.0","rollup":"^2.0.0","rollup-plugin-dts":"^4.0.0","rollup-plugin-peer-deps-external":"^2.0.0","rollup-plugin-postcss":"^4.0.0","rollup-plugin-terser":"^7.0.0","typescript":"^4.7.0"},"engines":{"node":">=14.0.0"},"publishConfig":{"access":"public"},"_id":"@atmate/sdk@1.0.0","gitHead":"4f5170d6ba10a31dd921f1a6c1b448f0d2ca7968","_nodeVersion":"24.9.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-d3KDdGbFTi8d5U5lDqL9l/tiMm+haA9dsG3P+MYaDn6GPMJRg6cvVffflx27Y7cJ0gTAt9ZFgvkCKM4N38SmZg==","shasum":"9330ebf2a6d2e2d367006bdb01bbf69b7dd175db","tarball":"https://registry.npmjs.org/@atmate/sdk/-/sdk-1.0.0.tgz","fileCount":28,"unpackedSize":180185,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIC20AIfUgRM0ID996XyQju2liULu/LV3UMnCdQsehdtSAiEA5MOaWZZ1L5MhwGn2oyX1HRuSfilGintrzBCPOE+oKbs="}]},"_npmUser":{"name":"bhanuc","email":"bhanu423@gmail.com"},"directories":{},"maintainers":[{"name":"ritik_kumawat","email":"ritik@flipr.ai"},{"name":"bhanuc","email":"bhanu423@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/sdk_1.0.0_1762413372773_0.4482459104717669"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-06T07:16:12.638Z","1.0.0":"2025-11-06T07:16:13.005Z","modified":"2025-11-06T07:16:13.400Z"},"maintainers":[{"name":"ritik_kumawat","email":"ritik@flipr.ai"},{"name":"bhanuc","email":"bhanu423@gmail.com"}],"description":"Embeddable SDK for app creation, preview, and AI chat functionality","homepage":"https://atmate.dev","keywords":["react","sdk","app-builder","ai-chat","embeddable","typescript","low-code","no-code"],"repository":{"type":"git","url":"git+https://gitlab.com/atmate-dev/atmate.git"},"author":{"name":"Atmate Team","email":"team@atmate.com"},"bugs":{"url":"https://gitlab.com/atmate-dev/atmate/-/issues"},"readme":"# Atmate SDK\n\nThe 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.\n\n## Features\n\n- 🚀 **App Creation**: Embeddable app creation forms with framework selection\n- 👁️ **Live Preview**: Real-time app preview with fullscreen support\n- 💬 **AI Chat**: Interactive AI assistant for app development\n- 🎨 **Customizable**: Flexible theming and configuration options\n- 📱 **Responsive**: Mobile-friendly components\n- ⚡ **React Hooks**: Easy integration with React applications\n- 🔧 **TypeScript**: Full TypeScript support with comprehensive types\n\n## Quick Start\n\n### Installation\n\n```bash\nnpm install @atmate/sdk\n# or\nyarn add @atmate/sdk\n```\n\n### Basic Usage\n\n```typescript\nimport {\n  initialize,\n  AppCreator,\n  AppPreview,\n  AppChat,\n  AppBuilder\n} from '@atmate/sdk';\n\n// Initialize the SDK\ninitialize({\n  apiUrl: 'https://your-api-endpoint.com',\n  teamSlug: 'your-team',\n  authToken: 'your-auth-token', // optional\n  theme: {\n    primary: '#3b82f6',\n    background: '#ffffff',\n    text: '#1e293b',\n  },\n});\n\n// Use individual components\nfunction MyApp() {\n  return (\n    <div>\n      {/* App creation form */}\n      <AppCreator\n        companyId=\"your-company-id\"\n        onAppCreated={(app) => console.log('App created:', app)}\n      />\n\n      {/* App preview */}\n      <AppPreview\n        appId=\"app-id-here\"\n        config={{ allowFullscreen: true }}\n      />\n\n      {/* AI chat interface */}\n      <AppChat\n        appId=\"app-id-here\"\n        config={{ autoFocus: true }}\n      />\n\n      {/* Complete app builder */}\n      <AppBuilder\n        companyId=\"your-company-id\"\n        config={{ layout: 'split' }}\n      />\n    </div>\n  );\n}\n```\n\n## Components\n\n### AppCreator\n\nEmbeddable app creation form with framework selection and validation.\n\n```typescript\n<AppCreator\n  companyId=\"your-company-id\"\n  config={{\n    enabled: true,\n    showAdvancedOptions: false,\n    defaultFramework: 'nextjs',\n    allowFrameworkSelection: true,\n  }}\n  onAppCreated={(app) => {\n    console.log('New app created:', app);\n  }}\n  onError={(error) => {\n    console.error('Creation failed:', error);\n  }}\n/>\n```\n\n**Props:**\n- `companyId` (required): Company/team identifier\n- `config`: Configuration object for the creator\n- `className`: Additional CSS classes\n- `onAppCreated`: Callback when app is successfully created\n- `onError`: Callback for error handling\n\n### AppPreview\n\nLive preview component with fullscreen support and auto-refresh.\n\n```typescript\n<AppPreview\n  appId=\"your-app-id\"\n  config={{\n    enabled: true,\n    autoRefresh: true,\n    refreshInterval: 5000,\n    allowFullscreen: true,\n    showCode: true,\n  }}\n  onPreviewLoad={(url) => {\n    console.log('Preview loaded:', url);\n  }}\n  style={{ height: '600px' }}\n/>\n```\n\n**Props:**\n- `appId` (required): App identifier\n- `config`: Configuration object for the preview\n- `className`: Additional CSS classes\n- `style`: Inline styles\n- `onPreviewLoad`: Callback when preview loads\n- `onError`: Callback for error handling\n\n### AppChat\n\nInteractive AI chat interface for app development assistance.\n\n```typescript\n<AppChat\n  appId=\"your-app-id\"\n  config={{\n    enabled: true,\n    autoFocus: true,\n    allowImageUpload: false,\n    maxMessages: 100,\n    placeholder: \"Ask me anything about your app...\",\n  }}\n  onMessageSent={(message) => {\n    console.log('Message sent:', message);\n  }}\n  onMessageReceived={(message) => {\n    console.log('AI response:', message);\n  }}\n/>\n```\n\n**Props:**\n- `appId` (required): App identifier\n- `config`: Configuration object for the chat\n- `className`: Additional CSS classes\n- `style`: Inline styles\n- `onMessageSent`: Callback when user sends a message\n- `onMessageReceived`: Callback when AI responds\n- `onError`: Callback for error handling\n\n### AppBuilder\n\nComplete app development interface combining all components.\n\n```typescript\n<AppBuilder\n  companyId=\"your-company-id\"\n  appId=\"existing-app-id\" // optional\n  config={{\n    layout: 'split', // 'split', 'tabbed', or 'stacked'\n    showHeader: true,\n    headerTitle: 'App Builder',\n    chatPosition: 'right',\n    previewPosition: 'left',\n    resizable: true,\n  }}\n  onAppCreated={(app) => {\n    console.log('App created:', app);\n  }}\n  onAppUpdated={(app) => {\n    console.log('App updated:', app);\n  }}\n/>\n```\n\n**Props:**\n- `companyId` (required): Company/team identifier\n- `appId`: Existing app ID to load (optional)\n- `config`: Configuration object for the builder\n- `className`: Additional CSS classes\n- `style`: Inline styles\n- `onAppCreated`: Callback when new app is created\n- `onAppUpdated`: Callback when app is updated\n- `onError`: Callback for error handling\n\n## React Hooks\n\n### useAdorableApp\n\nHook for managing app state and operations.\n\n```typescript\nimport { useAdorableApp } from '@atmate/sdk';\n\nfunction MyComponent({ appId }) {\n  const { app, loading, error, refresh, updateApp } = useAdorableApp(appId);\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n\n  return (\n    <div>\n      <h1>{app?.name}</h1>\n      <p>Status: {app?.status}</p>\n      <button onClick={refresh}>Refresh</button>\n      <button onClick={() => updateApp({ description: 'Updated!' })}>\n        Update\n      </button>\n    </div>\n  );\n}\n```\n\n### useAppChat\n\nHook for managing chat functionality.\n\n```typescript\nimport { useAppChat } from '@atmate/sdk';\n\nfunction ChatComponent({ appId }) {\n  const { messages, loading, error, sendMessage, clearMessages } = useAppChat(appId);\n\n  return (\n    <div>\n      {messages.map(msg => (\n        <div key={msg.id}>\n          <strong>{msg.role}:</strong> {msg.content}\n        </div>\n      ))}\n\n      <button\n        onClick={() => sendMessage('Hello AI!')}\n        disabled={loading}\n      >\n        Send Message\n      </button>\n\n      <button onClick={clearMessages}>\n        Clear Chat\n      </button>\n    </div>\n  );\n}\n```\n\n### useAppPreview\n\nHook for managing app preview functionality.\n\n```typescript\nimport { useAppPreview } from '@atmate/sdk';\n\nfunction PreviewComponent({ appId }) {\n  const { previewUrl, loading, error, refresh } = useAppPreview(appId);\n\n  return (\n    <div>\n      {previewUrl ? (\n        <iframe src={previewUrl} width=\"100%\" height=\"400\" />\n      ) : (\n        <div>No preview available</div>\n      )}\n\n      <button onClick={refresh} disabled={loading}>\n        {loading ? 'Refreshing...' : 'Refresh Preview'}\n      </button>\n    </div>\n  );\n}\n```\n\n## Configuration\n\n### SDK Configuration\n\n```typescript\nimport { initialize } from '@atmate/sdk';\n\ninitialize({\n  // API endpoint (required)\n  apiUrl: 'https://your-api-endpoint.com',\n\n  // Team slug for API requests (required)\n  teamSlug: 'your-team',\n\n  // Optional authentication token\n  authToken: 'your-auth-token',\n\n  // Theme customization\n  theme: {\n    primary: '#3b82f6',\n    secondary: '#64748b',\n    background: '#ffffff',\n    text: '#1e293b',\n    border: '#e2e8f0',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n  },\n\n  // Global component configuration\n  components: {\n    appCreator: {\n      enabled: true,\n      showAdvancedOptions: false,\n    },\n    appPreview: {\n      enabled: true,\n      autoRefresh: true,\n      refreshInterval: 5000,\n    },\n    appChat: {\n      enabled: true,\n      allowImageUpload: false,\n      maxMessages: 100,\n    },\n  },\n\n  // Enable debug mode\n  debug: true,\n});\n```\n\n### Custom Styling\n\nThe SDK includes default CSS styles, but you can customize the appearance:\n\n```css\n/* Override CSS variables */\n:root {\n  --atmate-primary: #your-color;\n  --atmate-background: #your-bg;\n  --atmate-border-radius: 12px;\n}\n\n/* Custom component styles */\n.atmate-app-creator {\n  border: 2px solid #custom-border;\n}\n\n.atmate-button-primary {\n  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);\n}\n```\n\nOr disable default styles and provide your own:\n\n```typescript\n// Don't import the default CSS\nimport {\n  AppCreator,\n  AppPreview,\n  AppChat\n} from '@atmate/sdk/components';\n\n// Provide your own CSS classes\n<AppCreator\n  className=\"my-custom-creator\"\n  companyId=\"company-id\"\n/>\n```\n\n## Examples\n\n### Basic Integration\n\n```typescript\nimport React from 'react';\nimport { initialize, AppBuilder } from '@atmate/sdk';\n\n// Initialize once in your app\ninitialize({\n  apiUrl: process.env.REACT_APP_API_URL,\n  teamSlug: 'my-team',\n  theme: {\n    primary: '#6366f1',\n    background: '#f8fafc',\n  },\n});\n\nfunction App() {\n  return (\n    <div className=\"app\">\n      <h1>My App Builder</h1>\n      <AppBuilder\n        companyId=\"my-company\"\n        config={{\n          layout: 'split',\n          showHeader: true,\n          headerTitle: 'Build Your App',\n        }}\n        onAppCreated={(app) => {\n          console.log('New app:', app);\n          // Handle app creation (e.g., navigate to app page)\n        }}\n        style={{ height: '80vh' }}\n      />\n    </div>\n  );\n}\n\nexport default App;\n```\n\n### Custom Layout\n\n```typescript\nimport React, { useState } from 'react';\nimport { AppCreator, AppPreview, AppChat } from '@atmate/sdk';\n\nfunction CustomBuilder() {\n  const [currentApp, setCurrentApp] = useState(null);\n  const [activeTab, setActiveTab] = useState('create');\n\n  return (\n    <div className=\"custom-builder\">\n      <nav className=\"tabs\">\n        <button\n          onClick={() => setActiveTab('create')}\n          className={activeTab === 'create' ? 'active' : ''}\n        >\n          Create\n        </button>\n        {currentApp && (\n          <>\n            <button\n              onClick={() => setActiveTab('preview')}\n              className={activeTab === 'preview' ? 'active' : ''}\n            >\n              Preview\n            </button>\n            <button\n              onClick={() => setActiveTab('chat')}\n              className={activeTab === 'chat' ? 'active' : ''}\n            >\n              Chat\n            </button>\n          </>\n        )}\n      </nav>\n\n      <div className=\"tab-content\">\n        {activeTab === 'create' && (\n          <AppCreator\n            companyId=\"my-company\"\n            onAppCreated={(app) => {\n              setCurrentApp(app);\n              setActiveTab('chat');\n            }}\n          />\n        )}\n\n        {activeTab === 'preview' && currentApp && (\n          <AppPreview\n            appId={currentApp.id}\n            config={{ allowFullscreen: true }}\n          />\n        )}\n\n        {activeTab === 'chat' && currentApp && (\n          <AppChat\n            appId={currentApp.id}\n            config={{ autoFocus: true }}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n```\n\n### With Error Handling\n\n```typescript\nimport React, { useState } from 'react';\nimport { AppBuilder } from '@atmate/sdk';\n\nfunction BuilderWithErrorHandling() {\n  const [error, setError] = useState(null);\n\n  const handleError = (err) => {\n    console.error('SDK Error:', err);\n    setError(err.message);\n  };\n\n  const clearError = () => setError(null);\n\n  return (\n    <div>\n      {error && (\n        <div className=\"error-banner\">\n          <span>Error: {error}</span>\n          <button onClick={clearError}>×</button>\n        </div>\n      )}\n\n      <AppBuilder\n        companyId=\"my-company\"\n        config={{\n          layout: 'tabbed',\n          showHeader: true,\n        }}\n        onError={handleError}\n        onAppCreated={(app) => {\n          console.log('App created successfully:', app);\n          clearError();\n        }}\n      />\n    </div>\n  );\n}\n```\n\n## API Reference\n\n### Types\n\n```typescript\ninterface AdorableApp {\n  id: string;\n  name: string;\n  description?: string;\n  framework: string;\n  status: 'draft' | 'building' | 'deployed' | 'error';\n  previewUrl?: string;\n  deployUrl?: string;\n  sourceCode?: string;\n  companyId: string;\n  createdAt: string;\n  updatedAt: string;\n}\n\ninterface ChatMessage {\n  id: string;\n  role: 'user' | 'assistant' | 'system';\n  content: string;\n  images?: any[];\n  createdAt: string;\n}\n\ninterface SDKConfig {\n  apiUrl: string;\n  authToken?: string;\n  teamSlug?: string;\n  theme: SDKTheme;\n  components: ComponentConfigs;\n  debug?: boolean;\n}\n```\n\n### Utility Functions\n\n```typescript\nimport { createApp, getApp, sendChatMessage } from '@atmate/sdk';\n\n// Create a new app\nconst response = await createApp({\n  name: 'My App',\n  description: 'A great app',\n  framework: 'nextjs',\n  companyId: 'my-company',\n});\n\n// Get app details\nconst app = await getApp('app-id');\n\n// Send chat message\nconst chatResponse = await sendChatMessage('app-id', 'Hello AI!');\n```\n\n## Requirements\n\n- React 16.8+\n- TypeScript 4.0+ (optional but recommended)\n- Modern browser with ES6+ support\n\n## Support\n\n- 📚 [Documentation](https://docs.atmate.dev/sdk)\n- 🐛 [Issue Tracker](https://gitlab.com/atmate-dev/atmate/-/issues)\n- 💬 [Community Support](https://atmate.dev/community)\n- 📧 [Email Support](mailto:support@atmate.com)\n\n## License\n\nMIT License - see [LICENSE](LICENSE) file for details.","readmeFilename":"README.md","_rev":"1-fbed5e36d0a190046059f12e2c677d4c"}