Capabilities

Different AI hosts support different features. Pancake provides a consistent API, but some capabilities may not be available everywhere.

Feature Availability

Feature	Claude (MCP)	ChatGPT (OpenAI)
View data	Yes	Yes
Actions	Yes	Yes
Data fetching	Yes	Yes
Theme detection	Yes	Yes
Navigation	Yes	Yes
AI messaging	Yes	Yes
State persistence	Yes	Varies
Display mode	Varies	Yes

Feature availability may vary by host version and configuration.

Checking Capabilities

Use the useHost hook to check available features:

import { useHost } from '@pancake-apps/web';

function MyView() {
  const host = useHost();

  return (
    <div>
      <p>Theme: {host.theme}</p>
      <p>Display mode: {host.displayMode}</p>
    </div>
  );
}

Graceful Degradation

Design your views to work even when features aren't available:

Conditional Rendering

function ViewWithOptions() {
  const host = useHost();

  return (
    <div>
      <MainContent />

      {/* Only show if messaging works */}
      <button onClick={() => say('Help me')}>
        Ask AI
      </button>
    </div>
  );
}

Alternative UI

function AdaptiveButton() {
  const { say } = useNavigation();

  // Messaging works in both hosts, so this is safe
  return (
    <button onClick={() => say('Show me more options')}>
      Get More Options
    </button>
  );
}

Theme Support

Always support both themes:

import { useTheme } from '@pancake-apps/web';

function ThemedView() {
  const theme = useTheme();

  return (
    <div
      style={{
        background: theme === 'dark' ? '#1a1a1a' : '#ffffff',
        color: theme === 'dark' ? '#ffffff' : '#000000',
      }}
    >
      {/* content */}
    </div>
  );
}

Display Mode

Adapt to how the view is displayed:

import { useDisplayMode } from '@pancake-apps/web';

function ResponsiveView() {
  const mode = useDisplayMode();

  return (
    <div
      style={{
        padding: mode === 'embedded' ? '1rem' : '2rem',
        maxWidth: mode === 'standalone' ? '1200px' : '100%',
      }}
    >
      {/* content */}
    </div>
  );
}

Best Practices

Test in both hosts: Verify your view works in Claude and ChatGPT
Always provide fallbacks: Don't break if a feature is missing
Respect theme: Always support light and dark modes
Handle errors: Wrap async operations in try/catch

Next Steps

Protocol Detection: How protocol detection works
Troubleshooting: Debug capability issues
Examples: See capability handling in action

On this page