Back to guides
5
5 min

Finance App

Dashboard & Analysis Agent

From Pipeline to Product

Modules 1-4 built the engine — ingestion, encoding, retrieval, and a gateway with financial guardrails. But an engine without a dashboard is useless to analysts. This module builds the interface they'll actually use every day.

Financial dashboards have different requirements than general chat UIs. Analysts need data density — numbers, tables, trend indicators — alongside natural language analysis. They need to see the sources behind every claim. And they need to trust the numbers.

The Financial Analysis Agent

The core of the application is a LangGraph analysis agent — an orchestrated workflow that goes far beyond simple question-answering.

When an analyst asks "Compare Q3 margins across our top 5 competitors," the agent doesn't just search and summarize. It executes a multi-step workflow:

Step 1: Parse the Query

Extract structured intent from the natural language query:

  • Tickers: Identify which companies (resolve names to tickers if needed)
  • Metrics: What financial metrics are requested (gross margin, operating margin, net margin)
  • Period: What time period (Q3 2024, last 4 quarters, YTD)
  • Analysis type: Comparison, trend, screening, or deep-dive
  • Step 2: Identify Peer Group

    If the query says "top 5 competitors" without naming them, the agent needs to identify the peer group. This might come from:

  • Internal reports that define competitive landscape
  • Analyst notes that name competitors
  • Market data grouped by sector/industry
  • User-specified watchlist
  • Step 3: Parallel Data Fetching

    LangGraph's fan-out pattern retrieves data from all sources simultaneously:

  • SEC filings — Income statements for the requested companies and period
  • Earnings transcripts — Management commentary on margin drivers
  • Market data — Current valuations for context
  • Analyst notes — External perspectives on margin trends
  • This parallel execution is critical for performance. Fetching 5 companies x 4 sources sequentially would take seconds. In parallel, it completes in the time of the slowest single fetch.

    Step 4: Calculate Derived Metrics

    Raw filing data gives you revenue and cost of revenue. The agent calculates:

  • Gross margin = (Revenue - COGS) / Revenue
  • Operating margin = Operating Income / Revenue
  • Net margin = Net Income / Revenue
  • Quarter-over-quarter change for each metric
  • Year-over-year change for each metric
  • These calculations happen on extracted, verified numbers — not by asking the LLM to do arithmetic (which it does poorly).

    Step 5: Synthesize Analysis

    Feed the structured data through the AI Gateway (Module 4) with a focused prompt:

  • Here are the margin tables for 5 companies across 4 quarters
  • Here's what management said about margin trends
  • Here's what analysts expect going forward
  • Synthesize into a coherent analysis with supporting evidence
  • Step 6: Format Output

    Structure the response for the dashboard:

  • Summary — One paragraph key finding
  • Comparison table — Side-by-side metrics for all companies
  • Supporting quotes — Relevant excerpts from earnings calls
  • Source citations — Every number tagged with [Ticker | Period | Source]
  • Confidence score — Based on number validation from the gateway
  • Data freshness — "Based on data through [date]"
  • Dashboard UI Design

    Data-Dense Layout

    Financial dashboards prioritize information density over whitespace. The layout includes:

  • Chat panel (left 60%) — Streaming analysis with citations and tables
  • Metric sidebar (right 40%) — Current price, P/E, margins, rating changes for mentioned tickers
  • Period selector — Toggle between quarterly and annual views
  • Streaming with Financial Tables

    Standard streaming shows text appearing word by word. Financial streaming is more complex:

  • Tables should appear complete (not row by row) to avoid misleading partial data
  • Numbers should be displayed with proper formatting ($4.2B, 50.0%, +8.2%)
  • Confidence badges should appear alongside numbers (green check for verified, yellow warning for unverified)
  • Source Citations

    Every factual claim in the analysis must link back to its source:

  • Click a number to see the original filing excerpt
  • Click a quote to see the full transcript context
  • Hover over a metric to see the calculation and source data
  • Citations follow a standard format: [NVDA | Q3 2024 | 10-K | Income Statement]
  • Conversation History

    Financial analysts often refine their analysis through follow-up questions:

  • "Now show me how those margins changed from last year"
  • "Which of these companies mentioned pricing pressure on their earnings calls?"
  • "What's the consensus analyst rating for each?"
  • The chat maintains context, so follow-up questions build on previous results without re-retrieving everything.

    Suggested Follow-Ups

    After each analysis, the system suggests relevant next questions based on what data was retrieved but not yet discussed:

  • If margin data was retrieved but guidance wasn't shown: "What's management guidance for next quarter margins?"
  • If analyst notes were retrieved: "What are the current analyst ratings and price targets?"
  • If transcripts showed risk mentions: "What risks did management highlight in the latest call?"
  • These suggestions accelerate the analyst workflow — instead of thinking about what to ask next, the system surfaces the most relevant follow-up paths.

    What You'll Build

  • Extend the pre-seeded Next.js dashboard with streaming analysis and financial charts
  • Build the LangGraph analysis agent with parallel data fetching
  • Add metric comparison panels with data freshness badges
  • Implement source citations that link back to original filings and transcripts
  • Wire the chat to the AI Gateway with number validation and disclaimers
  • This is chapter 5 of AI Finance Analyst.

    Get the full hands-on course for $100 and build the complete system. Your projects become your portfolio.

    View course details