> For the complete documentation index, see [llms.txt](https://docs.oogabooga.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.oogabooga.io/developers/meta-api/frontend-integration-guide/meta-aggregator-quote-streaming.md).

# Meta Aggregator Quote Streaming

[Github](https://github.com/0xoogabooga/meta-agg-fe-tutorial) 

[Live demo](https://meta-agg-fe-tutorial.vercel.app/?tab=quotes)

<figure><img src="/files/3Db6ntHddlbQ0CMnoWeI" alt=""><figcaption></figcaption></figure>

This example shows how to stream real-time swap quotes from multiple aggregators simultaneously.

**Architecture Overview**

**🏗️ Backend Infrastructure**

* **Ooga Booga Meta Dex Aggregator**: Service providing real-time swap quotes
* **Server-Sent Events**: Streaming infrastructure for live updates

**📁 Frontend Components**

1. **API Layer** (`src/api/meta-stream-api.ts`)
   * Manages SSE connections to the aggregator API
   * Handles quote stream parameters and events
2. **Connection Management** (`src/hooks/use-quote-stream.ts`)
   * React hook for managing quote streams
   * Event subscription and cleanup lifecycle
3. **Business Logic** (`src/hooks/use-aggregators-quote.ts`)
   * Preconfigured hook for USDT/HYPE quotes
   * Built on top of `useQuoteStream`
4. **UI Components** (`src/components/`)
   * React components for displaying quote data

> **✅ That's everything you need to get started with streaming quotes!**