How I Built Gameplan AI with Claude/OpenAI, React, and OpenSearch on DigitalOcean

What if every athlete had a high-level coach in their pocket?

That was the idea behind Gameplan AI—a pair of vertical AI agents for tennis and volleyball. They delivered smart, actionable advice on:

• Drills and practice plans
• Match strategy and mental performance
• Recruiting and nutrition tips

I built both agents over two weekends and deployed them live for a few months during my 14-year-old twins’ tennis and volleyball seasons.

The stack:

• Claude 3.5 Haiku for reasoning and generation (tested OpenAI GPT-4o and DeepSeek-R1, but Haiku offered the best balance of speed, quality, and cost)
• OpenSearch for a custom knowledge base
• React Native Web for lightweight UIs
• DigitalOcean to run everything at low cost

Though the apps are currently offline, this post breaks down the full architecture, costs, and lessons learned. If you’re building a vertical AI app—feel free to steal the stack.

📺 Watch It in Action

I recorded demo videos of each agent running live:

• 🏐 Watch the Volleyball Demo
• 🎾 Watch the Tennis Demo

These show the complete user flow—ask a question, get a structured answer grounded in real and custom coaching material, all running through Claude and OpenSearch.

🧱 Tech Stack Overview

🧠 Embedded Knowledge Bases

Volleyball Knowledge Base

I curated a 142MB dataset of real-world volleyball content, including:

• USA Volleyball Indoor Rules Book
• Girls Division training schedules
• Coaching manuals
• Drill books
• Mental training guides
• Recovery protocols

I uploaded and embedded this dataset using DigitalOcean’s OpenSearch dashboard. Everything was indexed and made queryable through Claude using the DO Agent Platform’s retrieval feature.

⚙️ Claude Agent Setup

Each sport has a dedicated agent:

• volleyball-claude-35-haiku-monthdayyear
• tennis-claude-35-haiku-monthdayyear

Each runs Anthropic Claude 3.5 Haiku with a linked OpenSearch knowledge base. I added custom prompt instructions directly in the DO UI to ensure all responses were:

• Scannable in < 60 seconds
• Numbered with no skipped points
• Mobile-first
• Encouraging, actionable, and sport-specific
• Always labeled with: Model: Claude 3.5 Haiku so that as I experimented with different models, and would know which one generated the response

💻 Frontend App Architecture

Each agent has its own web app (Tennis + Volleyball) deployed on DigitalOcean App Platform.

Built in React Native Web, the frontend:

• Embeds the agent using an <iframe> to the Claude endpoint
• Uses a scoped AGENT_ID and API_KEY per chatbot
• Adjusts layout dynamically for mobile responsiveness
• Uses a shared architecture for fast deployment across sports

GitHub Repos

• 🏐 Volleyball App (private - but ping me if you'd like to use)
• 🎾 Tennis App (private - but ping me if you'd like to use)

🌐 Clean DNS & Routing

Each sport lives at its own subdomain, powered by DigitalOcean’s DNS service:

• https://volleyball.gameplan.chat
• https://tennis.gameplan.chat

This setup allows model isolation and independent scaling if needed.

💸 What It Cost to Run

Gameplan AI was live and functioning in production for a few months. I spun it down after collecting demos and learnings.

Here’s what I paid per month:

This is a affordable way to prototype vertical AI agents with real production infrastructure—no devops required.

🔍 Lessons Learned

1. Prompt quality is everything
   Good formatting rules (like “always use numbered lists”) made the agents far more usable.
2. Claude 3.5 Haiku is fast and cheap
   It gave great responses without the price tag of Opus or GPT-4.
3. Running in production early revealed hidden issues
   Mobile formatting bugs, OpenSearch indexing quirks, and latency from the web app through the the AI agent and knowledgebase all came up live.
4. Agent Platform > API wiring
   DO’s no-code interface for embedding Claude + search saved a ton of backend work.

🔧 What I’d Do Next

• Add a simple feedback system to rate responses
• Test switching between specialized agents (e.g. Strategy Mode vs Nutrition Mode)
• Let users bookmark drills and track progress
• Reduce latency by hosting everything closer together and on faster infrastructure
• Add streaming responses for a smoother, real-time feel

🎾 Want to Build Your Own?

• Use DigitalOcean’s Agent Platform
• Pick a vertical and build your own knowledge base in OpenSearch
• Spin up Claude or GPT agents with scoped prompts
• Embed them in a simple React or Next.js frontend
• Use DO DNS to route cleanly by audience

It’s a fully hosted, clean way to prototype productized AI—without a big team or AWS headaches.

Want to chat about your own idea? Reach out via reynold.harbin.io