Skip to main content

​
Overview

If you already have a React project and want to add ChatGPT widget capabilities, you can integrate the sunpeak library directly.
Starting from scratch? Use the Quickstart guide to create a new project with the sunpeak Starter Kit.

​
Prerequisites

Your existing project needs:

React

Version 18 or 19

React DOM

Version 18 or 19

Node.js

Version 20 or higher

Build Tool

Vite recommended (Webpack/Parcel also work)

​
Installation Steps

1

Install sunpeak

Add sunpeak to your project dependencies:
  • pnpm
  • npm
  • yarn
pnpm add sunpeak
2

Install Tailwind CSS 4

sunpeak requires Tailwind CSS 4. If you don’t have it installed:
pnpm add -D tailwindcss@next @tailwindcss/vite@next
Configure Tailwind in your build config:
  • Vite
  • Webpack
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
3

Wrap with ChatGPT Simulator

For local development, wrap your widget with the ChatGPT Simulator:
import 'sunpeak/style.css'; // Required to style the simulator.
import { ChatGPTSimulator } from 'sunpeak';
import { MyWidget } from './MyWidget';

function App() {
  return (
    <ChatGPTSimulator>
      <MyWidget />
    </ChatGPTSimulator>
  );
}
Only use the simulator in development. For production, export your widget component directly.
4

Build your widget

Build your widget with sunpeak APIs.

​
Configuration Options

​
TypeScript

If using TypeScript, sunpeak types are included. Update your tsconfig.json if needed: 
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx"
  }
}

​
Tailwind Configuration

Add to your CSS entrypoint: 
@import "tailwindcss";
@import "@openai/apps-sdk-ui/css";

/* Scan simulator source files for Tailwind classes */
@source "./**/*.{ts,tsx}";

/* Required for Tailwind to find class references in Apps SDK UI components. */
@source "../node_modules/@openai/apps-sdk-ui";

/* Configure dark mode to use data-theme attribute (OpenAI SDK standard) */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

​
Need the Full Starter Kit?

If you want the complete development setup with pre-built components, build tools, and testing framework, create a new project instead. See the Quickstart guide for details.

Multi-Platform APIs

Start using sunpeak multi-platform APIs