Personal Dashboard (ClauDash)

A React-based personal dashboard application that generates AI-powered daily briefings using Claude (Anthropic). The app aggregates data from multiple configurable sources—including weather, news APIs, Reddit, and RSS feeds—and uses Claude to create personalized, conversational briefings that highlight what's interesting and track changes over time. Includes an interactive chat interface and intelligent caching to minimize API usage.

Quick Setup

After cloning the repository, follow these steps to get started:

1. Install dependencies

   cd claudash
   npm install
   

2. Configure environment variables

   cp .env.example .env.local
   

   Edit .env.local and add your Anthropic API key:

   REACT_APP_ANTHROPIC_API_KEY=sk-ant-your-actual-key-here
   

3. Configure your data sources and location (optional)

   In .env.local, customize these settings:

   • REACT_APP_LOCATION - Your location for weather (e.g., "harrisburg, pa, usa")
   • REACT_APP_DATA_SOURCES - Comma-separated URLs to fetch from
   • REACT_APP_CLAUDE_INSTRUCTIONS - Custom instructions for briefing tone/focus

4. Start the application

   npm start
   

   This command runs both the Vite dev server (port 5173) and the proxy server (port 3001) concurrently.

5. Access the dashboard

   Open your browser to http://localhost:5173

How It Works

Architecture

The application consists of three main layers:

1. Data Fetching Layer (src/services/dataFetcher.js)

   • Fetches data from configured sources (Reddit JSON APIs, RSS feeds, etc.)
   • Retrieves weather information using Open-Meteo API
   • Implements intelligent caching with configurable TTL to minimize API calls
   • Handles multiple data sources in parallel with graceful error handling

2. AI Processing Layer (src/services/claudeService.js)

   • Sends aggregated data to Claude via a local Express proxy server
   • Builds context-aware prompts that include yesterday's briefing for comparison
   • Generates personalized briefings (300-400 words) with personality and insights
   • Tracks token usage and estimated API costs
   • Provides a chat interface for follow-up questions

3. Presentation Layer (src/components/)

   • Material-UI widgets display briefing, weather, and news data
   • Drag-and-drop capable widget layout (via MUI flex grid)
   • Dark/light theme toggle
   • Chat interface for conversational interaction with Claude
   • Debug panel for development (toggleable via env variable)

Data Flow

1. On Load: Dashboard checks localStorage for today's cached briefing
2. If Not Cached: Fetches data from all configured sources in parallel
3. Data Aggregation: Combines weather and news data with standardized schema
4. AI Generation: Sends data + yesterday's briefing to Claude for context-aware briefing
5. Caching: Stores briefing and raw data in localStorage with timestamps
6. Display: Renders briefing and individual source widgets
7. Refresh: Manual refresh button forces fresh data fetch and new briefing generation

Proxy Server

The application uses a local Express proxy server (proxy-server.js) to communicate with the Anthropic API. This is necessary because:

• Browser CORS restrictions prevent direct API calls from the frontend
• Keeps the API key secure from browser developer tools
• Provides a single point for API request/response logging

The proxy server is automatically started when you run npm start and runs on port 3001 alongside the Vite dev server (port 5173).

Troubleshooting the Proxy Server

If you encounter errors like "Failed to fetch" or "Network request failed" when generating briefings:

1. Check if the proxy server is running: Look for console output showing Proxy server listening on port 3001
2. Restart the application: The easiest way to restart both servers is to:
   • Stop the current process (Ctrl+C in terminal)
   • Run npm start again

If you need to run the servers separately for debugging:

# Terminal 1: Run proxy server only
npm run proxy

# Terminal 2: Run Vite dev server only
npm run dev

Source Parser

The sourceParser.js service intelligently handles various data formats:

• JSON APIs: Reddit, custom JSON endpoints
• RSS/XML Feeds: Parses RSS feeds with full article content
• HTML Pages: Uses Claude to extract and summarize web page content
• Weather: Standardizes Open-Meteo weather data into a consistent format

All sources are normalized into a common schema before being sent to Claude.

Storage & Caching

The app uses localStorage for two types of caching:

