D&D-Style Alignment Chart for X Users

Introduction I recently analyzed an interesting D&D-style personality test that's currently trending on X (formerly Twitter). You can try it here: magic-x-alignment-chart.vercel.app What is D&D? Dungeons & Dragons (D&D) is the original tabletop RPG. When creating characters in D&D, players assign an "alignment" to define their character's personality. Photo of my old D&D rule books (Japanese edition) This system represents a character's ethical outlook and behavioral tendencies on two axes: "Lawful-Chaotic" and "Good-Evil." This web application applies the alignment chart concept to X (Twitter) users, using AI analysis to automatically position users on the grid. Development Background This project was inspired by an idea posted by @mdmathewdc: https://x.com/mdmathewdc/status/1899767815344722325 Later, @rauchg implemented drag-and-drop functionality: https://x.com/rauchg/status/1899895262023467035 And @f1shy-dev added AI analysis capabilities: https://x.com/vishyfishy2/status/1899929030620598508 Building on these implementations, the app was enhanced with UI improvements, mobile optimization, and performance tweaks, making it more accessible to a wider audience. It's fascinating to see how the open-source community transformed an idea into a functional product. App Features AI-Powered Analysis Uses Exa and OpenAI GPT4 to analyze user tweets Evaluates tendencies on the Lawful-Chaotic and Good-Evil axes Automatically positions users on the grid based on analysis results Interactive Controls Intuitive drag-and-drop positioning Lockable AI analysis results Random placement option for manual adjustments Tech Stack Next.js (App Router) TypeScript Framer Motion (animations) Vercel AI SDK IndexedDB (local storage) Upstash Redis (caching) Technical Implementation Highlights 1. Responsive Design useEffect(() => { const checkMobile = () => { setIsMobile(window.innerWidth window.removeEventListener("resize", checkMobile); }, []); The app implements dynamic layout adjustments based on screen size to ensure optimal user experience across devices from mobile to desktop. Balancing touch and mouse interactions was particularly challenging, but Framer Motion's capabilities help create a smooth experience. 2. AI-Based Alignment Analysis export async function analyzeAlignment(username: string) { try { const tweets = await fetchUserTweets(username); // Using Exa for analysis const analysis = await exaClient.run( `Based on ${username}'s tweets, determine their D&D alignment (lawful-chaotic, good-evil). Please reference these tweets: ${tweets.join("\n")}` ); return { lawChaos: analysis.lawChaosScore, // -5(chaotic) to +5(lawful) goodEvil: analysis.goodEvilScore, // -5(evil) to +5(good) confidence: analysis.confidence, explanation: analysis.reasoning }; } catch (error) { console.error("Alignment analysis error:", error); throw new Error("An error occurred while analyzing the user"); } } The app leverages Exa's contextual understanding to analyze users' tweet history, identifying personality traits and behavioral tendencies to calculate optimal positioning on the alignment chart. This allows for comprehensive analysis beyond simple word frequency, including context and sentiment. Prompt Structure const messages = [ { role: "system", content: dedent` Analyze the following tweets the given from Twitter user and determine their alignment on a D&D-style alignment chart. For lawful-chaotic axis: - Lawful (-100): Follows rules, traditions, and social norms. They value tradition, loyalty, and order. - Neutral (0): Balanced approach to rules and freedom - Chaotic (100): Rebels against convention, valuing personal freedom - follows their own moral compass regardless of rules or traditions For good-evil axis: - Good (-100): Altruistic, compassionate, puts others first - Neutral (0): Balanced self-interest and concern for others - Evil (100): Selfish, manipulative, or harmful to others. Some are motivated by greed, hatred, or lust for power. Based only on these tweets, provide a numerical assessment of this user's alignment. Be willing to move to any side/extreme! Since this is a bit of fun, be willing to overly exaggerate if the user has a specific trait expressed barely - e.g. if they are evil at some point then make sure to express it! - I don't just want everyone to end up as chaotic-neutral in the end... However don't always exaggerate a user's chaotic characteristic, you can also try to exaggerate their lawful or good/evil traits if they are more pronounced. Just be fun with it. For the explaination, try to avoid overly waffling - but show your reasoning behind your judgement. Yo

useEffect(() => {
  const checkMobile = () => {
    setIsMobile(window.innerWidth < 768);
  };

  checkMobile();
  window.addEventListener("resize", checkMobile);
  return () => window.removeEventListener("resize", checkMobile);
}, []);

export async function analyzeAlignment(username: string) {
  try {
    const tweets = await fetchUserTweets(username);

    // Using Exa for analysis
    const analysis = await exaClient.run(
      `Based on ${username}'s tweets, determine their D&D alignment (lawful-chaotic, good-evil).
       Please reference these tweets:
       ${tweets.join("\n")}`
    );

    return {
      lawChaos: analysis.lawChaosScore, // -5(chaotic) to +5(lawful)
      goodEvil: analysis.goodEvilScore,  // -5(evil) to +5(good)
      confidence: analysis.confidence,
      explanation: analysis.reasoning
    };
  } catch (error) {
    console.error("Alignment analysis error:", error);
    throw new Error("An error occurred while analyzing the user");
  }
}

  const messages = [
      {
        role: "system",
        content: dedent`
        Analyze the following tweets the given from Twitter user and determine their alignment on a D&D-style alignment chart.

        For lawful-chaotic axis:
        - Lawful (-100): Follows rules, traditions, and social norms. They value tradition, loyalty, and order.
        - Neutral (0): Balanced approach to rules and freedom
        - Chaotic (100): Rebels against convention, valuing personal freedom - follows their own moral compass regardless of rules or traditions

        For good-evil axis:
        - Good (-100): Altruistic, compassionate, puts others first
        - Neutral (0): Balanced self-interest and concern for others
        - Evil (100): Selfish, manipulative, or harmful to others. Some are motivated by greed, hatred, or lust for power.

        Based only on these tweets, provide a numerical assessment of this user's alignment. Be willing to move to any side/extreme!

        Since this is a bit of fun, be willing to overly exaggerate if the user has a specific trait expressed barely - e.g. if they are evil at some point then make sure to express it! - I don't just want everyone to end up as chaotic-neutral in the end... However don't always exaggerate a user's chaotic characteristic, you can also try to exaggerate their lawful or good/evil traits if they are more pronounced. Just be fun with it.

        For the explaination, try to avoid overly waffling - but show your reasoning behind your judgement. You can mention specific things about their user like mentioned traits/remarks or projects/etc - the more personalised the better.
      `.trim()
      },
      {
        role: "user",
        content:
          dedent`Username: @${username}


${profile_str}



${tweetTexts}
`.trim()
      }
    ] satisfies CoreMessage[]

// Data persistence with IndexedDB
const saveToLocalDB = async (placement: StoredPlacement) => {
  if (!db) return;
  try {
    const tx = db.transaction("placements", "readwrite");
    const store = tx.objectStore("placements");
    await store.put({
      ...placement,
      timestamp: new Date()
    });
    await tx.done;
  } catch (error) {
    console.error("Save error:", error);
  }
};

// API response caching with Upstash Redis
export async function cachedFetchTweets(username: string) {
  const cacheKey = `tweets:${username}`;

  // Check cache
  const cached = await redis.get(cacheKey);
  if (cached) return JSON.parse(cached as string);

  // Fetch from API
  const tweets = await fetchFromTwitterAPI(username);

  // Save to cache (valid for 24 hours)
  await redis.set(cacheKey, JSON.stringify(tweets), { ex: 86400 });

  return tweets;
}

const TouchControls = ({ onReset, onRandom }) => {
  return isMobile ? (
    <div className="fixed bottom-4 left-0 right-0 flex justify-center gap-3 z-10">
      <Button variant="outline" onClick={onReset}>
        <RefreshCw size={16} className="mr-2" />Reset
      </Button>
      <Button variant="outline" onClick={onRandom}>
        <Shuffle size={16} className="mr-2" />Random Placement
      </Button>
    </div>
  ) : null;
};

Related Posts

From Gaming to Healthcare: AI Research in My Master’s J...

Feb 19, 2025  0

Easy Development Environments

Mar 8, 2025  0

I Assigned an AI Assistant as My Jedi Teacher – Here’s ...

Mar 14, 2025  0