Turn your Angular app into interactive MCP widgets — without leaving Angular

import { Component, computed } from '@angular/core';import { injectCallTool, injectToolInfo } from 'ng-mcp-ui/web';@Component({  selector: 'poll-widget',  template: `    @let p = poll();    @if (p) {      <h1>{{ p.question }}</h1>      @for (o of p.options; track o) {        <button (click)="vote(o)">{{ o }}</button>      }    }  `,})export default class PollWidget {  // the tool that rendered this view, as a state signal  private readonly tool = injectToolInfo<{ output: Poll }>();  private readonly castVote = injectCallTool<VoteArgs, VoteResult>('cast_vote');  protected readonly poll = computed(() => {    const s = this.tool();    return s.isSuccess ? s.output : null;  });  protected vote(option: string) {    this.castVote.callTool({ pollId: this.poll()?.pollId, option });  }}