Ladder Pick — ChatGPT App Development Plan#

• Project name: ted-mcp-servers
• App name (App Directory display): Ladder Pick
• App language: English first (UI / tool description / privacy policy all in English; only the plan document is in Korean)

Official Developer Documentation Reference Links#

Core Documents (Must-Read)#

• Apps SDK Home: https://developers.openai.com/apps-sdk
• Quickstart (includes Todo example): https://developers.openai.com/apps-sdk/quickstart
• MCP Server Concepts: https://developers.openai.com/apps-sdk/concepts/mcp-server
• MCP Apps in ChatGPT: https://developers.openai.com/apps-sdk/mcp-apps-in-chatgpt

Design#

• UX Principles: https://developers.openai.com/apps-sdk/concepts/ux-principles
• UI Guidelines: https://developers.openai.com/apps-sdk/concepts/ui-guidelines
• Design Components: https://developers.openai.com/apps-sdk/plan/components
• Tool Definitions: https://developers.openai.com/apps-sdk/plan/tools
• Use Case Research: https://developers.openai.com/apps-sdk/plan/use-case

Build#

• MCP Server Setup: https://developers.openai.com/apps-sdk/build/mcp-server
• ChatGPT UI Build: https://developers.openai.com/apps-sdk/build/chatgpt-ui
• State Management: https://developers.openai.com/apps-sdk/build/state-management
• Authentication: https://developers.openai.com/apps-sdk/build/auth
• Example Apps (GitHub): https://github.com/openai/openai-apps-sdk-examples
• UI Library (GitHub): https://github.com/openai/apps-sdk-ui

Deployment / Testing / Submission#

• Deployment Guide: https://developers.openai.com/apps-sdk/deploy
• Testing Guide: https://developers.openai.com/apps-sdk/deploy/testing
• ChatGPT Connection: https://developers.openai.com/apps-sdk/deploy/connect-chatgpt
• App Submission & Maintenance: https://developers.openai.com/apps-sdk/deploy/submission
• App Submission Guidelines (Policies / Rules): https://developers.openai.com/apps-sdk/app-submission-guidelines
• Developer Mode Setup: https://platform.openai.com/docs/guides/developer-mode

Guides / References#

• Security & Privacy: https://developers.openai.com/apps-sdk/guides/security-privacy
• Metadata Optimization: https://developers.openai.com/apps-sdk/guides/optimize-metadata
• Troubleshooting: https://developers.openai.com/apps-sdk/deploy/troubleshooting
• API Reference: https://developers.openai.com/apps-sdk/reference
• Changelog: https://developers.openai.com/apps-sdk/changelog

General References#

• Apps in ChatGPT (Help Center): https://help.openai.com/en/articles/12503483-apps-in-chatgpt-and-the-apps-sdk
• App Directory Submission (Help Center): https://help.openai.com/en/articles/20001040
• App Directory Browsing: https://chatgpt.com/apps

Goals#

• Build a “Ladder Pick” app that can be listed on the ChatGPT App Directory.
• Enable the complete flow — entering participants / items → generating a ladder (random matching) → revealing results — through an interactive widget (iframe) within a chat.
• After testing with ChatGPT Developer Mode, the ultimate goal is App Directory submission / approval / Publish.

Assumptions / Scope#

• MVP: Interactive widget (iframe UI) + MCP tool-based. The widget provides core interactions such as entering participants / items, displaying results, and reshuffling.
• Out of scope (initial): Login / payments, real-time multiplayer, complex animations, external data integration.
• No authentication required: Since there is no external service integration, we start without OAuth / authentication flows.
• Safety / Policy: No write operations to external systems. Tool hint annotations:
  • readOnlyHint: false — Not true because internal state is created / modified
  • destructiveHint: false — No irreversible external impact
  • openWorldHint: false — No public internet state changes

User Experience (UX) Scenarios#

Basic Flow (Interactive Widget)#

1. The user types @Ladder Pick or something like “play a ladder game.”
2. ChatGPT calls the create_game tool, and the Ladder Pick widget is displayed in an iframe.
3. Within the widget:
   • Players list: Add / remove participant names (default 4)
   • Items list: Add / remove result items (prizes / roles)
   • Options: Reveal mode (All at once / One by one), Seed (auto / custom)
   • Click the “Pick!” button → Generate matching results
4. Results area:
   • All at once: Display the full matching table immediately
   • One by one: Reveal one person at a time with the “Reveal Next” button
   • “Reshuffle” button: Reshuffle with a new seed
   • “Export” button: Copy results as text

Text Fallback#

• Even without the widget, ChatGPT can display tool call results as text (table).
• Example: “Ladder Pick, match A,B,C,D with 1st,2nd,3rd,4th” → Text table response

Error Cases#

• Fewer than 2 participants → Error message: “At least 2 players are required.”
• Item count ≠ participant count → Error message: “Number of items must match number of players. You have {n} players and {m} items.”
• Items list empty → Error message: “Items list cannot be empty.”

Functional Requirements#

Input#

• Participant list (Players): 2–20 people
• Result items (Items): Must be exactly the same count as participants (error returned on mismatch)
• Options
  • Reveal mode: all | one-by-one
  • Seed: Auto-generated or user-specified (for reproducibility)

