Adorable

Adorable is a next-generation, AI-powered IDE for Angular. It allows you to build, preview, and deploy full-stack Angular applications using natural language, powered by Claude 3.5 Sonnet, Google Gemini, and a flexible execution engine supporting both WebContainers and Docker.

🚀 Key Features

• Natural Language IDE: Describe your app and watch Adorable build the file structure, logic, and styles in real-time.
• Figma Integration 🎨: Import designs directly from Figma and let AI generate Angular components.
  • API Import: Connect with your Figma Personal Access Token to browse and select frames.
  • Plugin Export: Use the Adorable Figma Plugin for local exports without API rate limits.
  • Layer Selection: Browse imported design layers, preview highlights on hover, and select individual layers to use in chat.
  • Persistent Imports: Figma imports are saved with your project for future reference.
• Dual Runtime Engines:
  • Browser-based: Powered by WebContainer API for zero-setup, instant booting.
  • Local Docker: Multi-tenant containerized execution for persistent, high-performance development.
• Smart Lifecycle Management 🧠: (Local Mode) Background reaper automatically pauses idle containers (15m) and hibernates them (2h) to save CPU/RAM.
• Streaming XML Protocol: Ultra-fast, token-efficient code generation using a custom streaming protocol.
• Visual Inspector 🔍: Click elements in your live app to identify their Angular components and ask the AI for targeted visual edits.
• Annotation Overlay ✏️: Draw directly on the preview to communicate design intent to the AI — freehand pen, arrows, rectangles, and editable text labels with drag-to-move, double-click-to-edit, and delete support.
• Interactive Terminal 💻: Subdivided terminal with dedicated tabs for Server Logs, Interactive Shell, and Browser Console.
• One-Click Publishing 📤: Build your app and publish it to a live, shareable URL instantly.
• GitHub Integration 🐙: Full GitHub sync and deployment support:
  • Connect Repositories: Link projects to new or existing GitHub repos.
  • Push/Pull Sync: Two-way sync between Adorable and GitHub.
  • GitHub Pages Deployment: One-click deploy to GitHub Pages with automatic workflow generation.
• Open in VS Code 💻: (Docker Mode) Open your project directly in VS Code — either as a local folder or by attaching to the running Docker container with Dev Containers. File changes made in VS Code are automatically synced back to Adorable's file tree in real-time.
• Monaco Editor: A VS Code-powered editing experience with live sync to the preview.
• Time Travel Snapshots: Restore your project to any previous state in the chat history.

🏗 Architecture

Adorable is built as an Nx monorepo:

• Frontend (apps/client):
  • Angular 21 (Signals-based).
  • SmartContainerEngine for switching between Browser and Local runtimes.
  • monaco-editor integration.
  • Figma panel for importing and browsing designs.
• Backend (apps/server):
  • Node.js / Express proxy for AI providers and Docker management.
  • Unified Proxy Middleware: Handles dynamic routing for both HTTP and WebSockets (HMR).
  • Prisma + SQLite for project persistence.
  • Figma API proxy with PAT authentication.
• Figma Plugin (apps/figma-plugin):
  • Standalone Figma plugin for exporting designs without API rate limits.
  • Exports JSON structure + rendered images as base64.
• AI Providers:
  • Anthropic: Claude 3.5 Sonnet (Optimized for code).
  • Google: Gemini 1.5 Pro / Flash.

🛠 Setup & Installation

Prerequisites

• Node.js 20+
• Docker Desktop (Optional, required for Local Docker mode)

1. Clone & Install

git clone <repository-url>
cd adorable
npm install

2. Environment

Create a .env file:

cp .env.template .env

Add your AI API keys and an ENCRYPTION_KEY (used for securing API keys in the DB).

3. Run

# Start Backend (API & Docker Manager)
npx nx serve server

# Start Frontend
npx nx serve client

📖 Usage Guide