1. Briefing History: Stores daily briefings with dates for historical context
2. Source Data Cache: Short-term cache (default 15 min) for API responses to avoid redundant fetches

The storageService.js handles all persistence with automatic cleanup of old data based on REACT_APP_HISTORY_DAYS.

Features

• AI-Powered Briefings: Claude generates conversational, personalized summaries
• Historical Context: Compares today's news with yesterday's to highlight changes and follow-ups
• Multiple Data Sources: Configure any combination of JSON APIs, RSS feeds, or web pages
• Smart Caching: Reduces API calls and costs through intelligent data caching
• Interactive Chat: Ask Claude follow-up questions about your briefing
• Token Tracking: Real-time display of API usage and estimated costs
• Theme Support: Toggle between light and dark themes
• Responsive Layout: Flexible widget grid adapts to screen size
• Weather Integration: Location-based weather from Open-Meteo API (supports zip codes and city names)
• Row-based Layout: Configure widgets in multiple rows using JSON object format
• Enhanced Reddit Display: Shows post age, upvotes, comments, and optimized images
• Debug Mode: Developer tools for testing and troubleshooting

Configuration Options

All configuration is done via environment variables in .env.local:

Variable	Description	Default
REACT_APP_ANTHROPIC_API_KEY	Your Anthropic API key (required)	-
REACT_APP_LOCATION	Location for weather (zip code or city name)	-
REACT_APP_DATA_SOURCES	JSON object for rows or comma-separated URLs	Reddit URLs
REACT_APP_CLAUDE_MODEL	Claude model to use	claude-sonnet-4-5-20250929
REACT_APP_CLAUDE_INSTRUCTIONS	Custom briefing instructions	-
REACT_APP_REFRESH_INTERVAL	Cache TTL in minutes	15
REACT_APP_HISTORY_DAYS	Days of history to keep	7
REACT_APP_CORS_PROXY	Custom CORS proxy URL	allorigins.win
REACT_APP_DEBUG_MODE	Enable debug features	false

Project Structure

claudash/
├── proxy-server.js              # Express proxy for Anthropic API
├── src/
│   ├── components/
│   │   ├── Dashboard.jsx        # Main dashboard container
│   │   ├── ChatInterface.jsx    # Floating chat widget
│   │   └── widgets/             # Individual data display widgets
│   ├── services/
│   │   ├── claudeService.js     # Claude API integration
│   │   ├── dataFetcher.js       # Multi-source data fetching
│   │   ├── sourceParser.js      # Parse various data formats
│   │   └── storageService.js    # localStorage management
│   └── utils/
│       ├── constants.js         # App-wide constants
│       └── corsProxy.js         # CORS proxy utilities

Major Dependencies

• React (v19) - UI framework
• Material-UI (v7) - Component library and design system
• Emotion - CSS-in-JS styling for MUI
• Vite (v4) - Build tool and dev server
• Express (v5) - Proxy server for API communication
• Anthropic Claude API - AI-powered text generation

Development

Running in Development Mode

npm start              # Runs both dev server and proxy
npm run dev            # Run only Vite dev server
npm run proxy          # Run only proxy server

Building for Production

npm run build          # Creates optimized production build
npm run preview        # Preview production build locally

Debugging

Set REACT_APP_DEBUG_MODE=true in .env.local to enable:

• Debug panel with raw data inspection
• Console logging for API calls
• Dummy data generation for testing

Tips & Best Practices

• API Costs: The app displays token usage and estimated costs after each briefing generation. Typical briefings cost $0.02-0.05 depending on data source complexity.
• Caching: Briefings are cached per day; use the refresh button to force a new generation.
• Custom Instructions: Use REACT_APP_CLAUDE_INSTRUCTIONS to tailor briefing style (e.g., "Focus on tech news, be concise").
• Data Sources: Reddit JSON endpoints (/r/subreddit.json) work well. RSS feeds are also supported. Use JSON object format for row-based layouts: {"row1":["url1","url2"],"row2":["url3","url4"]}
• Clear Cache: Use the trash icon button to clear all cached data and reset the app.

License

MIT License - see LICENSE file for details.