MCP Studio

MCP Studio is a polished web client for exploring the Model Context Protocol in practice.

It demonstrates a simple but important idea: AI products become much more useful when the model can call real tools through a standard interface instead of staying trapped in chat. In this version, the tool layer is Airtable, but the larger point is the product pattern, not just the integration.

What This Project Shows

• A real MCP-powered product experience, not just a protocol demo
• A web UI that makes tool use legible to non-technical users
• User-supplied credentials so the app can be deployed publicly without shared-secret risk
• A concrete example of how Logan thinks about AI workflow design and tool orchestration

Core Flow

User -> Web UI -> LLM -> MCP client -> Airtable MCP server -> Airtable

Why This Matters

MCP is valuable because it turns "the model knows things" into "the model can do things safely through defined tools." This repo is a working artifact around that shift.

Instead of treating protocol infrastructure as purely technical plumbing, MCP Studio tries to make it feel like a product:

• understandable
• trustworthy
• visually polished
• easy to test with a real data source

Features

• Real @modelcontextprotocol/sdk usage
• Airtable-backed tool calls
• Chat interface for natural-language actions
• Browser-local API key storage
• Public-deployable architecture without central key custody

Local Development

cd mcp-web-client
npm install
npm run dev

Then open http://localhost:3000 and provide your own OpenAI and Airtable credentials in the app.

Repo Structure

mcp-web-client/
  src/app/                 Next.js app and API routes
  src/components/          Chat and settings UI
  src/lib/                 MCP client utilities

Context

This is one of several projects in Logan Horowitz's portfolio that sit at the intersection of:

• AI product design
• agent workflows
• operational tooling
• interfaces that make model behavior more usable