State Management in ChatGPT Apps

ChatGPT Apps need to maintain state across multiple messages. In this module, we explore patterns for managing state effectively.

The Challenge

Each tool call is stateless by default. But users expect:

• Cart contents to persist
• Preferences to be remembered
• Multi-step workflows to work

State Management Patterns

1. Session State (Widget-Side)

Store temporary state in the widget using React state or localStorage.

// In your widget
const [cart, setCart] = useState(() => {
  return JSON.parse(localStorage.getItem('cart') || '[]');
});

Use for: Shopping carts, form progress, UI preferences

2. Server State (MCP-Side)

Store state on your server, keyed by user/session ID.

# In your MCP server
user_state = redis.get(f"user:{user_id}:state")

Use for: User data, persistent preferences, history

3. Conversation Context

Pass state through the conversation itself.

Use for: Multi-step workflows, confirmations

Fantasy Football Example

Our FPL app demonstrates all three patterns:

The FPL App Architecture

User: "Show me Salah's stats"
    ↓
Tool: get_player_stats(player_id)
    ↓
Returns: Player data + "player-detail" widget
    ↓
Widget: Renders stats, adds "Compare" button
    ↓
User clicks "Compare" → stores player in session
    ↓
User: "Compare with Saka"
    ↓
Tool: compare_players(player_ids)
    ↓
Widget: Side-by-side comparison

Best Practices

1. Minimize Server State — Prefer client-side when possible
2. Use Optimistic Updates — Update UI immediately, sync later
3. Handle Conflicts — What if state diverges?
4. Clear State Appropriately — Don't persist forever

Resources

• GitHub: FPL ChatGPT App
• React State Management