AT Proto Quote Graph Visualizer#

A web application that visualizes quote retweet relationships on AT Protocol (Bluesky) as an interactive graph. Enter any Bluesky post URL, and the tool will traverse up to find the root post, then crawl down to discover all quote posts, creating a complete network visualization.

Features#

• 🔍 Root Discovery: Automatically finds the original post even when starting from a quote
• 📊 Complete Graph: Fetches the entire quote network at full depth with no limits
• 🎨 Interactive Visualization: Pan, zoom, and click nodes to explore the graph
• ⚡ Real-time Data: Queries the Constellation API for up-to-date relationships
• 🎯 No Dependencies: Stateless tool - no accounts or databases needed

Architecture#

• Frontend: Astro 5.x with TypeScript and React for interactive components
• Visualization: Cytoscape.js for graph rendering
• Backend: Rust with Axum for high-performance API server
• Data Source: Constellation API (constellation.microcosm.blue)

Prerequisites#

• Rust 1.75+ (Install Rust)
• Node.js 18+ and npm (Install Node.js)

Installation#

1. Clone the repository:

git clone https://github.com/yourusername/retweet-graph.git
cd retweet-graph

2. Install backend dependencies:

cd backend
cargo build

3. Install frontend dependencies:

cd ../frontend
npm install

Development#

Running in Development Mode#

You'll need two terminal windows:

Terminal 1 - Backend Server:

cd backend
cargo run

The API server will start on http://localhost:8080

Terminal 2 - Frontend Dev Server:

cd frontend
npm run dev

The frontend will be available at http://localhost:4321

The frontend dev server is configured to proxy API requests to the backend automatically.

Building for Production#

1. Build the frontend:

cd frontend
npm run build

This creates optimized static files in frontend/dist/

2. Run the backend:

cd backend
cargo run --release

The backend will serve both the API and the static frontend files at http://localhost:8080

Usage#

1. Open the application in your browser
2. Paste a Bluesky post URL into the input field (e.g., https://bsky.app/profile/anisota.net/post/3m2rsv5b5v62s)
3. Click "Generate Graph" or press Enter
4. Wait while the tool:
   • Traverses up to find the root post
   • Crawls down to discover all quote posts
   • Builds the complete relationship graph
5. Explore the interactive visualization:
   • Pan: Click and drag the background
   • Zoom: Use mouse wheel
   • Select nodes: Click any post to see details
   • Open in Bluesky: Click "View on Bluesky" in the details panel

Graph Legend#

• 🔴 Red node: Root post (original post being quoted)
• 🔵 Blue nodes: Quote posts
• ➡️ Arrows: Point from quote post to the post being quoted

API Endpoints#

GET /api/graph#

Fetches the complete quote graph for a given Bluesky post.

Query Parameters:

• url (required): Full Bluesky post URL

Example:

curl "http://localhost:8080/api/graph?url=https://bsky.app/profile/anisota.net/post/3m2rsv5b5v62s"

Response:

{
  "nodes": [
    {
      "uri": "at://did:plc:xxx/app.bsky.feed.post/yyy",
      "author_did": "did:plc:xxx",
      "author_handle": "username.bsky.social",
      "text": "Post content...",
      "created_at": "2024-01-01T12:00:00.000Z"
    }
  ],
  "edges": [
    {
      "source": "at://...",
      "target": "at://...",
      "relationship": "quotes"
    }
  ],
  "root_uri": "at://..."
}

Project Structure#

retweet-graph/
├── backend/                    # Rust Axum server
│   ├── src/
│   │   ├── main.rs            # Server setup and routing
│   │   ├── api.rs             # API endpoint handlers
│   │   └── constellation.rs   # Constellation API client
│   └── Cargo.toml
├── frontend/                   # Astro application
│   ├── src/
│   │   ├── pages/
│   │   │   └── index.astro    # Main page
│   │   └── components/
│   │       └── GraphVisualizer.tsx  # Graph visualization component
│   ├── public/
│   ├── package.json
│   └── astro.config.mjs
└── README.md

How It Works#

1. URL Parsing: Extracts handle and record key from Bluesky URL
2. Handle Resolution: Converts handle to DID via AT Proto API
3. URI Construction: Creates AT Proto URI format (at://did/app.bsky.feed.post/rkey)
4. Upward Traversal: Checks if post is a quote, follows chain to root
5. Downward Crawl:
   • Queries Constellation API for backlinks (quotes)
   • Recursively fetches all quote posts
   • Uses visited set to prevent infinite loops
6. Graph Building: Constructs nodes and edges for visualization
7. Frontend Rendering: Cytoscape.js renders interactive force-directed graph

Technologies#

• Backend: Rust 1.75+, Axum 0.7, Tokio, Reqwest, Serde
• Frontend: Astro 5.x, TypeScript, React 19
• Visualization: Cytoscape.js
• APIs:
  • Constellation API (https://constellation.microcosm.blue)
  • AT Proto / Bluesky Public API

Troubleshooting#

Backend won't start#

• Ensure port 8080 is not in use
• Check that all Rust dependencies are installed: cargo build

Frontend won't build#

• Clear node_modules and reinstall: rm -rf node_modules && npm install
• Check Node.js version: node --version (should be 18+)

Graph takes too long to load#

• Large quote networks can take time to traverse
• The tool fetches the complete graph with no depth limit
• Check browser console for error messages

No quotes found#

• Ensure the post has been quoted on Bluesky
• The Constellation API may take time to index new relationships
• Check that the URL format is correct

Contributing#

Contributions are welcome! Please feel free to submit a Pull Request.

License#

MIT License - feel free to use this project for any purpose.

Acknowledgments#

• Constellation API by Microcosm for indexing AT Proto links
• Cytoscape.js for graph visualization
• Astro for the frontend framework
• Axum for the Rust web framework