MCP UX Brainstorming

MCP UX Brainstorming for OpenAI Apps SDK

Overview

MCP-native design requires a fundamentally different mindset than traditional app design. This skill helps brainstorm, evaluate, and refine UX concepts specifically optimized for ChatGPT's conversational environment.

The MCP-Native Mindset

Extract, Don't Port

The most common mistake is trying to recreate an existing app inside ChatGPT. Instead:

The Conversational Advantage

MCP apps excel when they leverage what chat does uniquely well:

1. Natural language input - Users describe intent, not navigate menus
2. Context awareness - The model knows what came before
3. Multi-turn guidance - Complex workflows through conversation
4. Composability - Your app works with other apps and ChatGPT features

Brainstorming Framework

Step 1: Identify the Core Value

Ask these questions about your product/service:

1. What's the ONE thing users want to accomplish?
2. What would they naturally ask ChatGPT to do?
3. What data/action do you have that ChatGPT doesn't?
4. What's tedious in your current UX that conversation simplifies?

Good Core Values:

• "Book a restaurant" (clear action, natural to ask)
• "Find the best flight" (search + decision)
• "Check my order status" (data lookup)
• "Generate a report" (automation)

Weak Core Values:

• "Browse our catalog" (no clear intent)
• "Manage settings" (not conversational)
• "View analytics dashboard" (too broad)

Step 2: Map the Conversational Flow

Design three entry points:

1. Open-ended prompt

User: "Help me plan dinner for tonight"
Model: Uses your restaurant app to suggest options
Widget: Shows 3-5 restaurant cards with key info

2. Direct command

User: "Book a table at Chez Pierre for 7pm"
Model: Calls booking tool directly
Widget: Confirmation card with booking details

3. First-run discovery

User: Has your app connected
Model: "I can help you find and book restaurants. What are you in the mood for?"

Step 3: Design Tool Boundaries

Define what the model handles vs. what needs UI:

Step 4: Evaluate Against Principles

Score your concept (1-5) on each:

Threshold: Aim for 20+ total. Below 15 suggests reconsidering the concept.

Ideation Techniques

The "Ask ChatGPT" Test

Imagine users already have ChatGPT. What would they naturally ask that your service could answer?

"What's my account balance?" → Banking app
"When does my flight leave?" → Travel app
"What should I cook with chicken?" → Recipe app
"Is this product any good?" → Review app
"Schedule a meeting with Sarah" → Calendar app

The Workflow Decomposition

Take a complex workflow and extract atomic actions:

Traditional: E-commerce checkout

Browse → Add to cart → Enter address → Select shipping → Payment → Confirm

MCP-native extraction:

• "Reorder my usual" (1 tool call)
• "Track my package" (1 tool call)
• "Find deals on headphones" (1 tool call + carousel)

The Widget Audit

For each proposed widget, ask:

1. Could the model say this instead? If yes, skip the widget.
2. Is this for the user or for "show"? Skip decorative widgets.
3. Does it help the NEXT action? Include actionable widgets.
4. Is it glanceable? Widgets should communicate in 2-3 seconds.

Concept Patterns That Work

Pattern: Quick Lookup + Action

User: "What's my balance?"
Model: Calls balance tool
Widget: Card showing balance + quick action buttons
Follow-up: "Would you like to transfer funds?"

Why it works: Answers question immediately, offers next step.

Pattern: Search + Select

User: "Find me a hotel in Paris under $200"
Model: Calls search tool with filters
Widget: Carousel of 5 hotel cards
User: Clicks one or says "Tell me more about the second one"

Why it works: Visual comparison is faster than text lists.

Pattern: Generate + Review

User: "Write a marketing email for our sale"
Model: Generates draft
Widget: Rich text preview with edit button
User: "Make it shorter" or clicks edit

Why it works: Visual preview, conversational refinement.

Pattern: Status + Options

User: "Where's my order?"
Model: Calls tracking tool
Widget: Timeline visualization
Follow-up: "It's delayed. Want me to contact support?"

Why it works: Visual status, proactive help.

Anti-Patterns to Avoid

Anti-Pattern: The Portal

❌ Building a mini-app with navigation, tabs, settings ✅ Single-purpose widgets for specific moments

Anti-Pattern: The Form Dump

❌ Complex multi-field forms in widgets ✅ Model gathers info through conversation, widget confirms

Anti-Pattern: The Dashboard

❌ Charts, metrics, and data grids ✅ Single insight cards with the "so what?" answer

Anti-Pattern: The Upsell

❌ Ads, premium prompts, marketing content ✅ Valuable actions that naturally lead to engagement

Brainstorming Session Template

Use this structure for ideation sessions:

## App Concept: [Name]

### Core Value
What single thing does this enable?

### Natural Prompts
What would users say to trigger this?
- "..."
- "..."
- "..."

### Tools Needed
| Tool | Input | Output | Widget? |
|------|-------|--------|---------|
| | | | |

### Conversational Flow
1. User says: ...
2. Model does: ...
3. Widget shows: ...
4. Follow-up: ...

### Evaluation Scores
- Conversational Value: /5
- Unique Data: /5
- Atomic Actions: /5
- UI Necessity: /5
- Task Completion: /5
- **Total: /25**

### Risks/Questions
- ...

Additional Resources

Reference Files

For detailed patterns and examples:

• references/concept-evaluation.md - Detailed scoring rubric
• references/successful-apps.md - Analysis of successful ChatGPT apps

Example Files

Working concept examples in examples/:

• examples/brainstorm-restaurant.md - Restaurant booking concept
• examples/brainstorm-ecommerce.md - E-commerce concept

Official Documentation

• UX Principles: https://developers.openai.com/apps-sdk/concepts/ux-principles/
• UI Guidelines: https://developers.openai.com/apps-sdk/concepts/ui-guidelines/