Building MCP Studio: From OpenAPI to Agentic Magic (And the Bugs in Between)

If you've ever tried to give an AI agent (like Cursor, Cline, or Claude) access to a niche, private REST API, you know the pain. You end up spending your entire weekend writing custom boilerplate code just to set up a Model Context Protocol (MCP) server.

I got sick of the "glue code" crisis, so I decided to build MCP Studio—a SaaS tool that converts any OpenAPI/Swagger file into a secure, managed MCP gateway in under 60 seconds.

It sounds like a straightforward wrapper, right? Wrong. Building a stateful, interactive, cloud-synced proxy editor turned out to be an absolute rollercoaster. Here is the unvarnished journey of how it came to life, including every frustrating bug and "Aha!" moment.

The Spark: Context Bloat & The "Macro" Idea
The core hypothesis: giving an LLM a 150-endpoint Swagger file is a terrible idea. It blows up the context window, burns tokens, and causes the AI to hallucinate. I wanted to build a UI where developers could upload a JSON spec, visually check off only the endpoints they needed, and deploy it to a live Server-Sent Events (SSE) backend with zero-touch auth.

The stack: React (Vite) + Tailwind for the frontend, Firebase for state/auth, and a Node.js + Express backend running on Render.

Hurdle #1: The Black Screen of Death (Routing Nightmares)
Things started breaking almost immediately. I had my "Prune" page looking gorgeous, but when I tried to load it, the entire app crashed into a terrifying black screen.
The console screamed: Uncaught Error: You cannot render a <Router> inside another <Router>. I had accidentally wrapped my component in a MemoryRouter for testing, forgetting main.tsx was already managing the app with a HashRouter. A simple fix, but a stark reminder of how fragile React routing can be when you're moving fast.

Hurdle #2: State Amnesia (The "0 Endpoints Selected" Bug)
Because I was developing fast using cloud-based preview environments, I ran into module resolution errors and had to build "Mock Contexts" to keep the UI interactive.
This led to the ultimate nightmare. I enthusiastically clicked 5 different API endpoints, hit "Continue to Deploy", and read: "Ready to Deploy. You have selected 0 endpoints." My heart sank. Because I was using that "Mock Context" bridge, the selections were being saved to fake local memory instead of my global application state. I had to completely rip out the mock contexts and wire the components directly into Firebase's onSnapshot listeners, building a robust hydration sequence using useRef.

The "Aha!" Moment: Magic Suggest
While fighting state bugs, I was building the backend on Render and wanted a "Wow" factor. I integrated the Gemini 2.5 Flash API into my Node backend to build "Magic Suggest".
Instead of manually scrolling through hundreds of endpoints, the user clicks a button, the app sends the schema to Gemini, and the AI acts as an "Agent Architect"—automatically checking the 3-5 most useful endpoints. Seeing the checkboxes light up automatically on the frontend after a 2-second API call was pure magic. It validated the entire product.

Hurdle #3: The Rebel PII Redaction Toggle
I built a "PII Redaction" feature (masking emails/phones from the LLM) locked behind a $19/mo Pro tier. But there was a glaring UI bug: when I uploaded a fresh API schema, the PII toggle was showing up as ON (blue) by default, even for free users! If I toggled it on one project, it stayed on when I uploaded a completely different JSON file.
The fix required strict UI locking, forcing the cloud to reset piiMasking: false on every new upload, and adding a backend database listener to forcefully override state if a free user somehow bypassed the frontend.

Looking Back
Building MCP Studio was a crash course in managing complex, multi-page state and wrestling with context providers. There were moments where a simple checkbox not remaining checked made me want to pull my hair out.

But launching the app, uploading a massive 300-endpoint Swagger file, hitting "Magic Suggest", and instantly getting a secure, live SSE URL to drop into Cursor? Totally worth it.

The agentic era needs better plumbing, and I'm thrilled to have finally shipped some.

(Try the MVP: https://eleayuen-png.github.io/OpenAPI-to-MCP-Converter-MVP/)