Docs

Documentation

Angular Client SDK

The ModelRiver Angular SDK provides a robust, Observable-based service wrapper for the ModelRiver client. It integrates seamlessly with Angular's dependency injection and Change Detection systems.

Installation

Bash
npm install @modelriver/client

The Angular service is part of the standard @modelriver/client distribution.

Setup and Usage

1. provide the service

You can provide the ModelRiverService at the component or module level.

TYPESCRIPT
1import { Component } from '@angular/core';
2import { ModelRiverService } from '@modelriver/client/angular';
3import { CommonModule } from '@angular/common';
4import { FormsModule } from '@angular/forms';
5 
6@Component({
7 selector: 'app-ai-terminal',
8 standalone: true,
9 imports: [CommonModule, FormsModule],
10 providers: [ModelRiverService],
11 template: `
12 <div class="terminal">
13 <!-- Progress Bar -->
14 <div class="progress">
15 <div *ngFor="let step of modelRiver.steps$ | async"
16 [class]="'pill ' + step.status">
17 {{ step.name }}
18 </div>
19 </div>
20 
21 <!-- AI Stream -->
22 <div class="stream-output">
23 <p *ngIf="modelRiver.response$ | async as res">
24 {{ res.content }}
25 </p>
26 <div *ngIf="(modelRiver.status$ | async) === 'loading'">
27 Generating...
28 </div>
29 </div>
30 
31 <!-- Controls -->
32 <div class="input-row">
33 <input [(ngModel)]="prompt" [disabled]="(modelRiver.status$ | async) === 'loading'">
34 <button (click)="submit()" [disabled]="!prompt">Run AI</button>
35 </div>
36 
37 <p class="error" *ngIf="modelRiver.error$ | async as err">{{ err }}</p>
38 </div>
39 `
40})
41export class AiTerminalComponent {
42 prompt = '';
43 
44 constructor(public modelRiver: ModelRiverService) {
45 this.modelRiver.init({
46 baseUrl: 'wss://api.modelriver.com/socket'
47 });
48 }
49 
50 async submit() {
51 // 1. Get token from your backend
52 const { ws_token } = await this.myBackendService.generate(this.prompt);
53
54 // 2. Start streaming
55 this.modelRiver.connect({ wsToken: ws_token });
56 }
57}

Features for Enterprise Angular Apps

Type Safety

The Angular SDK is written in TypeScript and provides interfaces for all ModelRiver payloads (AIResponse, WorkflowStep, etc.), ensuring your AI integration is type-safe from end-to-end.

Observable Streams

Every state in the SDK is exposed as an Observable (response$, status$, steps$, error$). This allows you to use the async pipe in templates or compose complex logic using RxJS operators.

Global Configuration

You can initialize the ModelRiverService once in your AppModule or AppConfig to share configuration (like baseUrl) across multiple components.

SEO Best Practices for AI in Angular

  1. Angular Universal (SSR): Use SSR to ensure the static parts of your AI dashboard are searchable and load instantly for crawlers.
  2. OnPush Change Detection: The ModelRiverService triggers change detection efficiently, supporting the OnPush strategy for high-performance AI interfaces.
  3. Canonical Links: Ensure each AI-generated page/route has a proper canonical URL to manage content duplication if you allow users to share AI results.

Next Steps