Search documentation

Search documentation

Angular Quickstart

Add a co-pilot panel to your Angular app in under 5 minutes.

What you'll build:

  • A slide-out assistant panel with co-pilot chat
  • A sidebar trigger (or custom button) that opens the panel
  • Your first tool the AI can suggest

Prerequisites

  • Angular 17+ (standalone components)
  • A Pillar account (sign up at trypillar.com)
  • Your project slug (found in Settings → General)

Step 1: Install the SDK

bash
npm install @pillar-ai/angular

Or with other package managers:

bash
# yarn
yarn add @pillar-ai/angular


# pnpm
pnpm add @pillar-ai/angular

Step 2: Initialize Pillar

Pillar is initialized via Angular's APP_INITIALIZER token, which ensures the SDK is ready before your app renders. Add it to your app.config.ts:

Minimal Setup (with sidebar)

app.config.ts
// app.config.ts
import { ApplicationConfig, APP_INITIALIZER, inject } from '@angular/core';
import { PillarService } from '@pillar-ai/angular';
import { environment } from '../environments/environment';


function initPillar() {
  const pillarService = inject(PillarService);
  return () => pillarService.init({
    productKey: environment.pillarProductKey,
  });
}


export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_INITIALIZER, useFactory: initPillar, multi: true },
  ],
};

No additional button is needed — the edge trigger provides the entry point.

Without Sidebar (custom button only)

If you prefer a custom button instead of the built-in sidebar tab:

app.config.ts
// app.config.ts
import { ApplicationConfig, APP_INITIALIZER, inject } from '@angular/core';
import { PillarService } from '@pillar-ai/angular';
import { environment } from '../environments/environment';


function initPillar() {
  const pillarService = inject(PillarService);
  return () => pillarService.init({
    productKey: environment.pillarProductKey,
    config: {
      edgeTrigger: { enabled: false },
      mobileTrigger: { enabled: false },
    },
  });
}


export const appConfig: ApplicationConfig = {
  providers: [
    { provide: APP_INITIALIZER, useFactory: initPillar, multi: true },
  ],
};

When disabling the sidebar, you'll need to add your own trigger button — see Step 5.

Step 3: Add Environment Variables

Create or update your src/environments/environment.ts file:

src/environments/environment.ts
// src/environments/environment.ts
export const environment = {
  pillarProductKey: 'your-product-slug',
};

Where to find your project slug: In the Pillar dashboard, go to Settings → General. Your project slug is displayed under "Project URL".

Make sure you have separate environment.development.ts and environment.ts files for different build configurations. Angular's fileReplacements in angular.json swaps these automatically.

Step 4: Configure (Optional)

Pass a config object to pillarService.init() to customize behavior. All options are optional.

typescript
pillarService.init({
  productKey: environment.pillarProductKey,
  config: {
    edgeTrigger: {
      enabled: true,
    },
    mobileTrigger: {
      enabled: true,
      position: 'bottom-right',
      icon: 'sparkle',
    },
    panel: {
      position: 'right',
      mode: 'push',
      width: 380,
    },
    theme: {
      mode: 'auto',
      colors: {
        primary: '#2563eb',
      },
    },
  },
})

See the React quickstart for the full configuration reference — all options are identical across frameworks.

Step 5: Create an Assistant Button (Optional)

Note: This step is only required if you disabled the edge trigger sidebar in Step 2. By default, Pillar shows a sidebar tab on the screen edge that opens the panel — no custom button needed.

Use injectHelpPanel() to access panel controls in any standalone component:

examples/quickstarts/angular/assistant-button.component.ts
// components/assistant-button.component.ts
import { Component } from '@angular/core';
import { injectHelpPanel } from '@pillar-ai/angular';


@Component({
  selector: 'app-assistant-button',
  standalone: true,
  template: `
    <button
      (click)="toggle()"
      class="fixed bottom-4 right-4 bg-primary text-white px-4 py-2 rounded-full shadow-lg"
    >
      {{ isOpen() ? 'Close' : 'Ask Assistant' }}
    </button>
  `,
})
export class AssistantButtonComponent {
  private panel = injectHelpPanel();
  isOpen = this.panel.isOpen;
  toggle = this.panel.toggle;
}

Add the component to your root AppComponent:

examples/quickstarts/angular/layout-with-assistant-button.ts
// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { AssistantButtonComponent } from './components/assistant-button.component';


@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, AssistantButtonComponent],
  template: `
    <router-outlet />
    <app-assistant-button />
  `,
})
export class AppComponent {}

Step 6: Test It

  1. Start your development server: ng serve
  2. Click the sidebar tab on the screen edge (or your custom assistant button)
  3. Ask a question in the co-pilot chat

Next Steps