v1.2.0

What's New

Added

• ChatGPT-style border - Container border simulating widgetPrefersBorder: true
  • Responsive border-radius: 24px (desktop), 16px (tablet/mobile)
  • Toggle in Advanced settings (enabled by default)
• Widget-specific multiple data loaders - New props for widgets with multiple data sources
  • dataLoaders: Record<string, Function> - Multiple named loaders per widget (shows dropdown)
  • emptyDataLoaders: Record<string, Function> - Matching empty state loaders
  • defaultDataLoader: string - Default loader key for the widget

Fixed

• toolResponseMetadata support - window.openai.toolResponseMetadata now populated alongside toolOutput
  • Widgets using useToolResponseMetadata() hook now receive data correctly

Changed

• Advanced settings panel now open by default
• Debug toggle replaced with Border toggle

Full Changelog: v1.1.0...v1.2.0

1.1.0

[1.1.0] - 2026-01-01

Added

• Data loader persistence - Selected data loader (sunny, rainy, etc.) now persists to localStorage
• Auto-load on change - Data automatically loads when switching data loader or widget dropdown (shows loading state first)
• Widget state exposure - window.openai.widgetState now exposes current state ('loading' | 'data' | 'empty' | 'error') to widgets
  • Enables widgets to adapt behavior based on dev tool state
  • Dispatches openai:widgetState custom event when state changes

Changed

• Widget/data loader change now uses delayed loading (shows skeleton) instead of instant load
• Viewport breakpoints aligned with OpenAI Apps SDK - Updated to match official breakpoint definitions:
  • Tablet: 640px → 576px (sm breakpoint)
  • Mobile: 375px → 380px (xs breakpoint)
  • Desktop: unchanged at 768px (md breakpoint)

1.0.0

[1.0.0] - 2025-12-29

Stable Release

First stable release of @ainativekit/devtools, aligned with @ainativekit/ui v1.0.0.

Added

• Widget-specific data loaders - Each widget can now define its own data loader
  • dataLoader and emptyDataLoader props on Widget type
  • Auto-reload data when switching to widgets with their own loaders
  • Hide global data loader dropdown when widget has its own loader
• Beautiful example widgets - 4 production-ready example widgets
  • Pizza Carousel - SummaryCard with compact mode
  • Pizza Map - Interactive map with fullscreen support
  • Pizza List - Ranked list with interactive selection
  • Photo Albums - Album carousel with fullscreen viewer

Changed

• @ainativekit/ui peer dependency - Updated to ^1.0.0
• Toolbar positioning - Changed from fixed to static positioning
  • Toolbar no longer floats over content
  • Removed toolbarPosition prop (always at top)
  • Better compatibility with fullscreen components

Fixed

• Fullscreen map mode no longer blocked by floating toolbar
• Removed unused wrapper div in content area

Examples

• Tailwind v4 configured for basic example
• Widgets example showcases @ainativekit/ui v1.0.0 components
• All widgets use widget-specific data loaders pattern

0.4.0

What's New

Features

• Brand Colors Support - Add brandColors prop to DevContainer for custom theming
• Semantic State Tokens - New CSS variables for info, success, warning, and error states

Improvements

• Replace 70+ hardcoded colors with AINativeKit design tokens
• Automatic theme switching via CSS variables
• Better dark mode consistency across all DevTools components

Install

npm install @ainativekit/devtools@0.4.0

0.3.0

[0.3.0] - 2025-11-11

Major Improvements

• @ainativekit/ui is now optional - DevTools works standalone without requiring @ainativekit/ui
  • Includes minimal built-in theme support (~2KB CSS)
  • Auto-detects and enhances when @ainativekit/ui is available
  • Zero-configuration experience for both standalone and enhanced usage

Added

• Built-in theme CSS - Minimal design system CSS variables bundled with DevTools
  • Essential color variables (bg, text, icon, border, brand)
  • Light and dark theme support via data-theme attribute
  • Covers all DevTools UI components and common widget patterns
• Optional peer dependency support - Uses peerDependenciesMeta to mark @ainativekit/ui as optional
  • npm/yarn/pnpm won't warn if @ainativekit/ui is not installed
  • Works with modern package managers (npm 7+, yarn 2+, pnpm 6+)

Changed

• @ainativekit/ui dependency - Changed from required to optional peer dependency
  • Still recommended for full design system integration
  • DevTools provides basic theming without it
  • No breaking changes for existing users

Documentation

• Updated README with standalone and enhanced usage examples
• Clarified @ainativekit/ui is optional but recommended
• Added comparison between standalone and enhanced modes
• Updated requirements section to reflect optional dependencies

Bundle Size

• Standalone mode: ~2KB CSS overhead for theme support
• Enhanced mode: Same as before when using @ainativekit/ui
• No runtime performance impact

0.2.0

🎉 Major Release: Unified Architecture & Enhanced UI

Version 0.2.0 brings a complete architectural refactor with a unified DevContainer component, beautiful dark mode support, and numerous UX improvements.

🌟 Highlights

Unified DevContainer Architecture

• Single component intelligently handles both single and multi-widget development
• Automatic detection: no selector for single widget, dropdown for multiple
• Cleaner API with intelligent defaults

Modern UI Design

• Completely redesigned dev tools bar with glassmorphism effects
• Full dark mode support with theme-adaptive styling
• Better visual hierarchy and improved spacing

✨ New Features

• Multi-widget support with URL parameters and localStorage
• createMockData utility for type-safe mock data
• Empty state support with dedicated controls
• Error Boundary for graceful error handling

🐛 Bug Fixes

• Fixed delayed data loading race condition
• Fixed dropdown arrow rendering issues
• Improved type definitions

📦 Installation

npm install @ainativekit/devtools@0.2.0

0.1.0

🎉 Initial Release of @ainativekit/devtools

Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK.

✨ Features

• 🎭 Mock ChatGPT Environment with window.openai API
• 🎨 Theme switching (Light/Dark)
• 📱 Device simulation (Desktop/Tablet/Mobile)
• 🔄 State testing (Loading/Data/Empty/Error)
• 🐛 Debug overlays for development
• 🚀 Zero configuration setup
• 🛡️ Error boundary for graceful error handling
• 📦 Full TypeScript support

📦 Installation

npm install --save-dev @ainativekit/devtools

🚀 Quick Start

import { DevContainer } from '@ainativekit/devtools';
import { ThemeProvider } from '@ainativekit/ui';
import App from './App';

root.render(
  <ThemeProvider>
    {import.meta.env.DEV ? (
      <DevContainer>
        <App />
      </DevContainer>
    ) : (
      <App />
    )}
  </ThemeProvider>
);