Getting Started

Add AI Autocomplete to an Angular app in minutes. Works with Angular 15 and every later version — standalone components or NgModules.

Install

Install the Angular SDK with your package manager:

Terminal
pnpm add @magicx-eng/ai-autocomplete-angular

Install the Angular peer dependencies if your app doesn't already have them:

Terminal
pnpm add @angular/common @angular/core @angular/forms rxjs

Render the component

Import the standalone <ai-autocomplete> component, pass an [apiConfig], and handle (submitted). That's the whole minimal setup.

search.component.ts
import { Component } from "@angular/core";
import {
  AIAutocompleteComponent,
  type AutocompleteResult,
} from "@magicx-eng/ai-autocomplete-angular";


@Component({
  selector: "app-search",
  standalone: true,
  imports: [AIAutocompleteComponent],
  template: `
    <ai-autocomplete
      [apiConfig]="apiConfig"
      (submitted)="onSubmit($event)"
    ></ai-autocomplete>
  `,
})
export class SearchComponent {
  apiConfig = { apiKey: "pk_v1_your_public_key" };


  onSubmit(result: AutocompleteResult): void {
    console.log(result.query);            // "Create a email"
    console.log(result.raw_query);        // "Create a {{TASK_1}}"
    console.log(result.completed_params); // [{ placeholder, type, ... }]
  }
}

Authentication

Grab a public key from your account and drop it into apiConfig. Public keys are safe to ship in client bundles.

What's next

Next, walk through the integration tiers to choose between the drop-in component and the headless controller, then explore the API reference.