inet-ai-editor

Interactive AI HTML/CSS/JS Editor & Dynamic Form Generator powered by Google Gemini

inet-ai-editor is a full-featured, responsive code editor component for Angular applications. It includes an integrated AI assistant (powered by Google Gemini models such as gemini-3.8-flash, gemini-3.5-flash-lite, gemini-3.1-pro), live iframe preview with multi-device emulation (Desktop, Tablet, Mobile, Fullscreen), dynamic schema-driven form generation, and an automated visual Diff & Hunk review engine.

Features

• 🤖 Integrated AI Assistant: Prompt-based code editing, code generation, refactoring, and conversational explanations.
• 🔍 Visual Diff & Hunks Review: Review and accept/reject individual hunk diffs before applying AI changes.
• 📱 Multi-Device Live Preview: Instant live preview across Desktop, Tablet (768px), and Mobile (375px) viewports with orientation toggle and fullscreen mode.
• 🎨 Dark & Light Themes: Beautiful Dark IDE theme and pristine Light Theme (Cobalt Electric accents).
• 📋 Dynamic Form Generator: Generates interactive HTML5 forms from JSON schemas.
• 🧩 Angular Standalone & NgModule Support: Fully compatible with Angular 18+ standalone components and classic NgModules.

Installation

npm install inet-ai-editor

Dependencies

Ensure @angular/core, @angular/common, and @angular/forms are installed in your Angular project:

npm install @angular/common @angular/core @angular/forms

Quick Start

1. Import Component or Module

Standalone Component (Angular 18+):

import { Component } from '@angular/core';
import { AiEditorComponent, SchemaData } from 'inet-ai-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AiEditorComponent],
  templateUrl: './app.component.html'
})
export class AppComponent {
  initialCode = `<h1>Hello World</h1>`;
  candidateSchema: SchemaData = {
    fullName: 'string',
    age: 'number',
    bio: 'text'
  };

  onSaveHtml(code: string) {
    console.log('Saved HTML:', code);
  }

  onCloseEditor() {
    console.log('Editor closed');
  }
}

NgModule (Legacy):

import { NgModule } from '@angular/core';
import { AiEditorModule } from 'inet-ai-editor';

@NgModule({
  imports: [AiEditorModule],
  // ...
})
export class AppModule {}

2. Usage in Template

<app-ai-editor 
  [initialCode]="initialCode"
  [schemas]="candidateSchema"
  [theme]="'dark'"
  [showSchemasButton]="false"
  [showChatButton]="true"
  [showThemeToggle]="false"
  [showCloseButton]="true"
  [showSaveButton]="true"
  [showResetButton]="true"
  [showUndoRedo]="true"
  [showSettingsButton]="false"
  (save)="onSaveHtml($event)"
  (close)="onCloseEditor()">
</app-ai-editor>

Inputs & Outputs Reference

Inputs

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | initialCode | string | '' | Initial HTML/CSS/JS source code loaded into the editor. | | schemas | SchemaData \| any | null | JSON Schema object for dynamic form generation and AI context. | | lang | 'vi' \| 'en' | 'vi' | Language code for UI & AI Assistant ('vi' or 'en'). | | customTranslations | Partial<AiEditorTranslations> | undefined | Custom label/dictionary overrides for any UI texts. | | theme | 'dark' \| 'light' | 'dark' | Current theme mode. | | showThemeToggle | boolean | true | Toggle visibility of the theme switch button (☀️/🌙). | | showChatButton | boolean | true | Toggle visibility of the AI Assistant chat sidebar button. | | showSchemasButton| boolean | true | Toggle visibility of the Schemas drawer button (only if schemas exists). | | showResetButton | boolean | true | Toggle visibility of the Reset to default template button. | | showSaveButton | boolean | true | Toggle visibility of the Save button. | | showCloseButton | boolean | true | Toggle visibility of the Close button. | | showUndoRedo | boolean | false | Toggle visibility of the Undo / Redo buttons. | | showSettingsButton| boolean | false | Toggle visibility of the AI API Key & Model Settings modal button. |

Multi-Language (i18n) Support

inet-ai-editor includes built-in bilingual support for Vietnamese (vi) and English (en) with zero external dependencies.

1. Template Input Binding:

<app-ai-editor [lang]="currentLang"></app-ai-editor>

When currentLang changes between 'vi' and 'en', the entire UI (toolbar, modals, diff review, hints, starter prompts, and AI welcome message) updates instantly.

2. Global Service Integration:

import { Component } from '@angular/core';
import { AiEditorI18nService } from 'inet-ai-editor';

@Component({ ... })
export class AppComponent {
  constructor(private i18n: AiEditorI18nService) {}

  switchLang(lang: 'vi' | 'en') {
    this.i18n.setLanguage(lang);
  }
}

Outputs

| Event | Payload | Description | | :--- | :--- | :--- | | codeChange | string | Emitted whenever the code in the editor is modified. | | save | string | Emitted when user clicks the Save button, passing current HTML. | | close | void | Emitted when user clicks the Close button. | | themeChange | 'dark' \| 'light' | Emitted when the user toggles between dark and light theme. |

AI Assistant Configuration

Users can click the Settings icon ⚙️ inside the editor header (or configure via AiEngineService) to specify:

• Google Gemini API Key (or use localStorage / default key).
• Gemini Model Selection:
  • gemini-3.8-flash (Fast, highly versatile - Default)
  • gemini-3.5-flash-lite (Lightweight & responsive)
  • gemini-3.1-pro (Complex multi-step reasoning)

Publishing to NPM

To build and publish the library:

# Build the library to dist/inet-ai-editor
npm run build:lib

# Publish package to npm registry
npm run publish:lib

License

MIT © iNet