Skip to main content
Get your League of Legends match analysis up and running with AI-powered coaching in minutes.

​
Prerequisites

Before you begin, make sure you have:
  • Node.js 18+ installed on your machine
  • npm, yarn, pnpm, or bun package manager
  • A Riot Games developer account (free to create)
1
Get Your Riot API Key
2
You’ll need a Riot Games API key to authenticate requests to their API.
3
  • Visit developer.riotgames.com
  • Sign in with your Riot Games account
  • Navigate to the dashboard and generate a new Development API Key
    • 4
    Development API keys expire every 24 hours. You’ll need to regenerate them daily or apply for a production key.
    5
    Clone and Install Dependencies
    6
    Clone the repository and install the required packages:
    7
    npm
    npm install
    yarn
    yarn install
    pnpm
    pnpm install
    bun
    bun install
    8
    Configure Environment Variables
    9
    Create a .env.local file in the root directory based on .env.example:
    10
    cp .env.example .env.local
    11
    Update the following required variables:
    12
    # Riot Games API key (development keys expire every 24h)
# Get yours at: https://developer.riotgames.com/
API_KEY=RGAPI-your-api-key-here

# Summoner Riot ID used for get-puuid and UI display
GAME_NAME=YourGameName
TAG_LINE=1234

# Auth (required for auth.js session cookie encryption)
# Generate with: npx auth secret
AUTH_SECRET=
    13
    The GAME_NAME and TAG_LINE are your default summoner credentials used for initial setup. Users can sign in with their own Riot IDs through the login page.
    14
    Generate AUTH_SECRET
    15
    NextAuth requires a secret for encrypting session cookies. Generate one using:
    16
    npx auth secret
    17
    Copy the generated secret and paste it into your .env.local file.
    18
    Optional: Enable AI Coaching
    19
    To enable AI-powered match analysis with OpenAI:
    20
    # Optional: OpenAI key for match context agent
OPENAI_KEY=sk-your-openai-key
ENABLE_MATCH_AGENT=true

# Timeline compare: value in milliseconds for AI comparison
TIMELINE_COMPARE=180000
NEXT_PUBLIC_TIMELINE_COMPARE=180000
    21
    Run the Development Server
    22
    Start the Next.js development server:
    23
    npm
    npm run dev
    yarn
    yarn dev
    pnpm
    pnpm dev
    bun
    bun dev
    24
    The application will be available at http://localhost:3000.
    25
    Sign In and View Your First Match
    26
  • Navigate to the login page - You’ll be automatically redirected if not authenticated
  • Enter your credentials:
    • Game Name: Your Riot ID without the tag (e.g., Faker)
    • Tag Line: Your tag without the # symbol (e.g., KR1)
    • API Key: Paste the Riot API key you generated in step 1
  • Click “Sign in” - The app will validate your credentials against the Riot API
  • View your matches - Once authenticated, you’ll see your match history with detailed stats
    • 27
    The API key is only used on the server and never exposed to the client. It’s securely stored in your JWT session token.

    ​
    What’s Next?

    Now that you’re up and running:

    Authentication

    Learn how NextAuth secures your Riot credentials

    API Reference

    Explore the Riot API integration

    ​
    Troubleshooting

    ​
    ”Invalid API key or Riot account”

    This error occurs when:
    • Your API key has expired (development keys last 24 hours)
    • The API key is incorrectly formatted
    • Your Game Name or Tag Line is incorrect
    Solution: Generate a new API key from the Riot Developer Portal.

    ​
    ”Riot ID not found”

    Double-check that your Game Name and Tag Line are correct. You can verify them in the League of Legends client.

    ​
    ”Too many requests”

    Development API keys have rate limits (20 requests per second, 100 per 2 minutes). Wait a moment and try again. If you see authentication errors, ensure your AUTH_SECRET is properly set: 
    npx auth secret
    Add the output to your .env.local file.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us