Read through this guide to set up xAI’s Grok API & get familiar with how it is used in the Product Hunt Launch Day Simulator.

​
Set up Grok API

First, create an account or sign in at the xAI Console. Next, navigate to the “API Keys” section and click “Create new API key”. Make sure to save your API key somewhere safe and do not share it with anyone. Once you have your API key, paste it in your .env file: 
XAI_API_KEY=your_xai_api_key

​
Demo App

The Launch Day Simulator showcases Grok’s capabilities in generating entertaining and realistic Product Hunt launch scenarios.

Launch Day Simulator

Generate hilarious Product Hunt launch simulations with metrics, drama, and tech community references

​
Structure

The API route in app/api/(apps)/grok/route.ts follows this structure:
  1. Takes in product launch details from the front-end
  2. Generates a prompt based on the inputs
  3. Calls Grok API using the prompt + JSON schema
  4. Extracts the structured JSON response containing:
    • Launch day timeline
    • Product Hunt metrics
    • Competitor drama
    • Founder profile
    • Launch day bingo card
  5. Stores the response in Supabase
  6. Returns a uuid to the front-end for fetching & displaying the simulation
More information on the codebase structure can be found here:

Structure

Understand the project structure of the codebase

​
API Response Structure

The Grok API returns structured JSON containing: 
{
  seoMetadata: {
    title: string;
    subtitle: string;
    description: string;
  };
  launchStats: {
    upvotes: number;
    comments: number;
    ranking: number;
    collections: number;
    launchScore: number;
    featured: boolean;
    rejectionReason?: string;
  };
  timeline: Array<{
    time: string;
    event: string;
    impact: string;
    upvoteCount: number;
  }>;
  founderProfile: {
    name: string;
    archetype: string;
    catchphrase: string;
    typicalTweet: string;
    quirks: string[];
    reputation: number;
  };
  // ... and more sections
}
The structured output enables rich visualizations including launch timelines, Product Hunt-style metrics, interactive bingo cards, and founder profile cards with tech community references.