# Getting Started | Angular AI Autocomplete Docs

> For the complete documentation index, see [llms.txt](https://ai-autocomplete.com/llms.txt). A markdown version of any page on this site is available by appending `.md` to its URL path — the homepage is at `/index.md`.

Getting Started guide for integrating the AI Autocomplete SDK with Angular. Code examples, setup, and API reference.

Source: https://ai-autocomplete.com/docs/angular/getting-started

---

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

## Install with an AI agent

Let your AI coding agent set up the integration and walk you through the two browser steps.

Paste this into your agent. It will scaffold the integration and tell you exactly what to do in the browser to finish setup.

**Agent prompt**

```bash
Install AI Autocomplete using the instructions at https://ai-autocomplete.com/install/angular.md
```

Works with Claude Code, Cursor, Windsurf, GitHub Copilot, ChatGPT — any agent that can read URLs and run shell commands. [View the prompt](https://ai-autocomplete.com/install/angular.md)

## Install

Install the Angular SDK with your package manager:

**Terminal**

```bash
pnpm add @magicx-eng/ai-autocomplete-angular
```

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

**Terminal**

```bash
pnpm add @angular/common @angular/core @angular/forms rxjs
```

Built for Angular 15+. The package ships as Angular Package Format (partial-Ivy), so it's forward-compatible with newer Angular majors.

## Render the component

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

**search.component.ts**

```tsx
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, ... }]
  }
}
```

Not using standalone components? Import AIAutocompleteModule into your NgModule instead — it re-exports every public piece.

## Authentication

Grab a [public key](https://ai-autocomplete.com/account/keys) from your account and drop it into apiConfig. Public keys are safe to ship in client bundles.

Security

Public keys are scoped and safe in client bundles, but for production we recommend the secret key + access token flow — your server holds the secret key and mints short-lived tokens for the browser. See Authentication.

## 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.