Improve server support

tylersmith-openai · web-flow · commit 5c17749e9255 · 2025-11-23T09:03:46.000-07:00
- Adds 'use client' directives
- Protects access to window and document
- Safely accesses import.meta
- Removes core-js polyfills (unused atm)
- Misc documentation updates, including AppSDKUIProvider as optional.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Apps SDK UI
 
-Apps SDK UI is a lightweight, accessible design system for building high-quality ChatGPT apps. It provides Tailwind-integrated design tokens, a curated React component library, and utilities optimized for consistent experiences inside ChatGPT.
+Apps SDK UI is a lightweight, accessible design system for building high-quality ChatGPT apps with the [Apps SDK](https://developers.openai.com/apps-sdk). It provides Tailwind-integrated design tokens, a curated React component library, and utilities optimized for consistent experiences inside ChatGPT.
 
 ## Features
 
@@ -55,9 +55,11 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-### 3. Add React provider
+### 3. Configure router (optional)
 
-`<AppsSDKUIProvider>` provides polyfills for ChatGPT’s browser environment and allows you to define a router link component - used in components like `<TextLink>` and `<ButtonLink>`.
+`<AppsSDKUIProvider>` helps define your default router link component, used in components like `<TextLink>` and `<ButtonLink>`.
+
+This provider is optional - router links can also be [passed directly to components](https://openai.github.io/apps-sdk-ui/?path=/docs/components-textlink--docs#component-level) via the `as` prop.
 
 ```tsx
 // Must be imported first to ensure Tailwind layers and style foundations are defined before component styles
@@ -84,14 +86,6 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-If your app doesn’t use a router:
-
-```tsx
-<AppsSDKUIProvider linkComponent={"a" as any}>
-  <App />
-</AppsSDKUIProvider>
-```
-
 ### Start building
 
 Your project is now ready to use Apps SDK UI!
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,6 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "10.4.20",
     "clsx": "^2.1.1",
-    "core-js": "3.46.0",
     "lodash": "4.17.21",
     "luxon": "3.7.1",
     "postcss": "^8",
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,16 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1497_2717)">
+<rect width="512" height="512" rx="256" fill="#0080F7"/>
+<g clip-path="url(#clip1_1497_2717)">
+<path d="M215.921 209.432V177.018C215.921 174.288 216.945 172.24 219.332 170.876L284.504 133.344C293.376 128.227 303.953 125.839 314.87 125.839C355.814 125.839 381.748 157.572 381.748 191.35C381.748 193.737 381.748 196.467 381.405 199.197L313.846 159.617C309.753 157.229 305.656 157.229 301.563 159.617L215.921 209.432ZM368.097 335.679V258.224C368.097 253.446 366.049 250.034 361.956 247.646L276.314 197.831L304.293 181.793C306.68 180.43 308.728 180.43 311.116 181.793L376.288 219.325C395.055 230.245 407.678 253.446 407.678 275.964C407.678 301.894 392.325 325.78 368.097 335.676V335.679ZM195.79 267.438L167.811 251.061C165.423 249.698 164.399 247.649 164.399 244.919V169.855C164.399 133.347 192.378 105.708 230.252 105.708C244.584 105.708 257.889 110.486 269.151 119.016L201.935 157.914C197.841 160.302 195.793 163.714 195.793 168.492V267.441L195.79 267.438ZM256.013 302.24L215.921 279.722V231.954L256.013 209.436L296.102 231.954V279.722L256.013 302.24ZM281.774 405.968C267.442 405.968 254.138 401.19 242.875 392.66L310.092 353.762C314.185 351.374 316.234 347.962 316.234 343.184V244.235L344.555 260.611C346.942 261.975 347.966 264.023 347.966 266.753V341.817C347.966 378.325 319.645 405.965 281.774 405.965V405.968ZM200.907 329.88L135.736 292.348C116.968 281.427 104.345 258.227 104.345 235.709C104.345 209.436 120.04 185.893 144.265 175.997V253.791C144.265 258.57 146.313 261.981 150.407 264.369L235.709 313.842L207.731 329.88C205.343 331.243 203.295 331.243 200.907 329.88ZM197.156 385.837C158.6 385.837 130.279 356.834 130.279 321.008C130.279 318.278 130.621 315.548 130.961 312.818L198.177 351.717C202.271 354.104 206.367 354.104 210.461 351.717L296.102 302.243V334.658C296.102 337.388 295.078 339.436 292.691 340.8L227.519 378.332C218.647 383.449 208.07 385.837 197.153 385.837H197.156ZM281.774 426.438C323.06 426.438 357.52 397.096 365.371 358.197C403.584 348.302 428.151 312.475 428.151 275.967C428.151 252.082 417.916 228.882 399.491 212.162C401.197 204.997 402.221 197.831 402.221 190.668C402.221 141.877 362.641 105.365 316.918 105.365C307.707 105.365 298.836 106.729 289.964 109.801C274.608 94.7878 253.453 85.2344 230.252 85.2344C188.966 85.2344 154.507 114.576 146.656 153.475C108.442 163.371 83.875 199.197 83.875 235.705C83.875 259.59 94.1101 282.791 112.535 299.51C110.829 306.676 109.805 313.842 109.805 321.005C109.805 369.796 149.386 406.307 195.108 406.307C204.319 406.307 213.191 404.944 222.062 401.871C237.415 416.885 258.57 426.438 281.774 426.438Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1497_2717">
+<rect width="512" height="512" rx="256" fill="white"/>
+</clipPath>
+<clipPath id="clip1_1497_2717">
+<rect width="344.276" height="341.204" fill="white" transform="translate(83.875 85.2344)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/Installation.mdx b/src/Installation.mdx
@@ -53,9 +53,11 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-### 3. Add React provider
+### 3. Configure router (optional)
 
-`<AppsSDKUIProvider>` provides polyfills for ChatGPT's browser environment and allows you to define a router link component - used in components like `<TextLink>` and `<ButtonLink>`.
+`<AppsSDKUIProvider>` helps define your default router link component, used in components like `<TextLink>` and `<ButtonLink>`.
+
+ This provider is optional - router links can also be [passed directly to components](https://openai.github.io/apps-sdk-ui/?path=/docs/components-textlink--docs#component-level) via the `as` prop.
 
 ```tsx
 // Must be imported first to ensure Tailwind layers and style foundations are defined before component styles
@@ -82,14 +84,6 @@ createRoot(document.getElementById("root")!).render(
 )
 ```
 
-If your app doesn't use a router:
-
-```tsx
-<AppsSDKUIProvider linkComponent={"a" as any}>
-  <App />
-</AppsSDKUIProvider>
-```
-
 ### Start building
 
 Your project is now ready to use Apps SDK UI!
diff --git a/src/Introduction.mdx b/src/Introduction.mdx
@@ -11,7 +11,7 @@ import { Terminal, Cube, Documentation, GridAlt } from "./components/Icon"
 <Title>Apps SDK UI</Title>
 <Subtitle>Design system for building high quality apps in ChatGPT</Subtitle>
 
-Apps SDK UI is a design system tailored for ChatGPT, providing styling foundations with Tailwind, CSS variable design tokens, and a library of well-crafted, accessible components. Apps SDK UI includes:
+Apps SDK UI is a design system tailored for ChatGPT [Apps SDK](https://developers.openai.com/apps-sdk), providing styling foundations with Tailwind, CSS variable design tokens, and a library of well-crafted, accessible components. Apps SDK UI includes:
 
 - **Design tokens** &ndash; for colors, typography, spacing, sizing, shadows, surfaces, and more.
 - **Tailwind 4** &ndash; pre-configured with Apps SDK UI's design tokens.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { type ReactNode, type Ref, useEffect, useRef, useState } from "react"
 import { mergeRefs } from "react-merge-refs"
diff --git a/src/components/AppsSDKUIProvider/AppsSDKUIContext.tsx b/src/components/AppsSDKUIProvider/AppsSDKUIContext.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { type ComponentType, createContext, type ForwardRefExoticComponent } from "react"
 
 type AppsSDKUIContextValue = {
diff --git a/src/components/AppsSDKUIProvider/AppsSDKUIProvider.tsx b/src/components/AppsSDKUIProvider/AppsSDKUIProvider.tsx
@@ -1,9 +1,8 @@
+"use client"
+
 import { type ComponentType, type ForwardRefExoticComponent, type ReactNode } from "react"
 import { AppsSDKUIContext } from "./AppsSDKUIContext"
 
-// Polyfills
-import "core-js/actual/array/to-sorted"
-
 /// <reference path="../../global.d.ts" />
 
 interface DefaultConfig {
diff --git a/src/components/AppsSDKUIProvider/internal.ts b/src/components/AppsSDKUIProvider/internal.ts
@@ -1,3 +1,5 @@
+"use client"
+
 import { useContext } from "react"
 import { AppsSDKUIContext } from "./AppsSDKUIContext"
 
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { useMemo, useState } from "react"
 import { toCssVariables } from "../../lib/helpers"
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import {
   type ButtonHTMLAttributes,
@@ -193,7 +195,7 @@ type ButtonLink = <
       external?: boolean
       /**
        * Override the default component used for the link. This is useful for
-       * using a different routing library (e.g. React Router) or for testing
+       * using a routing library, or SSR rendering.
        * purposes.
        *
        * @default 'a'
@@ -214,7 +216,7 @@ export const ButtonLink = ((
   const {
     color = "primary",
     variant = "solid",
-    pill = false,
+    pill = true,
     size = "md",
     gutterSize,
     iconSize,
diff --git a/src/components/Button/ButtonLink.mdx b/src/components/Button/ButtonLink.mdx
@@ -13,7 +13,7 @@ import * as ButtonLinkStories from './ButtonLink.stories';
 
 ## Usage
 ```jsx
-import { ButtonLink } from "@openai/apps-sdk-ui/components/ButtonLink";
+import { ButtonLink } from "@openai/apps-sdk-ui/components/Button";
 ```
 <Canvas of={ButtonLinkStories.Base} additionalActions={[
   { title: 'View story', onClick: linkTo(ButtonLinkStories.title, 'Base')}
@@ -114,7 +114,7 @@ export function App() {
 ```
 
 ### Component-level
-For testing, and rare escape-hatch use-cases, you can also pass your Link component to the `as` prop.
+You can also pass your Link component to the `as` prop.
 
 ```tsx
 import {Link} from "next/link"
diff --git a/src/components/Button/CopyButton.tsx b/src/components/Button/CopyButton.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useRef, useState, type MouseEvent } from "react"
 import { copyToClipboard, type ClipboardContent } from "../../lib/copyToClipboard"
 import { Check, Copy } from "../Icon"
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { Checkbox as RadixCheckbox } from "radix-ui"
 import { type FocusEventHandler, type ReactNode, useId } from "react"
diff --git a/src/components/CodeBlock/CodeBlock.tsx b/src/components/CodeBlock/CodeBlock.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { type ComponentProps } from "react"
 import { createElement, PrismLight as SyntaxHighlighter } from "react-syntax-highlighter"
diff --git a/src/components/DatePicker/Calendar.tsx b/src/components/DatePicker/Calendar.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime, Interval } from "luxon"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { chunkIntoWeeks, getDaysOfMonth, isBefore, isSameDay, isToday } from "../../lib/dateUtils"
diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime } from "luxon"
 import { useMemo } from "react"
 import { useLatestValue } from "../../hooks/useLatestValue"
@@ -126,7 +128,7 @@ export const DatePicker = (props: DatePickerProps) => {
     disabled = false,
     dropdownIconType,
     placeholder = "Select date...",
-    pill = false,
+    pill = true,
     block = false,
     triggerClassName,
     triggerShowIcon = true,
diff --git a/src/components/DatePicker/context.tsx b/src/components/DatePicker/context.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime } from "luxon"
 import { createContext, use } from "react"
 import type { SelectControlProps } from "../SelectControl"
diff --git a/src/components/DateRangePicker/Calendar.tsx b/src/components/DateRangePicker/Calendar.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime, Interval } from "luxon"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { useBreakpoint } from "../../hooks/useBreakpoints"
diff --git a/src/components/DateRangePicker/DateRangePicker.tsx b/src/components/DateRangePicker/DateRangePicker.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime } from "luxon"
 import { useMemo } from "react"
 import { useLatestValue } from "../../hooks/useLatestValue"
@@ -139,7 +141,7 @@ export const DateRangePicker = (props: DateRangePickerProps) => {
     disabled = false,
     dropdownIconType,
     placeholder = "Select date range...",
-    pill = false,
+    pill = true,
     block = false,
     triggerStepperUnit,
     triggerClassName,
diff --git a/src/components/DateRangePicker/Trigger.tsx b/src/components/DateRangePicker/Trigger.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import type { DateTime } from "luxon"
 import { useMemo, type ComponentProps } from "react"
diff --git a/src/components/DateRangePicker/context.tsx b/src/components/DateRangePicker/context.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DateTime } from "luxon"
 import { createContext, use } from "react"
 import type { SelectControlProps } from "../SelectControl"
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { type ComponentProps, useState } from "react"
 import s from "./Image.module.css"
diff --git a/src/components/Indicator/CircularProgress.tsx b/src/components/Indicator/CircularProgress.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { useState, type ComponentProps } from "react"
 import { useSimulatedProgress } from "../../hooks/useSimulatedProgress"
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { useEffect, useId, useRef, useState } from "react"
 import { mergeRefs } from "react-merge-refs"
diff --git a/src/components/Markdown/Markdown.tsx b/src/components/Markdown/Markdown.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { Children, useMemo, type ComponentProps, type FC, type ReactNode } from "react"
 import ReactMarkdown from "react-markdown"
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { DropdownMenu } from "radix-ui"
 import React, {
   type ComponentProps,
@@ -184,7 +186,7 @@ type MenuLink = <
     MenuLinkProps & {
       /**
        * Override the default component used for the link. This is useful for
-       * using a different routing library (e.g. React Router) or for testing
+       * using a routing library, or SSR rendering.
        * purposes.
        *
        * @default 'a'
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { Popover as RadixPopover } from "radix-ui"
 import {
diff --git a/src/components/Popover/usePopoverContext.tsx b/src/components/Popover/usePopoverContext.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { createContext, use, type RefObject } from "react"
 
 export type PopoverContextValue = {
diff --git a/src/components/Popover/usePopoverController.tsx b/src/components/Popover/usePopoverController.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useCallback } from "react"
 import { flushSync } from "react-dom"
 import { waitForAnimationFrame } from "../../lib/helpers"
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { RadioGroup as RadixRadioGroup } from "radix-ui"
 import React, { createContext, use, useId, useMemo } from "react"
diff --git a/src/components/SegmentedControl/SegmentedControl.tsx b/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { ToggleGroup } from "radix-ui"
 import { useCallback, useLayoutEffect, useRef } from "react"
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { Popover } from "radix-ui"
 import React, {
diff --git a/src/components/SelectControl/SelectControl.tsx b/src/components/SelectControl/SelectControl.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { useRef, type ReactNode } from "react"
 import { mergeRefs } from "react-merge-refs"
diff --git a/src/components/ShimmerText/ShimmerText.tsx b/src/components/ShimmerText/ShimmerText.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useEffect, useState, type ReactNode } from "react"
 
 import clsx from "clsx"
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import clamp from "lodash/clamp"
 import round from "lodash/round"
diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import clsx from "clsx"
 import { Switch as RadixSwitch } from "radix-ui"
 import { type FocusEventHandler, type ReactNode, useId } from "react"
diff --git a/src/components/TagInput/TagInput.tsx b/src/components/TagInput/TagInput.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { useOnClickOutside } from "usehooks-ts"
 import { useLatestValue } from "../../hooks/useLatestValue"
diff --git a/src/components/TextLink/TextLink.mdx b/src/components/TextLink/TextLink.mdx
@@ -103,7 +103,7 @@ export function App() {
 ```
 
 ### Component-level
-For testing, and rare escape-hatch use-cases, you can also pass your Link component to the `as` prop.
+You can also pass your Link component to the `as` prop.
 
 ```tsx
 import {Link} from "next/link"
diff --git a/src/components/TextLink/TextLink.tsx b/src/components/TextLink/TextLink.tsx
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
diff --git a/src/components/Tooltip/CopyTooltip.tsx b/src/components/Tooltip/CopyTooltip.tsx
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
diff --git a/src/components/Transition/Animate.tsx b/src/components/Transition/Animate.tsx
diff --git a/src/components/Transition/AnimateLayout.tsx b/src/components/Transition/AnimateLayout.tsx
diff --git a/src/components/Transition/AnimateLayoutGroup.tsx b/src/components/Transition/AnimateLayoutGroup.tsx
diff --git a/src/components/Transition/SlotTransitionGroup.tsx b/src/components/Transition/SlotTransitionGroup.tsx
diff --git a/src/components/Transition/TransitionGroup.tsx b/src/components/Transition/TransitionGroup.tsx
diff --git a/src/hooks/useTextSelection.tsx b/src/hooks/useTextSelection.tsx
diff --git a/src/hooks/useTrailingValue.tsx b/src/hooks/useTrailingValue.tsx
diff --git a/src/lib/environment.ts b/src/lib/environment.ts
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import clsx from "clsx"`
`2`	`4`	`import { type ReactNode, type Ref, useEffect, useRef, useState } from "react"`
`3`	`5`	`import { mergeRefs } from "react-merge-refs"`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client"`
	`2`	`+`
`1`	`3`	`import { type ComponentType, createContext, type ForwardRefExoticComponent } from "react"`
`2`	`4`
`3`	`5`	`type AppsSDKUIContextValue = {`