Setup Guide

Choose your integration path and follow the setup for your layer. See the Packages overview for installation, package descriptions, and peer dependencies.

Need sign-in flows? Start with Authentication. For wire-level streaming details, see WebSocket Protocol. For end-to-end implementations, see Real-Time Orderbook and Real-Time Charts.

SDK (vanilla JS/TS)
React (hooks)
React (UI components)
React (with auth)

No framework dependency. Works in browsers, Node.js, and React Native.

import { createAggClient, CandleBuilder } from "@agg-market/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

// REST: fetch events, orderbooks, charts
const events = await client.getVenueEvents({ limit: 10 });
const book = await client.getAggregatedOrderbook({ marketId: "..." });
const route = await client.getSmartRoute({ marketId: "...", qty: 50, side: "yes" });

// WebSocket: real-time orderbook + trades
const builder = new CandleBuilder();
const ws = client.createWebSocket({
  onSnapshot: (id, book) => {
    if (book.midpoint != null) builder.addMidpoint(book.midpoint, book.timestamp);
  },
  onDelta: (id, book) => {
    if (book.midpoint != null) builder.addMidpoint(book.midpoint, book.timestamp);
  },
  onTrade: (trade) => {
    builder.addTrade(trade.price, trade.size, trade.timestamp);
  },
});

ws.subscribe("your-market-id");

// Read candles for any chart library
builder.onChange(() => {
  const candles = builder.getClosed("5m");
  const forming = builder.getForming("5m");
  yourChart.update(candles, forming);
});

Bring your own UI. Hooks handle WS subscriptions, caching, and cleanup.

import { AggProvider, QueryClient, QueryClientProvider } from "@agg-market/hooks";
import { createAggClient } from "@agg-market/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AggProvider client={client}>
        <MyApp />
      </AggProvider>
    </QueryClientProvider>
  );
}

Then use hooks in any component:

import { useLiveMarket, useLiveCandles, useSmartRoute } from "@agg-market/hooks";

function MarketView({ market }) {
  const { orderbook } = useLiveMarket(market.marketId);
  const { candles, liveCandle } = useLiveCandles({
    market,
    interval: "5m",
    mode: "venue",
    startTs: Date.now() - 86_400_000,
    endTs: Date.now(),
  });
  const { data: route } = useSmartRoute({ marketId: market.marketId, qty: 50, side: "yes" });

  return <YourChart data={candles} live={liveCandle} orderbook={orderbook} route={route} />;
}

Hook	What it does
`useLiveMarket(id)`	Live orderbook via WS
`useLiveCandles({ market, interval, mode })`	REST + live OHLCV candles
`useSmartRoute({ marketId, qty, side })`	Route preview across available liquidity
`useLiveTrades(id)`	Real-time trade feed
`useMarketOrderbook({ marketId })`	Aggregated orderbook + venue breakdown

Pre-built, themed components. Drop in and go.

import "@agg-market/ui/styles.css";
import { AggProvider, QueryClient, QueryClientProvider } from "@agg-market/hooks";
import { createAggClient } from "@agg-market/sdk";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AggProvider client={client} config={{ enableAnimations: true, enableLiveUpdates: true }}>
        <MyApp />
      </AggProvider>
    </QueryClientProvider>
  );
}

Then use components:

import { EventMarketPage } from "@agg-market/ui/pages";
import { MarketDetails } from "@agg-market/ui/events";
import { LineChart } from "@agg-market/ui/primitives";

// Full event page — hero chart, market cards, orderbooks, all live
<EventMarketPage eventId="..." />

// Or individual components
<MarketDetails event={event} marketId={marketId} defaultTab="graph" />
<LineChart series={series} chartType="candlestick" height={320} live />

Full stack with connect/sign-in UI. See Authentication for detailed flow examples.

import "@agg-market/ui/styles.css";
import { AggProvider, QueryClient, QueryClientProvider } from "@agg-market/hooks";
import { createAggClient } from "@agg-market/sdk";
import { AggAuthProvider, ConnectButton, createGoogleAuthMethod } from "@agg-market/auth";
import { useSiweAuthMethod } from "@agg-market/auth/siwe";
import { WagmiProvider } from "wagmi";
import { wagmiConfig } from "./wagmi-config";

const client = createAggClient({
  baseUrl: "https://api.agg.market",
  appId: "your-app-id",
  wsUrl: "wss://ws.agg.market/ws",
});

const queryClient = new QueryClient();

function AuthButton() {
  const siwe = useSiweAuthMethod({ statement: "Sign in" });
  return (
    <AggAuthProvider methods={[siwe, createGoogleAuthMethod()]}>
      <ConnectButton />
    </AggAuthProvider>
  );
}

function App() {
  return (
    <WagmiProvider config={wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <AggProvider client={client}>
          <AuthButton />
        </AggProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

WebSocket endpoint

If you create raw sockets yourself, connect to:

wss://ws.agg.market/ws?appId=YOUR_APP_ID

The SDK and hooks manage connection, reconnection, resnapshot requests, and orderbook integrity checks automatically.

Next steps

Authentication

Add wallet, OAuth, or email sign-in on top of the base client setup.

WebSocket Protocol

Review the wire format, auth upgrade flow, heartbeat, and reconnection behavior.

Real-Time Orderbook

SDK, hooks, and UI recipes for live orderbook rendering.

Real-Time Charts

Build live OHLCV charts from REST history and WebSocket updates.

Getting Started

Components

REST API

WebSocket Protocol

Authentication

User Profile

Funding & Execution

Real-Time Data

Setup Guide

Setup Guide

WebSocket endpoint

Next steps

Authentication

WebSocket Protocol

Real-Time Orderbook

Real-Time Charts

Getting Started

Components

REST API

WebSocket Protocol

Authentication

User Profile

Funding & Execution

Real-Time Data

​Setup Guide

​WebSocket endpoint

​Next steps

Authentication

WebSocket Protocol

Real-Time Orderbook

Real-Time Charts

Setup Guide

WebSocket endpoint

Next steps