# sunpeak ## Docs - [sunpeak build](https://sunpeak.ai/docs/app-framework/cli/build.md): Build optimized production bundles for deployment. - [sunpeak dev](https://sunpeak.ai/docs/app-framework/cli/dev.md): Run the inspector and MCP server with HMR. - [sunpeak new](https://sunpeak.ai/docs/app-framework/cli/new.md): Create a new project with the sunpeak framework. - [sunpeak start](https://sunpeak.ai/docs/app-framework/cli/start.md): Start the production MCP server. - [AppProvider](https://sunpeak.ai/docs/app-framework/components/app-provider.md): React context provider that connects to the MCP Apps host and shares the App instance across the component tree. Handles HMR persistence and StrictMode compatibility. - [SafeArea](https://sunpeak.ai/docs/app-framework/components/safe-area.md): Component that applies safe area padding and viewport constraints. - [Host Detection](https://sunpeak.ai/docs/app-framework/functions/host-detection.md): Detect which host is running your MCP App. - [Utility Functions](https://sunpeak.ai/docs/app-framework/functions/utilities.md): Utility functions exported by sunpeak: cn() for class name merging, and media query helpers for motion, touch, and hover detection. - [Authorization](https://sunpeak.ai/docs/app-framework/guides/authorization.md): Add OAuth authorization to your sunpeak MCP App — per-server auth, per-tool auth, and UI-initiated step-up flows. - [Deployment](https://sunpeak.ai/docs/app-framework/guides/deployment.md): Deploy your MCP App to production. - [Patterns](https://sunpeak.ai/docs/app-framework/guides/patterns.md): Common patterns and recipes for building MCP Apps with sunpeak — polling, chunked data, binary resources, fullscreen, model context, state persistence, and more. - [Troubleshooting](https://sunpeak.ai/docs/app-framework/guides/troubleshooting.md): Common issues and how to fix them when developing MCP Apps. - [ChatGPT Hooks](https://sunpeak.ai/docs/app-framework/hooks/chatgpt-hooks.md): Host-specific React hooks for ChatGPT features: file uploads, modals, and checkout. - [useApp](https://sunpeak.ai/docs/app-framework/hooks/use-app.md): Access the App instance from context. - [useAppState](https://sunpeak.ai/docs/app-framework/hooks/use-app-state.md): Persistent state synced with the host. - [useAppTools](https://sunpeak.ai/docs/app-framework/hooks/use-app-tools.md): Register tools that the host can call on your app. - [useCallServerTool](https://sunpeak.ai/docs/app-framework/hooks/use-call-server-tool.md): Call other MCP server tools. - [useCreateSamplingMessage](https://sunpeak.ai/docs/app-framework/hooks/use-create-sampling-message.md): Request LLM completions from the host. - [useDeviceCapabilities](https://sunpeak.ai/docs/app-framework/hooks/use-device-capabilities.md): Get device input capabilities. - [useDisplayMode](https://sunpeak.ai/docs/app-framework/hooks/use-display-mode.md): Get the current display mode. - [useDownloadFile](https://sunpeak.ai/docs/app-framework/hooks/use-download-file.md): Download files through the host. - [useHostContext](https://sunpeak.ai/docs/app-framework/hooks/use-host-context.md): Reactive access to the host context. - [useHostInfo](https://sunpeak.ai/docs/app-framework/hooks/use-host-info.md): Get host application information. - [useIsMobile](https://sunpeak.ai/docs/app-framework/hooks/use-is-mobile.md): Detect if the viewport is mobile-sized. - [useListServerResources](https://sunpeak.ai/docs/app-framework/hooks/use-list-server-resources.md): Discover available resources on the MCP server. - [useLocale](https://sunpeak.ai/docs/app-framework/hooks/use-locale.md): Get the user's locale. - [useOpenLink](https://sunpeak.ai/docs/app-framework/hooks/use-open-link.md): Open external links. - [usePlatform](https://sunpeak.ai/docs/app-framework/hooks/use-platform.md): Get the host-reported platform type. - [useReadServerResource](https://sunpeak.ai/docs/app-framework/hooks/use-read-server-resource.md): Read resources from the MCP server. - [useRegisterTool](https://sunpeak.ai/docs/app-framework/hooks/use-register-tool.md): Register app-side tools the host can call. - [useRequestDisplayMode](https://sunpeak.ai/docs/app-framework/hooks/use-request-display-mode.md): Request display mode changes. - [useRequestTeardown](https://sunpeak.ai/docs/app-framework/hooks/use-request-teardown.md): Request app-initiated teardown. - [useSafeArea](https://sunpeak.ai/docs/app-framework/hooks/use-safe-area.md): Get safe area insets. - [useSendLog](https://sunpeak.ai/docs/app-framework/hooks/use-send-log.md): Send structured log messages. - [useSendMessage](https://sunpeak.ai/docs/app-framework/hooks/use-send-message.md): Send follow-up messages to the conversation. - [useSendToolListChanged](https://sunpeak.ai/docs/app-framework/hooks/use-send-tool-list-changed.md): Notify the host that the app's tool list changed. - [useStyles](https://sunpeak.ai/docs/app-framework/hooks/use-styles.md): Get host style configuration. - [useTeardown](https://sunpeak.ai/docs/app-framework/hooks/use-teardown.md): Clean up before app destruction. - [useTheme](https://sunpeak.ai/docs/app-framework/hooks/use-theme.md): Get the current color theme. - [useTimeZone](https://sunpeak.ai/docs/app-framework/hooks/use-time-zone.md): Get the user's time zone. - [useToolData](https://sunpeak.ai/docs/app-framework/hooks/use-tool-data.md): Access tool input and output data. - [useToolInfo](https://sunpeak.ai/docs/app-framework/hooks/use-tool-info.md): Get metadata about the tool call that created this app. - [useUpdateModelContext](https://sunpeak.ai/docs/app-framework/hooks/use-update-model-context.md): Send model context updates to the host. - [useUserAgent](https://sunpeak.ai/docs/app-framework/hooks/use-user-agent.md): Get the host application identifier. - [useViewport](https://sunpeak.ai/docs/app-framework/hooks/use-viewport.md): Get container dimensions. - [Lifecycle](https://sunpeak.ai/docs/app-framework/lifecycle.md): How the CLI fits into your development workflow. - [MCP Server](https://sunpeak.ai/docs/app-framework/mcp-server.md): Serve your MCP Apps to AI hosts like ChatGPT. - [Project Scaffold](https://sunpeak.ai/docs/app-framework/project-scaffold.md): Understanding your sunpeak project structure. - [Albums](https://sunpeak.ai/docs/app-framework/resources/albums.md): A photo album viewer with carousel display and fullscreen viewing capability. - [Carousel](https://sunpeak.ai/docs/app-framework/resources/carousel.md): A horizontal scrolling carousel for displaying multiple cards with navigation arrows and smooth transitions. - [Map](https://sunpeak.ai/docs/app-framework/resources/map.md): An interactive map with points of interest, location data, and detailed inspector view. - [Review](https://sunpeak.ai/docs/app-framework/resources/review.md): A flexible review dialog for confirmations across purchase reviews, code changes, social media posts, bookings, and more. - [runMCPServer](https://sunpeak.ai/docs/app-framework/run-mcp-server.md): Serve your MCP Apps to hosts like ChatGPT via the Model Context Protocol. - [Runtime APIs](https://sunpeak.ai/docs/app-framework/runtime-apis.md): Strongly typed, multi-platform APIs for the MCP Apps runtime. - [Production Server](https://sunpeak.ai/docs/app-framework/tools/production-server.md): API reference for production MCP server handlers. - [Server Entry](https://sunpeak.ai/docs/app-framework/tools/server-entry.md): Optional auth and server configuration. - [Tool File](https://sunpeak.ai/docs/app-framework/tools/tool-file.md): Define tool metadata, schemas, and handlers. - [UI Components](https://sunpeak.ai/docs/app-framework/ui-components.md): Production-ready components in the framework. - [Overview](https://sunpeak.ai/docs/index.md): MCP App framework, MCP testing framework, and inspector for MCP servers and MCP Apps. - [Links](https://sunpeak.ai/docs/links.md): Helpful external resources for building MCP Apps. - [MCP App Framework](https://sunpeak.ai/docs/mcp-apps-framework.md): Convention-over-configuration framework for building MCP Apps with the inspector and testing built in. - [MCP App Inspector](https://sunpeak.ai/docs/mcp-apps-inspector.md): Inspect MCP Apps in replicated ChatGPT and Claude runtimes. - [MCP Apps Accessors - Read Host State](https://sunpeak.ai/docs/mcp-apps/app/accessors.md): Read host state from the App class: getHostCapabilities for feature detection, getHostVersion for host identification, and getHostContext for theme, locale, and display state. - [MCP Apps getHostCapabilities - Feature Detection](https://sunpeak.ai/docs/mcp-apps/app/accessors/get-host-capabilities.md): Read the host's supported capabilities from an MCP App. Use getHostCapabilities for feature detection before calling host-dependent methods like callServerTool, sendMessage, or downloadFile. - [MCP Apps getHostContext - Host Environment State](https://sunpeak.ai/docs/mcp-apps/app/accessors/get-host-context.md): Read the host environment context from an MCP App: theme, locale, display mode, container dimensions, device capabilities, safe area insets, and more. - [MCP Apps getHostVersion - Host Identification](https://sunpeak.ai/docs/mcp-apps/app/accessors/get-host-version.md): Read the host application's name and version from an MCP App. Use getHostVersion to identify whether the app is running in ChatGPT, Claude, or another host. - [MCP Apps App Class - Client-Side Host Communication](https://sunpeak.ai/docs/mcp-apps/app/app-class.md): The App class for MCP Apps client-side communication. Connect via PostMessageTransport, access host context, capabilities, and version, and manage auto-resize behavior. - [MCP Apps Event Handlers - Host Events](https://sunpeak.ai/docs/mcp-apps/app/event-handlers.md): Handle MCP App events: tool input, streaming partial input, tool result, tool cancelled, host context changes, teardown, and bidirectional tool calls. - [MCP Apps oncalltool - Handle Incoming Tool Calls](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/oncalltool.md): Handle tool calls from the host directed at an MCP App View. Implement app-side tools that the model or host can invoke, returning structured results. - [MCP Apps onhostcontextchanged - React to Host Context Changes](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/onhostcontextchanged.md): Handle host context changes in an MCP App View, including theme toggles, display mode changes, locale updates, and available display modes. - [MCP Apps onlisttools - Declare App-Side Tools](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/onlisttools.md): Declare the tools an MCP App View provides to the host. Return tool definitions so the host and model can discover and call them. - [MCP Apps onteardown - Graceful Shutdown Handler](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/onteardown.md): Handle graceful shutdown requests in an MCP App View. Save state and release resources before the host unmounts the iframe. - [MCP Apps ontoolcancelled - Tool Cancellation](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/ontoolcancelled.md): Handle tool execution cancellation events. Use ontoolcancelled to clean up state and display cancellation feedback when a tool call is interrupted. - [MCP Apps ontoolinput - Complete Tool Arguments](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/ontoolinput.md): Handle complete tool call arguments sent by the host before the tool result arrives. Use ontoolinput to access finalized input for rendering or processing. - [MCP Apps ontoolinputpartial - Streaming Partial Tool Arguments](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/ontoolinputpartial.md): Handle streaming partial tool arguments for progressive UI rendering. Use ontoolinputpartial to display preview content while the host is still generating tool input. - [MCP Apps ontoolresult - Tool Execution Result](https://sunpeak.ai/docs/mcp-apps/app/event-handlers/ontoolresult.md): Handle the result of a tool execution sent by the host. Use ontoolresult to render output, detect errors, and access structured content for UI display. - [MCP Apps Requests - View-to-Host API](https://sunpeak.ai/docs/mcp-apps/app/requests.md): Make requests from an MCP App View to the host: call server tools, request LLM completions via sampling, send messages, update model context, open links, download files, request display modes, and send logs. - [MCP Apps callServerTool - Call Server-Side Tools](https://sunpeak.ai/docs/mcp-apps/app/requests/call-server-tool.md): Call a tool on the originating MCP server from within an MCP App View. The request is proxied through the host, enabling UI-driven server interactions. - [MCP Apps createSamplingMessage - LLM Sampling from MCP Apps](https://sunpeak.ai/docs/mcp-apps/app/requests/create-sampling-message.md): Request LLM completions from the host inside an MCP App. createSamplingMessage proxies to MCP sampling/createMessage so apps can run agentic loops, summaries, and tool-augmented generation without their own model key. - [MCP Apps downloadFile - Download Files from Apps](https://sunpeak.ai/docs/mcp-apps/app/requests/download-file.md): Request the host to download a file from an MCP App View. Supports embedded text and binary content as well as resource links for host-fetched downloads. - [MCP Apps listServerResources - List Server Resources](https://sunpeak.ai/docs/mcp-apps/app/requests/list-server-resources.md): List available resources on the originating MCP server, proxied through the host. Supports cursor-based pagination for large resource sets. - [MCP Apps openLink - Open External URLs](https://sunpeak.ai/docs/mcp-apps/app/requests/open-link.md): Request the host to open an external URL in the browser from within an MCP App View. Provides a safe mechanism for navigating to external resources from sandboxed iframes. - [MCP Apps readServerResource - Read Server Resources](https://sunpeak.ai/docs/mcp-apps/app/requests/read-server-resource.md): Read a resource from the originating MCP server, proxied through the host. Retrieve text, binary, and structured content from server-registered resources. - [MCP Apps requestDisplayMode - Change Display Mode](https://sunpeak.ai/docs/mcp-apps/app/requests/request-display-mode.md): Request the host to change the MCP App display mode between inline, fullscreen, and picture-in-picture (pip). The host returns the mode actually set. - [MCP Apps sendLog - Send Debug Logs](https://sunpeak.ai/docs/mcp-apps/app/requests/send-log.md): Send log messages from an MCP App View to the host for debugging. Logs are not added to the conversation and are only visible in host developer tools. - [MCP Apps sendMessage - Send Chat Messages](https://sunpeak.ai/docs/mcp-apps/app/requests/send-message.md): Send a message from an MCP App View to the host's chat interface. Inject user-role messages with text, images, or other content blocks into the conversation. - [MCP Apps sendSizeChanged - Notify Host of Size Change](https://sunpeak.ai/docs/mcp-apps/app/requests/send-size-changed.md): Manually notify the host that an MCP App View's dimensions have changed. Typically handled automatically when autoResize is enabled. - [MCP Apps setupSizeChangedNotifications - Auto-Resize Control](https://sunpeak.ai/docs/mcp-apps/app/requests/setup-size-changed-notifications.md): Manually start or stop auto-resize reporting in an MCP App. Uses ResizeObserver to monitor DOM changes and sends size-changed notifications to the host. - [MCP Apps updateModelContext - Update Host Model Context](https://sunpeak.ai/docs/mcp-apps/app/requests/update-model-context.md): Update the host's model context with app state. Provide structured or unstructured data that the model can access in future turns without triggering an immediate response. - [MCP Apps - Build Interactive UIs for AI Chat Hosts](https://sunpeak.ai/docs/mcp-apps/introduction.md): Learn how to build MCP Apps that render interactive UIs inside ChatGPT, Claude, and other AI hosts. Covers the App class, event handlers, styling, React hooks, and the MCP Apps protocol. - [MCP App Lifecycle - Discovery to Teardown](https://sunpeak.ai/docs/mcp-apps/lifecycle.md): Understand the complete MCP App lifecycle: tool and resource discovery, ui/initialize handshake, tool input and result delivery, interactive phase with bidirectional communication, and graceful teardown. - [MCP Overview — Model Context Protocol](https://sunpeak.ai/docs/mcp-apps/mcp/overview.md): What the Model Context Protocol (MCP) is, how servers, clients, and hosts work together, and how MCP enables AI agents to use external tools and data. - [MCP Resources — URIs, MIME Types & Reading](https://sunpeak.ai/docs/mcp-apps/mcp/resources.md): How MCP resources work: discovery via resources/list, URI schemes, MIME types, reading via resources/read, and how MCP Apps uses resources for UI delivery. - [MCP Tools — Discovery, Schemas & Invocation](https://sunpeak.ai/docs/mcp-apps/mcp/tools.md): How MCP tools work: discovery via tools/list, input validation with JSON Schema, invocation via tools/call, and structured results. - [MCP Apps useApp - React Connection Hook](https://sunpeak.ai/docs/mcp-apps/react/use-app.md): Connect to an MCP App host with useApp. Creates App, PostMessageTransport, handles initialization handshake, and returns connection state. - [MCP Apps useAutoResize - React Auto-Resize Hook](https://sunpeak.ai/docs/mcp-apps/react/use-auto-resize.md): React hook for manual auto-resize control in MCP Apps. Reports UI size changes to the host via ResizeObserver and size-changed notifications. - [MCP Apps useDocumentTheme - Theme Hook](https://sunpeak.ai/docs/mcp-apps/react/use-document-theme.md): React hook for reactive light/dark theme detection in MCP Apps. Uses MutationObserver to watch data-theme attribute changes and re-render components on theme switches. - [MCP Apps useHostFonts - Font Injection Hook](https://sunpeak.ai/docs/mcp-apps/react/use-host-fonts.md): React hook that injects host-provided font CSS into an MCP App. Applies @font-face rules and font imports from the host, updating automatically on context changes. - [MCP Apps useHostStyleVariables - CSS Variables Hook](https://sunpeak.ai/docs/mcp-apps/react/use-host-style-variables.md): React hook that applies host CSS variables and theme to the document in MCP Apps. Listens for host context changes and updates styles automatically. - [MCP Apps useHostStyles - React Theming Hooks](https://sunpeak.ai/docs/mcp-apps/react/use-host-styles.md): React hooks for applying host styles in MCP Apps: useHostStyles (all-in-one), useHostStyleVariables for CSS variables, useHostFonts for typography, and useDocumentTheme for themes. - [MCP Apps Capability Detection](https://sunpeak.ai/docs/mcp-apps/server/capability-detection.md): Detect whether an MCP host supports Apps UI before registering tools. Use getUiCapability and EXTENSION_ID to check for MCP Apps support in ChatGPT, Claude, and other hosts. - [CSP & CORS](https://sunpeak.ai/docs/mcp-apps/server/csp-cors.md): Configure Content Security Policy and CORS for MCP Apps that make network requests from sandboxed iframes. - [MCP Apps registerAppResource - HTML Resources](https://sunpeak.ai/docs/mcp-apps/server/register-app-resource.md): Register HTML resources for MCP App Views. Configure content security policies (CSP), iframe permissions, resource URIs, and domain settings. - [MCP Apps registerAppTool - Register UI Tools](https://sunpeak.ai/docs/mcp-apps/server/register-app-tool.md): Register MCP tools that render interactive HTML UIs. Configure tool visibility, input schemas, structured content, and UI metadata with registerAppTool. - [MCP App Resource _meta — CSP, Permissions, Domain & Border](https://sunpeak.ai/docs/mcp-apps/server/resource-meta.md): Complete reference for MCP App resource _meta.ui fields: Content Security Policy (CSP), sandbox permissions (camera, microphone, geolocation, clipboard), stable domain origins, and visual border preferences. - [MCP App Tool _meta — Visibility & Resource Linking](https://sunpeak.ai/docs/mcp-apps/server/tool-meta.md): Complete reference for MCP App tool _meta.ui fields: resourceUri for linking tools to HTML Views, and visibility for controlling access by model vs app. - [MCP Apps CSS Variables - Host Theming](https://sunpeak.ai/docs/mcp-apps/styling/css-variables.md): Apply host-provided CSS custom properties for theming MCP Apps. Full reference of color, typography, border, shadow, and layout variables with applyHostStyleVariables. - [MCP Apps Fonts - Apply Host-Provided Typography](https://sunpeak.ai/docs/mcp-apps/styling/fonts.md): Apply host-provided custom fonts in MCP Apps using applyHostFonts. Inject @font-face rules, Google Fonts, and custom typography from ChatGPT, Claude, and other hosts. - [MCP Apps Theme - Light and Dark Mode for AI Chat UIs](https://sunpeak.ai/docs/mcp-apps/styling/theme.md): Apply and detect the host's light or dark theme in MCP Apps. Use applyDocumentTheme and getDocumentTheme with data-theme attributes and CSS light-dark() functions. - [MCP Apps Core Types - TypeScript Type Reference](https://sunpeak.ai/docs/mcp-apps/types/core-types.md): TypeScript type reference for MCP Apps: McpUiHostContext, McpUiTheme, McpUiDisplayMode, McpUiHostCapabilities, McpUiAppCapabilities, McpUiHostStyles, CSP, permissions, and metadata types. - [MCP Apps Protocol Reference - Types & Schemas](https://sunpeak.ai/docs/mcp-apps/types/protocol-reference.md): Complete MCP Apps protocol reference: request and result types, notification types, method constants, union types (AppRequest, AppNotification, AppResult), and Zod validation schemas. - [MCP Testing Framework](https://sunpeak.ai/docs/mcp-testing.md): Automated testing of MCP servers using the inspector, simulations, live host testing, and multi-model evals. - [Quickstart](https://sunpeak.ai/docs/quickstart.md): Create your first MCP App or test an existing MCP server with sunpeak. - [sunpeak inspect](https://sunpeak.ai/docs/testing/cli/inspect.md): Inspect any MCP server in the inspector. - [sunpeak test](https://sunpeak.ai/docs/testing/cli/test.md): Run E2E tests, visual regression, live host tests, and multi-model evals. - [sunpeak upgrade](https://sunpeak.ai/docs/testing/cli/upgrade.md): Check for and install sunpeak updates. - [E2E Testing](https://sunpeak.ai/docs/testing/e2e.md): End-to-end testing of MCP Apps using the inspector, Playwright, and simulations. - [Evals](https://sunpeak.ai/docs/testing/evals.md): Multi-model tool calling evals for MCP servers. Test whether LLMs call your tools correctly across GPT-4o, Claude, Gemini, and more. - [Getting Started](https://sunpeak.ai/docs/testing/getting-started.md): Add automated testing to any MCP server in under five minutes. - [Inspector](https://sunpeak.ai/docs/testing/inspector.md): API reference for the Inspector component. - [Live Testing](https://sunpeak.ai/docs/testing/live.md): Automated browser testing of MCP Apps against real ChatGPT and future hosts. - [MCP Testing Framework](https://sunpeak.ai/docs/testing/overview.md): Test any MCP server with E2E, live host, eval, and unit testing. Works standalone or as part of a sunpeak framework project. - [Simulation](https://sunpeak.ai/docs/testing/simulations.md): Define test scenarios for your resources. - [Troubleshooting](https://sunpeak.ai/docs/testing/troubleshooting.md): Common issues when testing MCP Apps with the inspector, E2E tests, and live tests. - [Unit Testing](https://sunpeak.ai/docs/testing/unit.md): Unit testing MCP App components and hooks with Vitest and happy-dom. - [Visual Regression Testing](https://sunpeak.ai/docs/testing/visual.md): Screenshot comparison testing for MCP Apps across themes, display modes, and hosts. ## Optional - [GitHub](https://github.com/Sunpeak-AI/sunpeak) - [npm](https://www.npmjs.com/package/sunpeak) - [sunpeak.ai](https://sunpeak.ai)