Open Source Transparency SDK

OpenAgency

An open source transparency SDK for agencies and studios to share earnings from client work and products.

# Install the core package
npm install openagency

# Install React integration
npm install @openagency/react

# Install vendor connectors
npm install @openagency/stripe

Features

OpenAgency provides a comprehensive set of tools for transparency and analytics

Unified Metrics API

Consistent data format across all connectors

Access all your metrics through a single, consistent API regardless of the data source.

Extensible Connector System

Easy to add new data sources

Create custom connectors for any service or integrate with existing ones with minimal effort.

React Integration

Hooks and components for seamless integration

Use our React hooks and components to easily display your metrics in your applications.

ShadcnUI Components

Beautiful UI components

Leverage beautiful, accessible UI components built on ShadcnUI for displaying your data.

TypeScript-First

Fully typed for the best developer experience

Enjoy complete TypeScript support for a better development experience with autocomplete and type safety.

Provider Pattern

Flexible and interchangeable data sources

Switch between different data providers without changing your application code.

Examples

See how easy it is to integrate OpenAgency into your projects

Server Component

Next.js App Router

import { getFinanceMetrics } from "openagency";
import { stripe } from "@openagency/stripe";

export default async function Page() {
  const { customerCount } = await getFinanceMetrics({
    provider: stripe(),
  });

  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center">
        <h1 className="text-2xl font-bold">
          You have {customerCount} customers! 🎉
        </h1>
      </div>
    </div>
  );
}

Client Component

With API Route

// app/api/metrics/finance/route.ts
import { getFinanceMetrics } from "openagency";
import { stripe } from "@openagency/stripe";

export async function GET() {
  const metrics = await getFinanceMetrics({ provider: stripe() });

  return Response.json(metrics);
}

// app/client-component.tsx
import { useFinanceMetrics } from "@openagency/react";

export default function ClientComponent() {
  const { customerCount } = useFinanceMetrics({
    api: "/api/metrics/finance",
  });

  return <div>You have {customerCount} customers! 🎉</div>;
}

Documentation

Everything you need to get started with OpenAgency

Getting Started

Quick start guide for OpenAgency

Learn how to install and set up OpenAgency in your project.

Read Guide

API Reference

Detailed API documentation

Explore the complete API reference for all OpenAgency packages.

View API

Provider Guide

Learn about the provider pattern

Understand how to use and create custom providers for your data sources.

Read Guide