Skip to main content

​
Overview

sunpeak provides a multi-platform runtime abstraction layer that helps you build MCP Apps once and deploy them across different AI chat hosts like ChatGPT, Claude, and more.

​
Why Multi-Platform?

Write Once, Deploy Everywhere

Build your app logic once, run it on multiple platforms without rewriting.

Consistent Developer Experience

Same React hooks and patterns across all platforms.

Future-Proof

Automatically support new platforms as they emerge.

Easy Migration

Switch platforms without major code changes.

​
React Hooks

sunpeak provides access to the entire MCP Apps runtime API via platform-agnostic React hooks. All hooks read from context automatically — no need to pass an app instance: 
import { useTheme, useDisplayMode, useAppState } from 'sunpeak';

function MyResource() {
  const theme = useTheme();                          // 'light' | 'dark'
  const displayMode = useDisplayMode();              // 'inline' | 'pip' | 'fullscreen'
  const [state, setState] = useAppState({ count: 0 });

  return <div className={displayMode === 'fullscreen' ? 'h-screen' : 'max-h-96'}>...</div>;
}

​
Action Hooks

sunpeak provides individual hooks for interacting with the host runtime, including calling MCP tools, sending messages, opening links, and pushing model context updates. 
import { useCallServerTool, useSendMessage, useOpenLink, useUpdateModelContext } from 'sunpeak';

function MyResource() {
  const callTool = useCallServerTool();
  const sendMessage = useSendMessage();
  const openLink = useOpenLink();
  const updateModelContext = useUpdateModelContext();

  const handleAction = async () => {
    // Call an MCP tool.
    const result = await callTool({ name: 'my-tool', arguments: { arg: 'value' } });

    // Send a follow-up message.
    await sendMessage({ role: 'user', content: [{ type: 'text', text: 'Continue' }] });

    // Open an external URL.
    await openLink({ url: 'https://sunpeak.ai' });

    // Push structured data to the model's context.
    await updateModelContext({ structuredContent: { selectedItem: 'abc' } });
  };

  return <button onClick={handleAction}>Interact with Host</button>;
}

​
Bidirectional Tool Calling

Apps can also register tools that the host can call, enabling two-way communication: 
import { useAppTools } from 'sunpeak';

function MyResource() {
  useAppTools({
    tools: [{ name: 'get-selection', description: 'Get the current selection' }],
    onCallTool: async ({ name }) => {
      if (name === 'get-selection') {
        return { content: [{ type: 'text', text: selectedText }] };
      }
      return { content: [], isError: true };
    },
  });
}

​
ChatGPT-Specific Hooks

Some ChatGPT features go beyond the MCP Apps standard. sunpeak provides typed hooks for these platform-specific APIs, imported from sunpeak/platform/chatgpt: 
import { isChatGPT } from 'sunpeak/platform';
import { useUploadFile, useRequestModal, useRequestCheckout } from 'sunpeak/platform/chatgpt';

function MyResource() {
  if (!isChatGPT()) {
    return <div>Standard MCP App UI</div>;
  }

  return <ChatGPTFeatures />;
}

function ChatGPTFeatures() {
  const uploadFile = useUploadFile();
  const requestModal = useRequestModal();
  const requestCheckout = useRequestCheckout();

  return (
    <div>
      <button onClick={() => uploadFile(new File([], 'photo.png'))}>Upload</button>
      <button onClick={() => requestModal({})}>Open Modal</button>
    </div>
  );
}
HookDescription
useUploadFileUpload files into the ChatGPT conversation
useGetFileDownloadUrlGet temporary download URLs for uploaded files
useRequestModalOpen a host-controlled modal
useRequestCheckoutTrigger the instant checkout flow
These hooks throw if called outside ChatGPT. Always feature-detect with isChatGPT() first. See Platform Detection.

​
Dive Deeper

Runtime API Reference

All hooks provided by sunpeak.

ChatGPT Hooks

ChatGPT-specific hook API reference.

Platform Detection

Detect which host platform is running your app.