Thomas Wood Back to work

03 / AI Product + Frontend Engineering

2026

Turning live draft context into useful, matchup-specific guidance.

A React and TypeScript application that combines Riot champion data, composition analysis, matchup context, and OpenAI-powered coaching to help players make better decisions during champion select.

React / TypeScript / OpenAI API / Playwright / GitHub Actions

Context before intelligence

Draft capturedContext assembledGuidance requested

01 / The Problem

Champion select moves quickly. Generic advice usually doesn't.

Most build guides and matchup resources answer one question at a time. Champion select creates a more contextual problem: what am I playing, what am I facing, what does the enemy composition look like, and what should change because of it?

Core product question

What advice is useful for this specific draft?
Contextual guidance / Not an outcome guarantee

02 / Draft Input

Useful recommendations start with useful context.

The application begins with the actual champion-select situation rather than presenting generic static advice.

Draft context

  1. 01Player champion
  2. 02Opposing champions
  3. 03Enemy composition
  4. 04Matchup information
LoL Draft Helper workspace with player champion selection, enemy-team input, recommendations, and coaching panel
Draft input / Composition context

03 / Data Layer

Build context from real game data before adding intelligence.

Riot Data Dragon champion data supports the application experience, including champion information and visual assets used throughout the draft interface.

Champion-data foundation

  1. 01Riot Data Dragon
  2. 02Champion data
  3. 03Champion icons
  4. 04Autocomplete

04 / Context

The matchup isn't just one champion versus another.

The application also considers the broader enemy composition so recommendations can respond to the draft rather than treating every matchup as an isolated one-versus-one problem.

Lane matchupEnemy compositionChampion context
Relevant guidance

05 / Recommendations

Turn context into something the player can act on.

Contextual application logic surfaces recommendations from the draft, while the AI coach provides a separate path for situation-aware coaching. AI is one layer of the product, not the source of every recommendation.

Two outputs / Shared context

Draft context
01 / Application logicComposition + matchup logicRecommendations
02 / AI layerContext provided to modelAI coach

06 / AI Coach

Give the model the situation before asking for advice.

Instead of opening a generic chatbot, the AI coaching experience is provided with relevant champion-select context so its response can reflect the player's champion, opposing composition, and matchup situation.

LoL Draft Helper showing enemy composition analysis, matchup recommendations, item ordering, and context-aware AI coaching
Matchup guidance / AI coach

07 / System Flow

The useful part is how the pieces work together.

Context pipeline

  1. 01Draft input
  2. 02Champion data
  3. 03Matchup context
  4. 04Composition analysis
  5. 05Recommendations
  6. 06AI coach

08 / Testing

The product isn't finished when the interface works once.

Playwright browser tests cover important user flows and are connected to GitHub Actions so application behavior is checked automatically on pushes and pull requests.

Playwright UI testsGitHub ActionsCI on push + PR

Automated check

  1. 01Code change
  2. 02Push / PR
  3. 03Playwright
  4. 04User flows checked

09 / Product Thinking

AI is more useful when the product does the groundwork first.

01

Context before prompting

Collect relevant draft information before asking the model to provide guidance.

02

Product logic before AI

Use normal application logic where deterministic behavior is more appropriate instead of turning every feature into an AI request.

03

Guidance inside the workflow

Keep coaching connected to champion select rather than sending the user to a separate general-purpose chatbot.

04

Testing beyond the happy path

Automate important user flows so iteration does not quietly break previously working behavior.

10 / Build

A modern frontend with AI as one layer of the product.

The application combines a responsive React and TypeScript interface with Riot champion data, contextual recommendation logic, OpenAI-powered coaching, and automated browser testing.

Verified implementation

  • 01React
  • 02TypeScript
  • 03Riot Data Dragon
  • 04OpenAI API
  • 05Playwright
  • 06GitHub Actions

11 / Outcome

A draft tool built around context instead of generic advice.

The finished application brings champion data, composition analysis, matchup context, recommendations, and AI-powered coaching into one champion-select workflow, with automated testing supporting continued iteration.

End of Selected Work

Back to Selected Work