AI Generation Fixes 🤖

Problems Fixed

1. Anthropic API Error

Error: response_format: Extra inputs are not permitted

Cause: Using OpenAI-specific parameter with Anthropic API.

Fix: Removed response_format parameter from Anthropic calls.

// ❌ Before
{
  model: 'claude-3-7-sonnet-20250219',
  response_format: { type: 'json_object' }, // OpenAI-specific!
  // ...
}

// ✅ After
{
  model: 'claude-3-7-sonnet-20250219',
  // No response_format - Anthropic doesn't support it
  // ...
}

2. Hardcoded URLs

Problem: Frontend used hardcoded http://localhost:3000/api

Fix: Inject API_BASE_URL token

// ❌ Before
const response = await fetch('http://localhost:3000/api/ai/generate-widget');

// ✅ After
private readonly apiUrl = inject(API_BASE_URL);
const response = await this.http.post(`${this.apiUrl}/ai/generate/widget`, data);

3. Promises Instead of RxJS

Problem: Using .toPromise() and setTimeout

Fix: Modern RxJS patterns

// ❌ Before
const result = await this.http.get(url).toPromise();
setTimeout(() => { /* ... */ }, 1000);

// ✅ After
const result = await firstValueFrom(this.http.get(url));
timer(1000).pipe(
  takeUntilDestroyed(this.destroyRef)
).subscribe(() => { /* ... */ });

4. Architectural Misalignment

Problem: Generation endpoints in ai-agents module (wrong place)

Fix: Moved to /api/ai/ module

• ai-agents = AI development process enhancement (task management, learning)
• ai = AI generation features (widget/module generation)

Files Modified

Backend

• apis/backend-api/src/app/ai/ai.service.ts - Removed response_format
• apis/backend-api/src/app/ai/ai.controller.ts - Added generation endpoints
• apis/backend-api/src/app/ai-agents/ai-agents.controller.ts - Removed wrong endpoint

Frontend

• widget-builder-workspace.component.ts - RxJS refactor, inject API_BASE_URL
• intelligent-widget-generator.service.ts - RxJS refactor, removed hardcoded URLs

Result

✅ AI generation works with all providers (OpenAI, Anthropic)
✅ No hardcoded URLs
✅ Modern Angular/RxJS patterns
✅ Correct architectural separation