SaaS Dashboard Example

SaaS application dashboard with analytics, user management, and metrics
Streaming
Anthropic
Analytics
Metrics

Overview

This example demonstrates how to use @brander/sdk with streaming for a SaaS application. It includes user analytics, subscription metrics, and business intelligence dashboards with progressive UI loading.

Implementation (Streaming)

saas-dashboard.tsx
import Brander, { anthropicStream } from "@brander/sdk";
import Anthropic from "@anthropic-ai/sdk";

const anthropic = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
});

function SaaSDashboard() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="saas-dashboard"
      onQueryStream={async function* (params) {
        const stream = anthropic.messages.stream({
          model: "claude-sonnet-4-20250514",
          max_tokens: params.max_tokens || 4000,
          messages: params.messages,
          tools: params.tools.anthropic,
        });
        yield* anthropicStream(stream);
      }}
      width="100%"
      height="800px"
    />
  );
}

Alternative: Backend with SSE

For production, you may prefer to keep API keys on the server:

saas-dashboard.tsx
import Brander, { sseStream } from "@brander/sdk";

function SaaSDashboard() {
  return (
    <Brander
      betaKey="bux_your_token"
      projectId="saas-dashboard"
      onQueryStream={(params) => sseStream("/api/agent", { params })}
    />
  );
}

Example Queries

Try these queries in your SaaS dashboard:

  • "Show user growth over the last 6 months"
  • "Display subscription conversion rates"
  • "Show feature usage by user segment"
  • "List customers at risk of churning"
  • "Show revenue breakdown by plan type"

Features Demonstrated

  • User Analytics: MAU, DAU, retention rates
  • Revenue Metrics: MRR, ARR, churn analysis
  • Feature Usage: Adoption rates and engagement
  • Business Intelligence: Custom reports and insights
  • Streaming UI: Progressive loading with AG-UI events