Output#

• Matching results: Player ↔ Item 1:1 mapping
• Ladder visualization: Canvas-based visual ladder (vertical lines + horizontal rungs + color-coded path animations)

State / Storage#

• Module-level Map<gameId, GameState> for in-process in-memory management
• Unique ID issued on game creation; subsequent reshuffle / reveal_next lookups use that ID
• No persistent storage (resets on server restart; this is sufficient for the initial version)

Technical Design#

Architecture (Based on Official Structure)#

ChatGPT Apps consist of two components:

Development History#

Code Battle grew by shipping an MVP first, fixing the slow and painful parts, and expanding along the way as it was used to support real events. In the early days, progress was often made in small pockets of time between work and study, and keeping a written history helped maintain context and momentum.

May 21, 2017 — Launch the site with a Rock Scissors Paper MVP#

The first MVP of Code Battle was Rock Scissors Paper. It started with a single web page and a single API, and users could inject “their strategy” by implementing callback functions like onGameStart() and onRoundStart() in the code area.

Green Swagger#

Green Swagger is an Android/iOS app built with Flutter for the 2024 Gemini API Developer Competition. While it was developed with release in mind, after considering multiple factors, I decided not to launch it, and the project is currently paused.

Why I jumped into the competition#

The first prize was a massive $300,000, and there was even a car as a giveaway prize that looked like it belonged in Back to the Future. From my perspective, it was hard to find a reason not to participate—so I committed to building a submission.

Apps#

I build, launch, and operate apps on my own.

This section brings together projects in many forms—mobile apps, web services, and Chrome extensions. Here, I share what I learned while handling the full lifecycle myself: planning, design, development, deployment, and ongoing operations.

I don’t only write about “launched apps.” I also document apps I decided not to ship and projects I’ve sunset—because there were clear lessons in those journeys too, and I want to preserve them.

Ladder Pick in ChatGPT#

What Are ChatGPT Apps?#

ChatGPT Apps is a feature introduced by OpenAI in October 2025 that allows external service providers to integrate their services into ChatGPT. It is built on MCP (Model Context Protocol), which provides a standard for LLMs to invoke external tools. ChatGPT Apps takes this a step further by extending the standard so that interactive UI and logic from external services can be embedded directly within the ChatGPT chat interface. In other words, MCP established the standard for “LLMs using external capabilities,” and the scope of those capabilities has expanded beyond simple data retrieval and execution to include user-facing interactive UI. On top of this, OpenAI launched the App Directory, a marketplace where users can discover and try a wide variety of apps. For developers, this creates an opportunity to expose their apps to ChatGPT’s massive user base and potentially monetize them.

Walkholic#

Walkholic is an Android app that I released on Google Play around 2015. It has since been removed from Google Play for maintenance reasons.

Back then, fitness apps that tracked basic activities—like walking, running, and cycling—and recorded metrics such as activity volume and heart rate were just starting to become popular. Around the same time, Google launched the Google Fit API to grow an ecosystem, and a developer contest called the Google Fit Challenge was held. As you might expect, I joined the challenge and started building an app.

I am your AI — An AI Assistant for Web Learning, Note-Taking, and Task Automation#

Read, ask, organize, and automate — AI is with you at every moment of web browsing.

Quickly summarize webpages, ask questions about anything you don’t understand, take notes with AI, and build up your knowledge. You can even automate repetitive web tasks. Customize your prompts and create your own AI assistant.

Chrome Web Store — I am your AI (listing)

Mission Omok (TAKE FIVE)#

Mission Omok (TAKE FIVE) is an Android game that I released on Google Play around 2014. It has since been removed from Google Play for maintenance reasons.

Back then, puzzle games like Candy Crush were booming. I remember thinking, “Gomoku/Omok is a familiar rule set, but maybe no one has really ‘claimed’ it with a standout concept yet.” So instead of building a plain Gomoku clone, I decided to create a version with a fresh theme and a mission-based structure.

Code Battle#

Code Battle is a website operated by the author where your code and your opponent’s code fight one turn (TURN) at a time. A GAME consists of multiple ROUNDs, and each ROUND consists of multiple TURNs. In each TURN, “my choice” and “the opponent’s choice” determine win/lose and score, and the accumulated results determine ROUND win/lose and GAME win/lose.

Code Battle site (https://codebattle.online/)

What is Code Battle?#

The core of Code Battle isn’t “solving a problem with a single correct answer.” Instead, it’s a structure where you implement a strategy in code to beat the opponent. You don’t just finish after solving something—you analyze the opponent’s patterns, predict the next turns, and reflect those predictions in code to shape the flow of a match.

Smart Browser#

Smart Browser is an Android browser app that I released on Google Play around 2012. It has since been removed from Google Play for maintenance reasons.

I built this app to submit it to an event in 2012 called “Google Hackfair.” Back then, the mobile market was a battlefield, and at the same time it still wasn’t as mature as it is today. I personally had a few pain points while using Chrome on Android, and when I decided to participate in Hackfair, I thought: “Then why not build the browser I want myself?”—and started the project.