Install MudBlazor 9.2.0, replace Bootstrap layout with MudLayout/MudAppBar, create Chat.razor with message list, text input, auto-scroll, and hardcoded responses. Add ChatMessage shared model. Remove template pages (Counter, Weather), move health check to /health. Include OpenSpec change artifacts for the upcoming wire-responses-api work. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1.4 KiB
1.4 KiB
1. Shared Models
- 1.1 Create ChatRequest.cs in ChatAgent.Shared/Models with a Messages list property
2. API Backend
- 2.1 Add appsettings.json to ChatAgent.Api with ResponsesApi:BaseUrl and ResponsesApi:Model
- 2.2 Register an HttpClient for the Responses API proxy in Api Program.cs
- 2.3 Create ChatController with POST /api/chat that proxies to the Responses API with streaming
- 2.4 Parse Responses API SSE stream, extract response.output_text.delta events, re-emit as simplified SSE to client
3. Client Streaming
- 3.1 Add a streaming SendChatAsync method to ChatApiClient that uses SetBrowserResponseStreamingEnabled and HttpCompletionOption.ResponseHeadersRead
- 3.2 Parse the simplified SSE stream line-by-line, yielding text deltas
4. Chat Page Updates
- 4.1 Replace hardcoded response in Chat.razor with a call to ChatApiClient.SendChatAsync
- 4.2 Append tokens to the assistant message incrementally with StateHasChanged after each delta
- 4.3 Add a thinking indicator shown until the first token arrives
- 4.4 Disable input field and send button while streaming is in progress
- 4.5 Handle errors — display error message if API call fails
- 4.6 Auto-scroll during streaming (not just at the end)
5. Verify
- 5.1 Run dotnet build to confirm no errors
- 5.2 Manually verify: send a message, see streaming response from Claude