Introduction

Angular 18 introduced a powerful reactivity model with Signals — and combined with the Claude API, it unlocks a new class of AI-first web applications. In this post, we’ll walk through building a reactive AI assistant component from scratch.

Why Signals for AI Apps?

Traditional Angular apps used RxJS observables for async state. While powerful, they add cognitive overhead when dealing with streaming AI responses. Signals simplify this:

// Traditional RxJS approach
aiResponse$: Observable<string>;

// Signals approach — cleaner, more intuitive
aiResponse = signal<string>('');
isLoading = signal<boolean>(false);

Setting Up Claude API in Angular

Install the HTTP client and set up your environment:

// environment.ts
export const environment = {
  claudeApiUrl: 'https://api.anthropic.com/v1/messages',
  claudeModel: 'claude-sonnet-4-20250514'
};

Building the AI Service

@Injectable({ providedIn: 'root' })
export class ClaudeService {
  private http = inject(HttpClient);
  
  askClaude(prompt: string): Observable<string> {
    return this.http.post<any>(environment.claudeApiUrl, {
      model: environment.claudeModel,
      max_tokens: 1024,
      messages: [{ role: 'user', content: prompt }]
    }).pipe(
      map(res => res.content[0].text)
    );
  }
}

The Signal-Based Component

@Component({
  selector: 'app-ai-chat',
  template: `
    <div class="ai-container">
      <textarea [(ngModel)]="userInput" placeholder="Ask anything..."></textarea>
      <button (click)="ask()" [disabled]="isLoading()">
        {{ isLoading() ? 'Thinking...' : 'Ask Claude' }}
      </button>
      <div class="response">{{ aiResponse() }}</div>
    </div>
  `
})
export class AiChatComponent {
  userInput = '';
  aiResponse = signal('');
  isLoading = signal(false);
  
  private claude = inject(ClaudeService);
  
  ask() {
    this.isLoading.set(true);
    this.claude.askClaude(this.userInput).subscribe({
      next: (res) => {
        this.aiResponse.set(res);
        this.isLoading.set(false);
      }
    });
  }
}

Conclusion

Combining Angular 18 Signals with Claude API gives you a clean, reactive architecture for AI-powered features. The signal-based approach reduces boilerplate and makes state changes predictable.

At Techvia, we use this exact pattern in FleetIQ — our AI-first Transport Management System — for route optimization suggestions and document intelligence.