Angular

Add an AI support assistant to an Angular application

Angular applications are usually large, long-lived, and careful about what enters the dependency graph. This adds one provider with no dependencies of its own — or nothing at all, if you paste the script tag instead.

One provider
About two minutes
One file

Get your key Full install docs

pnpm add @matterchat/angular

app.config.tsfile

import { ApplicationConfig } from "@angular/core";import { provideMatterChat } from "@matterchat/angular"; export const appConfig: ApplicationConfig = {  providers: [provideMatterChat({ publicKey: "bot_your_key" })],};

ts · one provider

Where the provider goes

Install @matterchat/angular and add provideMatterChat({ publicKey }) to the providers array in app.config.ts. It registers an app initializer and nothing else — no component, no module, no template, nothing in angular.json. If you would rather add nothing to package.json, paste the two lines into src/index.html before the closing body tag.

app.config.ts: one provider: Angular 19 or newer — ApplicationConfig.providers in a standalone app, or an NgModule's providers array. Nothing to inject.
From a component instead: After a route guard, or only on some pages: call loadMatterChat from ngOnInit. Calling it twice adds nothing twice.
Script tag: src/index.html: The single shell document, so one paste covers the application — and nothing enters the module graph.
Router-safe: Client-side routing does not affect it, since it never relied on page loads.

provideMatterChat registers an app initializer and nothing else — no component, no module, no template, nothing in angular.json. Angular 19 or newer — ApplicationConfig.providers in a standalone app, or an NgModule's providers array. To start it from a component instead, after a route guard say, call loadMatterChat from ngOnInit.

Suited to internal tools

Angular is common for internal applications, where the support burden is a colleague explaining the same process repeatedly. Indexing internal documentation and putting the assistant in the app answers those questions where they arise.

What the crawler sees in an Angular app

Our crawler fetches HTML over HTTP and does not execute JavaScript — the same constraint most search engines apply on the first pass. A default Angular build renders in the browser, so a crawl of the app itself reads an empty shell. That is rarely a problem in practice, because the app is not usually where the answers live.

Little to review at upgrade time

The package has no dependencies of its own and the widget is fetched at run time, so widget updates never arrive as a version bump. Paste the script tag instead and an Angular major-version upgrade has nothing to say about it at all — a real consideration in codebases where upgrades are a scheduled project.

Checking it actually worked

Four things, in order. The third is the one people skip, and it is the one that tells you whether the answers are grounded.

1Hard refresh the page — the launcher appears bottom-right.
2Ask it something your site answers, and check the reply cites a page.
3Ask it something your site does not cover, and check it declines.
4Open Conversations in the dashboard; both should be there.

On a different stack?

The snippet is the same everywhere. Only the place you paste it changes.

What developers ask

Short answers. If yours is not here, the assistant on this page will try it — and tell you honestly if it cannot.

Can you crawl the Angular app itself?

Only if it serves HTML — apps on @angular/ssr or with prerendered routes crawl fine. A default client-rendered build serves an empty shell to any non-executing crawler, so index your docs site or upload files instead.

Is there an Angular module or service?

There is a provider, provideMatterChat, and it is optional. It needs Angular 19 or newer and goes in ApplicationConfig.providers in a standalone app or an NgModule's providers array, and there is nothing to inject: it registers an app initializer that adds the script, and the widget renders in its own layer. The script tag in index.html remains the no-dependency route.

Can it serve internal documentation?

Yes — internal material can be added as uploaded documents rather than crawled pages, so it does not need to be published publicly to be answerable.

Does it affect our build or bundle size?

Barely. The package is a few hundred bytes that add one script tag; the widget itself is never bundled, because the browser fetches it at run time. Use the script tag and nothing is imported at all.