@getmantl/angular

Angular SDK for Mantl — a drop-in AI copilot you can embed into any Angular app. Renders a chat panel docked alongside your content, aware of the signed-in user, with the ability to call functions you expose from the host app.

Install

npm install @getmantl/angular

Requires Angular 17+ (standalone components).

Quickstart

// app.component.ts
import { Component } from '@angular/core';
import { MantlChatComponent, ClientTools } from '@getmantl/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MantlChatComponent],
  template: `
    <main>
      <!-- your app -->
    </main>
    <mantl-chat
      [tokenUrl]="'/api/mantl-token'"
      [tools]="tools"
      (navigate)="router.navigateByUrl($event)"
    />
  `,
})
export class AppComponent {
  constructor(public router: Router) {}

  tools: ClientTools = {
    openInvoice: {
      description: 'Open an invoice by ID.',
      parameters: {
        type: 'object',
        properties: { id: { type: 'string' } },
        required: ['id'],
      },
      execute: ({ id }) => {
        this.router.navigateByUrl(`/invoices/${id}`);
        return { success: true };
      },
    },
  };
}

You'll need:

1. A project on getmantl.com — gives you a project ID and secret key.
2. A small endpoint on your backend that signs a JWT with that secret key (one HMAC-SHA256 call — payload { sub: userId, proj: projectId }).

See the token endpoint guide for backend examples in Node, Python, Go, etc. — the same recipe works whether your frontend is Angular, React, or anything else.

What you get

• <mantl-chat> — drop-in chat panel as a standalone Angular component. Inputs cover the auth options (tokenUrl / getToken / token), tools, position, and default-open behavior; outputs emit navigate and tokenError events.

The chat code is lazy-loaded on mount — React, the panel UI, streamdown markdown rendering, and KaTeX styles only enter your bundle when <mantl-chat> is actually rendered. The bridge itself is ~3.5 KB.

How it works (and why it includes React)

This SDK is a thin Angular wrapper around @getmantl/react. The chat panel, message rendering, streaming, shadow-DOM markdown isolation, and resize handling all live in React internally — Mantl's React SDK is the source of truth for UI, and this Angular package mounts that React tree into a DOM node owned by the Angular component.

For you as a customer that means:

• You write Angular bindings — [input], (output), dependency injection — nothing in your codebase imports React.
• Every UI improvement we ship to React reaches Angular customers the same day.
• The bundle cost (~45 KB gzipped of React + ReactDOM, plus the chat panel) is paid lazily, only on the route where you mount <mantl-chat>.

If a future need rules out the React-island approach (e.g. you require zero React in your bundle), open an issue — a parallel pure-Angular implementation is on the table once justified by a real use case.

License

MIT