Angular 17 + Claude API: Build a Streaming AI Dashboard (Starter Kit Inside)

#angular #typescript #javascript #webdev

Every time I start a new dashboard project, I'm rebuilding the same boilerplate — sidebar nav, KPI cards, charts, and then the real time sink: wiring up an AI assistant properly.

So I packaged it all into a starter kit. Here's what's inside and how the streaming piece works.

What's in the box

Frontend — Angular 17 standalone components

Dark-themed dashboard shell with sidebar navigation
4 KPI metric cards (Total Users, Active Users, Revenue, Conversion)
Revenue bar chart, Category doughnut, User Growth line chart (Chart.js 4)
Full AI chat panel with streaming responses, suggestion chips, typing cursor

Backend — Node.js / Express

Claude API proxy — your API key never hits the browser
Server-Sent Events (SSE) so tokens stream word-by-word in real time
/api/metrics and /api/chart-data endpoints (swap for your real DB in minutes)

The streaming part (how it actually works)

This is the bit most tutorials skip over. Here's the SSE endpoint on the backend:

app.post('/api/chat/stream', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const stream = await anthropic.messages.stream({
    model: 'claude-sonnet-4-5',
    max_tokens: 1024,
    system: systemPrompt,
    messages: req.body.messages,
  });

  for await (const chunk of stream) {
    if (chunk.type === 'content_block_delta') {
      res.write(`data: ${JSON.stringify({ token: chunk.delta.text })}\n\n`);
    }
  }
  res.write('data: [DONE]\n\n');
  res.end();
});

On the Angular side, the chat service reads the stream with EventSource and appends each token to the message in real time — so the user sees words appearing as Claude generates them, just like ChatGPT.

Get it running in under 10 minutes

# 1. Install everything
npm run install:all

# 2. Add your Claude API key
cp backend/.env.example backend/.env
# Edit .env → paste ANTHROPIC_API_KEY=sk-ant-...

# 3. Start both servers
npm run dev:backend    # terminal 1  → http://localhost:3000
npm run dev:frontend   # terminal 2  → http://localhost:4200

That's it. No Webpack config rabbit holes, no NgModules boilerplate.

Tech stack at a glance

Layer	Tech
Framework	Angular 17 (standalone, no NgModules)
AI	Anthropic Claude API
Charts	Chart.js 4
Backend	Node.js + Express
Styling	SCSS + CSS custom properties
Streaming	Server-Sent Events (SSE)