1. Configure Keys: Click on Profile to set your preferred AI provider and API keys. Keys are encrypted and stored in your profile.
2. Choose Engine: In the IDE header, toggle between Browser (WebContainer) and Local Docker mode.
3. Generate: Type a prompt like "Create a project management dashboard with signals" in the Chat tab.
4. Visual Edit: Use the Inspect icon in the preview toolbar, click a UI element, and tell the AI what to change.
5. Annotate: Click the pencil icon in the preview toolbar to enter annotation mode. Draw on the preview to highlight areas, point out issues, or label elements — the annotated screenshot is sent to the AI as context.
6. Persistence: In Local Docker mode, your code is persisted in ./storage/projects/${userId} on your host machine, ensuring it survives container restarts.

GitHub Integration

1. Connect GitHub: Go to Profile and click Connect GitHub to authorize Adorable.
2. Link a Repository: In the editor, click the GitHub icon in the navbar.
   • Select an existing repository, or
   • Click Create New Repository to create one automatically.
3. Sync Changes:
   • Push: Send your project files to GitHub.
   • Pull: Fetch the latest changes from GitHub.
4. Deploy to GitHub Pages:
   • Click Deploy to Pages in the GitHub panel.
   • Adorable automatically:
     • Makes the repo public (required for free GitHub Pages)
     • Creates a GitHub Actions workflow with correct --base-href
     • Enables GitHub Pages
   • Your site will be live at https://<username>.github.io/<repo-name>/

Figma Integration

Option A: API Import (requires Figma PAT)

1. Go to Profile and add your Figma Personal Access Token.
2. Switch to the Figma tab in the sidebar.
3. Paste a Figma file URL and click Load File.
4. Browse pages and frames, select the designs you want, and click Import to Chat.

Option B: Plugin Export (no API needed)

1. Build the Figma plugin: npx nx run figma-plugin:build
2. In Figma Desktop, go to Plugins > Development > Import plugin from manifest and select dist/apps/figma-plugin/manifest.json.
3. Select frames in Figma and run the plugin to export.
4. Drag the exported .json file into the Figma panel in Adorable.

Working with Imports:

• Previous imports are saved with your project and shown in the Figma panel.
• Click an import to browse its layers with preview thumbnails.
• Hover over layers to highlight them on the preview image.
• Click Use on any layer to send just that layer (with cropped image) to chat.

Annotation Overlay

Annotate the live preview to visually communicate design intent to the AI.

1. Click the pencil icon in the preview toolbar to enter annotation mode.
2. Use the floating toolbar to select a tool:
   • Pen — Freehand drawing for highlighting or circling elements.
   • Arrow — Point at specific elements or indicate direction.
   • Rectangle — Draw bounding boxes around areas of interest.
   • Text — Click to place a text label, type your note, and press Enter to commit.
3. Edit text labels after placing them:
   • Click a label to select it (dashed outline appears).
   • Drag a selected label to reposition it.
   • Double-click a label to re-edit its text.
   • Delete/Backspace removes the selected label.
4. Pick colors from the palette and use Undo (Ctrl+Z) or Clear to adjust.
5. Click Done to capture the annotated screenshot — it's automatically attached to the chat for the AI to see.

Open in VS Code (Docker Mode)

When running in Local Docker mode, you can open your project directly in VS Code from the navbar.

1. Click the VS Code icon in the navbar (only visible in Docker mode).
2. Choose one of two options:
   • Open Folder — Opens the project directory on your host machine (./storage/projects/${userId}) in VS Code. No additional setup required.
   • Attach Container — Attaches VS Code to the running Docker container via the Dev Containers extension, giving you a full containerized development environment with integrated terminal access.
3. Live File Sync: Any files you edit in VS Code are automatically detected and synced back to Adorable's file tree in real-time via a file watcher. The preview updates via HMR, and the file explorer reflects your changes immediately.

Requirements:

• Open Folder: VS Code installed with command line tools enabled.
• Attach Container: The Dev Containers VS Code extension must be installed.

⚡ Performance & Efficiency

• Container Re-use: Adorable automatically identifies and resumes your existing containers based on your User ID.
• Resource Reaper: Idle containers are paused to free up CPU. If you return within 2 hours, they unpause instantly.
• Dependency Caching: In Docker mode, node_modules are persisted on the host, making project switching and npm install nearly instantaneous.

---

Built with ❤️ using Nx, Angular, WebContainers, and Docker.