Runtime APIs

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>;
}

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>;
}

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 };
    },
  });
}

import { isChatGPT } from 'sunpeak/host';
import { useUploadFile, useRequestModal, useRequestCheckout } from 'sunpeak/host/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>
  );
}