AI Era Developer Dashboard In Angular | Generated by AI

Home 2026.03

Question: How should I think about building an AI-era personal dashboard (showing GitHub activity, OpenRouter token usage, X/Twitter followers/following) in Angular 21, with drag-and-drop widgets? What similar projects can I reference? What should I name it?

Answer:

Project Vision: The “AI-Era Developer Dashboard”

This is a genuinely exciting and well-timed project idea. You’re essentially building a personal command center for the AI developer — combining social footprint, code activity, and LLM consumption in one customizable canvas. Think of it as a “Netvibes for the AI age.”

🧠 Why Angular 21 is a Strong Choice Here

Angular 21, released at the end of 2025, brings Signal Forms as a reactive form API, zoneless change detection as the new default, Vitest as the modern test environment, Angular Aria for accessible components, and an enhanced MCP server for AI-supported development.

Key Angular 21 features that directly benefit your dashboard:

📦 Core Widgets to Build

Widget Data Source API
GitHub Activity Heatmap GitHub REST/GraphQL api.github.com
OpenRouter Token Usage OpenRouter /api/v1/generation, /activity
X/Twitter Followers/Following Twitter API v2 api.twitter.com/2/users
AI Cost Tracker OpenRouter + Anthropic Usage accounting APIs
Model Usage Chart OpenRouter Stats endpoint

For OpenRouter specifically, key metrics you can surface include: total token usage (input vs output split), token usage over time, error rate, cache utilization percentage, model distribution, cost distribution by model, and request volume over time.

OpenRouter lets you include usage: {include: true} in requests to receive usage data in the response, and you can also review your history in the Activity section.

🔗 Similar Projects to Reference

For Widget/Dashboard Architecture

For Grid/Drag-Drop Widget Layout

src/
├── widgets/                    # Each widget = standalone component
│   ├── github-heatmap/
│   ├── openrouter-tokens/
│   ├── twitter-profile/
│   ├── ai-cost-chart/
│   └── widget-registry.ts      # Registry for dynamic widget loading
├── core/
│   ├── dashboard-store.ts      # Signal-based state (layout, widget config)
│   ├── api/                    # Per-service API services
│   └── widget.model.ts
├── layout/
│   ├── grid.component.ts       # CDK-based drag/drop grid
│   └── widget-shell.component.ts
└── settings/
    └── api-keys.component.ts   # Store keys in localStorage/encrypted

State management: Use Angular 21 Signals + localStorage persistence for dashboard layout config. No NgRx needed — signals are expressive enough.

Widget protocol: Define a WidgetComponent interface with a config input signal, a title, and a refresh() method. Every widget implements this interface.

🛠️ Suggested Tech Stack

Layer Choice Reason
Framework Angular 21 Signals, zoneless, standalone
UI Components Angular Aria + Tailwind Accessible, unstyled freedom
Charts ngx-echarts or Chart.js Both have Angular wrappers
Grid layout angular-gridster2 Mature, Angular-native
HTTP Angular HttpClient (functional) Built-in, signals-friendly
Auth/Keys Angular Signal Store + encrypt-storage Secure local key storage
Testing Vitest (Angular 21 default) Fast, zoneless-native

💡 Project Name Suggestions

Name Vibe
NexusBoard Hub of all your feeds — coding, AI, social
TokenPulse Emphasizes the AI/token-era angle
DevAura Your developer presence at a glance
SignalBoard Double meaning — Angular Signals + social signals
AIgrid Grid-based, AI-first
VibeDash Leans into the “vibe coding” era, light and fun
StackPulse Your full developer stack, live
ContextPanel You monitor your context — code, AI, social

Personal pick: SignalBoard — it’s clever (Angular Signals + social signal monitoring), memorable, and domain-worthy.

🚀 Getting Started Checklist

  1. ng new signal-board --standalone — scaffolds Angular 21 standalone project
  2. Install angular-gridster2 for drag/drop widget grid
  3. Create a WidgetRegistryService with a signal-based list of active widgets
  4. Build GitHub widget first (public API, no auth needed for public profiles)
  5. Add OpenRouter widget using the /api/v1/generation stats endpoint
  6. Twitter/X widget last — API v2 requires OAuth 2.0, plan ahead
  7. Add a + button to open a widget catalog modal — pick and add to grid
  8. Persist layout JSON to localStorage on every drag/resize

⚠️ Potential Challenges

References:

Back Donate