hub / github.com/f1shy-dev/x-alignment-chart

github.com/f1shy-dev/x-alignment-chart @main

51 symbols 151 edges 28 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

X Alignment Chart

Create D&D-style alignment charts for X (formerly Twitter) users. Place users on a Lawful-Chaotic and Good-Evil grid based on an AI analysis of their tweets or manually position them. Powered by Exa and Vercel AI SDK.

Try it here! → magic-x-alignment-chart.vercel.app

https://github.com/user-attachments/assets/2e5e2587-468e-4a77-ac59-742c92f8d58a

Tutorial

Enter an X username in the input field
Choose between:
AI Analysis (purple button): Analyzes the user's tweets and places them on the chart
Random Placement (black button): Places the user randomly on the chart for manual positioning
View the alignment chart with positioned users
Drag unlocked users to reposition them (AI-placed users are locked)
Click on chart axis labels to learn more about each alignment

Development Setup

Sign up for accounts with the AI provider you want to use (e.g., OpenAI (default), Anthropic), and obtain an API key.
Setup a Redis DB on Upstash Redis
Create a .env.local file based on the .env.example template
bun install to install dependencies
bun dev to run the development server

Deploy your own

Credits

Original concept by mdmatthewdc
Draggable v0 by rauchg
AI version (this one) by f1shy-dev

Extension points exported contracts — how you extend this code

ButtonProps (Interface)

(no doc)

src/components/ui/button.tsx

ExaApiResponse (Interface)

(no doc)

src/lib/parse-exa-profile.ts

Position (Interface)

(no doc)

src/app/page.tsx

ExaResult (Interface)

(no doc)

src/lib/parse-exa-profile.ts

Placement (Interface)

(no doc)

src/app/page.tsx

StoredPlacement (Interface)

(no doc)

src/lib/indexed-db.ts

IndexedDBInstance (Interface)

(no doc)

src/lib/indexed-db.ts

Core symbols most depended-on inside this repo

src/lib/indexed-db.ts

loadImage

called by 2

src/lib/load-avatar.ts

analyzeColorfulness

called by 2

src/lib/load-avatar.ts

getBestAvatarUrl

called by 2

src/lib/load-avatar.ts

parseExaUserString

called by 2

src/lib/parse-exa-profile.ts

Shape

Function 44

Interface 7

Languages

TypeScript100%

Modules by API surface

src/app/page.tsx16 symbols

src/lib/indexed-db.ts7 symbols

src/lib/redis.ts3 symbols

src/lib/parse-exa-profile.ts3 symbols

src/lib/load-avatar.ts3 symbols

src/lib/utils.ts2 symbols

src/hooks/use-mobile.tsx2 symbols

src/components/ui/use-mobile.tsx2 symbols

src/components/ui/alert-dialog.tsx2 symbols

src/app/components/analysis-panel.tsx2 symbols

src/lib/fetch-twitter-profile.ts1 symbols

src/hooks/use-debounce.ts1 symbols

For agents

$ claude mcp add x-alignment-chart \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact