🥞PancakeJS

Packages

Pancake SDK consists of two main packages that work together.

Core Packages

@pancake-apps/server

Server framework for views, actions, data endpoints, and protocol adapters.

@pancake-apps/web

Client SDK with React hooks, vanilla JS API, and protocol adapters.

@pancake-apps/server

The server package provides everything you need to build the backend of a Pancake app.

Installation

pnpm add @pancake-apps/server

Features

  • createApp: Main application factory
  • defineView, defineAction, defineData: Type-safe definition helpers
  • discoverViews: Auto-discover views from filesystem
  • createTunnel: Programmatic tunnel creation
  • Protocol adapters: MCP and OpenAI support built-in

Main Exports

import {
  // App
  createApp,

  // Definition helpers
  defineView,
  defineAction,
  defineData,
  defineTool,

  // Discovery
  discoverViews,
  discoverViewsAsync,

  // Tunnel
  createTunnel,
  isTunnelProviderAvailable,

  // Port utilities
  getAvailablePort,
  getAvailablePorts,
  isPortAvailable,

  // Type guards
  isViewConfig,
  isActionConfig,
  isDataConfig,
  isToolConfig,
} from '@pancake-apps/server';

Type Exports

import type {
  // App types
  AppConfig,
  App,
  StartOptions,
  Middleware,
  MiddlewareContext,
  Plugin,
  PluginContext,

  // View types
  ViewConfig,
  ViewDefinition,
  ViewMetadata,
  DiscoveredView,

  // Action types
  ActionConfig,
  ActionDefinition,

  // Data types
  DataConfig,
  DataDefinition,

  // Tool types
  ToolConfig,
  ToolDefinition,

  // Protocol types
  Visibility,
  Protocol,
  HostContext,

  // Tunnel types
  TunnelProvider,
  TunnelResult,
  TunnelConfig,
} from '@pancake-apps/server';

@pancake-apps/web

The web package provides everything you need for the client-side of views.

Installation

pnpm add @pancake-apps/web

Features

  • React hooks: useViewParams, useViewState, useAction, useData, useNavigation, etc.
  • Vanilla JS API: window.pancake global for HTML views
  • Protocol adapters: Automatic detection of host environment
  • Theme support: Light/dark mode from host

React Exports

import {
  // Provider
  PancakeProvider,

  // Hooks
  useViewState,
  useViewParams,
  useNavigation,
  useAction,
  useData,
  useTheme,
  useDisplayMode,
  useHost,
  useActionInput,
  usePancakeClient,
} from '@pancake-apps/web';

// Or from the /react subpath
import { ... } from '@pancake-apps/web/react';

Vanilla JS Exports

import {
  initializePancake,
  getClient,
  getPancake,
  PancakeClient,
} from '@pancake-apps/web';

Package Compatibility

Both packages are designed to work together:

@pancake-apps/server@pancake-apps/web
0.x0.x

Keep both packages on the same major version.

Peer Dependencies

@pancake-apps/server

PackageVersion
express^5.0.0
zod^3.24.0

@pancake-apps/web

PackageVersion
react^18.0.0 or ^19.0.0
react-dom^18.0.0 or ^19.0.0

CLI Package

The create-pancake CLI is a separate package for scaffolding new projects:

npx create-pancake my-app

You don't need to install this globally. Use npx to run it directly.

Next Steps

On this page