@tanstack/ai-angular

import { Injector, inject, runInInjectionContext } from "@angular/core";
import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";

export class MyComponent {
  // Field initializer
  chat = injectChat({ connection: fetchServerSentEvents("/api/chat"), threadId: "support-chat" });

  private injector = inject(Injector);

  // Later, outside the constructor
  openSecondChat() {
    return runInInjectionContext(this.injector, () =>
      injectChat({ connection: fetchServerSentEvents("/api/chat"), threadId: "support-chat" }),
    );
  }
}

import { Component } from "@angular/core";
import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";

@Component({
  selector: "app-chat",
  standalone: true,
  template: `
    @for (message of chat.messages(); track message.id) {
      <p>
        <strong>{{ message.role }}:</strong>
        @for (part of message.parts; track $index) {
          @if (part.type === 'text') {
            <span>{{ part.content }}</span>
          }
        }
      </p>
    }
    <input #input />
    <button
      (click)="chat.sendMessage(input.value); input.value = ''"
      [disabled]="chat.isLoading()"
    >
      Send
    </button>
  `,
})
export class ChatComponent {
  chat = injectChat({
    connection: fetchServerSentEvents("/api/chat"),
    threadId: "support-chat",
  });
}

import { Component, signal } from "@angular/core";
import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";

@Component({ selector: "app-model-chat", standalone: true, template: "" })
export class ModelChatComponent {
  model = signal("gpt-6.1-sol");

  chat = injectChat({
    connection: fetchServerSentEvents("/api/chat"),
    threadId: "support-chat",
    forwardedProps: () => ({ model: this.model() }),
  });
}

import { Component } from "@angular/core";
import { toolDefinition } from "@tanstack/ai";
import { injectChat, fetchServerSentEvents } from "@tanstack/ai-angular";
import { z } from "zod";

const deleteFileTool = toolDefinition({
  name: "delete_file",
  description: "Delete a file",
  needsApproval: true,
  inputSchema: z.object({ path: z.string() }),
});

@Component({
  selector: "app-approval-chat",
  standalone: true,
  template: `
    @for (interrupt of chat.interrupts(); track interrupt.id) {
      @if (interrupt.kind === 'tool-approval') {
        <div>
          <p>Approve: {{ interrupt.toolName }}</p>
          <button (click)="interrupt.resolveInterrupt(true)">Approve</button>
          <button (click)="interrupt.resolveInterrupt(false)">Deny</button>
        </div>
      }
    }
  `,
})
export class ApprovalChatComponent {
  chat = injectChat({
    connection: fetchServerSentEvents("/api/chat"),
    threadId: "support-chat",
    tools: [deleteFileTool],
  });
}

import { Component } from "@angular/core";
import { injectGenerateImage, fetchServerSentEvents } from "@tanstack/ai-angular";

@Component({
  selector: "app-image",
  standalone: true,
  template: `
    <button
      (click)="image.generate({ prompt: 'A mountain at sunset' })"
      [disabled]="image.isLoading()"
    >
      Generate
    </button>
  `,
})
export class ImageComponent {
  image = injectGenerateImage({
    connection: fetchServerSentEvents("/api/generate/image"),
    threadId: "image-studio",
  });
}

import { Component, computed } from "@angular/core";
import { injectByok } from "@tanstack/ai-angular";
import { byok } from "./byok";

@Component({
  selector: "app-key-status",
  standalone: true,
  template: `<p>{{ last4() }}</p>`,
})
export class KeyStatusComponent {
  snapshot = injectByok(byok);

  last4 = computed(() => {
    const openai = this.snapshot().status.openai;
    return openai && "masked" in openai ? openai.masked : "No key";
  });
}

import { Component } from "@angular/core";
import { injectRegisterWebMCPTools } from "@tanstack/ai-angular";
import { searchProducts } from "./tools";

@Component({ selector: "app-products", standalone: true, template: "" })
export class ProductsComponent {
  registration = injectRegisterWebMCPTools([searchProducts], {
    onError: (error) => console.error(error),
  });
}

import { Component } from "@angular/core";
import { injectPageWebMCPTools } from "@tanstack/ai-angular";

@Component({ selector: "app-page-tools", standalone: true, template: "" })
export class PageToolsComponent {
  pageTools = injectPageWebMCPTools({
    filter: (tool) => tool.origin === location.origin,
  });
}