{"_id":"@ainativekit/devtools","_rev":"7-b4001981ac6a23c78ed3dddf79661e7f","name":"@ainativekit/devtools","dist-tags":{"latest":"1.2.0"},"versions":{"0.1.0":{"name":"@ainativekit/devtools","version":"0.1.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@0.1.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"7f9f5a6bf2ea5a2ec3312df8be81b34d05de7d5e","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-0.1.0.tgz","fileCount":11,"integrity":"sha512-fZzkSXNNT4FYElyrWM6mAwXPj5C407GDKgmOT16LVpO5NhhCWanxr3Ns9TK63Lt2TwKVIPYmpXyZLmp6JzPuRA==","signatures":[{"sig":"MEUCIDNN1fOPNp6u7wqaP6GIU3hmh8cRfx2yCntYMLJxWveNAiEAgsebrFWnPjrJgh/529dgjD1sostzlkbSZ+wdjTf3vTo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":149876},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"e522a95ba9611d41ec21535d1631c035c890d3e9","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.8.2","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"20.19.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^0.9.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/devtools_0.1.0_1762778799655_0.549184750242288","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ainativekit/devtools","version":"0.2.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@0.2.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"28cd356d1e78897d9fb8a9d01954b365c1816c87","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-0.2.0.tgz","fileCount":11,"integrity":"sha512-bHA8XXC0Qi8IxMyrGu6kTsQWutJ1om2SSX82a9nu50o3kxaGMjY+aHg/oVuj1NeR0ww9agolY06aDoocwupivQ==","signatures":[{"sig":"MEQCIEcXi0TPIJhQRHQr568IWYkymT43qSn5c3QaI+RzENKOAiAxmLgnuqU2I0YB/3KlXgmWaRE/FW0jU/OEgr7C+IQ4jQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":258138},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"f89d112433f4125e84d885621665a3bb8d419e51","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.8.2","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"20.19.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^0.9.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^0.9.0"},"_npmOperationalInternal":{"tmp":"tmp/devtools_0.2.0_1762850222028_0.9913390735194136","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@ainativekit/devtools","version":"0.3.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@0.3.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"70bedace4685fb9c7d107546c69ec239b7b08b47","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-0.3.0.tgz","fileCount":11,"integrity":"sha512-MkVxqOykk0tkvp6Kuxncqf+yA96N1XNA/XXgV9J6HJj/QGLnUvT+gY9lbMMruGCJkhDdRBclOhSOarL6x0UvGQ==","signatures":[{"sig":"MEUCIA5RiRIBsFlPPswxOQ28qOPhoPXBmoiEFdsdMqCt6kMsAiEAvoV/dFTreHRdky0QlqvUN+yms56ca6gl0mi8keeYih8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":275631},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"65878da826cdd632484a3deb4c6fd5c41e48bc55","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.9.3","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^0.10.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^0.10.0"},"peerDependenciesMeta":{"@ainativekit/ui":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/devtools_0.3.0_1762862065348_0.04149493647440705","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@ainativekit/devtools","version":"0.4.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@0.4.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"260dc05df93d962b218d541d0fbe919cc4da9ff8","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-0.4.0.tgz","fileCount":11,"integrity":"sha512-rLOqstqcNGYX8oyt6dpnO4dSK/qEKVyPIEC928+HfWkSzYg5yilmGUbRafoYXqSevQYnylm6QALh7djFSZoBzA==","signatures":[{"sig":"MEUCIFGE533E2NSPpklgKiURMLqcT0YkJ7/Fgr1WXC22y8JYAiEAzozKhUojWYiuNW24xyYi0pUdyJViPVmRGjPWYE/eCQI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":274653},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"8d4150416cff23818db6a195f4e2077d0209c440","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.9.3","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^0.10.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^0.10.0"},"peerDependenciesMeta":{"@ainativekit/ui":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/devtools_0.4.0_1763295188482_0.3163703087518941","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@ainativekit/devtools","version":"1.0.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@1.0.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"8ad8700445def761b9cb4145f3cbd88bbe79a42d","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-1.0.0.tgz","fileCount":11,"integrity":"sha512-RI1DWzBoUZaqr9a7io1Z22u7XAJbyN5BGMz960YigYtLyX711oZStuq4tcaUkI99dKW3g8HA2dtmvSBU52WZUQ==","signatures":[{"sig":"MEUCIQCy0nMSDLdF5rkMvl3nc0ZfpLgXZK5LuupYnj35G49JdAIgdxX6yHPUaDjUR/f7+P2eHDWHqQobbJVG9PVdGWSYrMI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":277237},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"a78567d8cc13900ca0d5c25849a49e6240015428","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.9.2","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"23.11.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^1.0.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^1.0.0"},"peerDependenciesMeta":{"@ainativekit/ui":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/devtools_1.0.0_1767008599020_0.8595371514458034","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@ainativekit/devtools","version":"1.1.0","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"author":{"name":"Jake Lin"},"license":"MIT","_id":"@ainativekit/devtools@1.1.0","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"dist":{"shasum":"f4bd143788d108f102c66d3d58caafb4368b960f","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-1.1.0.tgz","fileCount":11,"integrity":"sha512-/NrpBM9gD7I6vXB3LxK0PCyu6f4e7TwZy4XrJfkOCD+KhB3BQ2Tn7sQt1E+QE+ITvXgFP0IVT85bLcYPgO0xCA==","signatures":[{"sig":"MEUCIQCeg58axvj4srrTNCH6aY817EAZU2tR6W1ZxI8nxHQ6pgIgOtiPvknBTjQRhrmAZqlpMIj/+cCE/frHPzN79TFSskQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":284093},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"gitHead":"cada38db8a94d527fe7c46d6d1d0108b282070be","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"repository":{"url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git","type":"git"},"_npmVersion":"10.9.2","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","directories":{},"_nodeVersion":"23.11.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.6.0","@types/react":"^18.3.0","@ainativekit/ui":"^1.0.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^1.0.0"},"peerDependenciesMeta":{"@ainativekit/ui":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/devtools_1.1.0_1767240997075_0.24554713574273257","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@ainativekit/devtools","version":"1.2.0","description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","author":{"name":"Jake Lin"},"license":"MIT","type":"module","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"repository":{"type":"git","url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git"},"bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./package.json":"./package.json"},"engines":{"node":">=18.0.0"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","type-check":"tsc --noEmit","prepublishOnly":"npm run clean && npm run build"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@ainativekit/ui":"^1.0.0"},"peerDependenciesMeta":{"@ainativekit/ui":{"optional":true}},"devDependencies":{"@types/react":"^18.3.0","@types/react-dom":"^18.3.0","typescript":"^5.6.0","tsup":"^8.0.0","react":"^18.3.0","react-dom":"^18.3.0","@ainativekit/ui":"^1.0.0"},"_id":"@ainativekit/devtools@1.2.0","gitHead":"5550921f979919a229b33e9a2fa77ccb1ea9f33f","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-1y0Msb/WDcjMJBbE06OEc5nMI4IZjC+BjLSIaGjbiT6xR8A/I2EoEdcFD0opwpLASRv8YEX5fDM5D6pbpaMPgQ==","shasum":"503f10315271fe4336d1d0cdcbf908afb2e33d48","tarball":"https://registry.npmjs.org/@ainativekit/devtools/-/devtools-1.2.0.tgz","fileCount":11,"unpackedSize":297403,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCOjxcegiWPuTFitLdKBMdpzIvrhP5A/0xtHqhyHVEqGwIgSXriofFByzhajrRKzVwpOWGEnT3+8UjB/NvQk6WXeUg="}]},"_npmUser":{"name":"jakelin","email":"jakelinau@gmail.com"},"directories":{},"maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/devtools_1.2.0_1767957247825_0.428797667411289"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T12:46:39.545Z","modified":"2026-01-09T11:14:08.176Z","0.1.0":"2025-11-10T12:46:39.878Z","0.2.0":"2025-11-11T08:37:02.261Z","0.3.0":"2025-11-11T11:54:25.534Z","0.4.0":"2025-11-16T12:13:08.704Z","1.0.0":"2025-12-29T11:43:19.177Z","1.1.0":"2026-01-01T04:16:37.236Z","1.2.0":"2026-01-09T11:14:07.969Z"},"bugs":{"url":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools/issues"},"author":{"name":"Jake Lin"},"license":"MIT","homepage":"https://github.com/AINativeKit/chatgpt-apps-sdk-devtools#readme","keywords":["chatgpt","chatgpt-apps","chatgpt-apps-sdk","chatgpt-widget","openai","openai-chatgpt","devtools","development-tools","developer-tools","ainativekit","react","react-devtools","testing","mock","simulator","debug","debugging","mcp","mcp-server","typescript","theme","dark-mode","responsive","viewport"],"repository":{"type":"git","url":"git+https://github.com/AINativeKit/chatgpt-apps-sdk-devtools.git"},"description":"Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK","maintainers":[{"name":"jakelin","email":"jakelinau@gmail.com"}],"readme":"# @ainativekit/devtools\n\n> Development tools for building and testing ChatGPT Apps using ChatGPT Apps SDK\n\n[![npm version](https://img.shields.io/npm/v/@ainativekit/devtools.svg)](https://www.npmjs.com/package/@ainativekit/devtools)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA powerful, zero-configuration development environment for building ChatGPT apps. Simulate the ChatGPT production environment locally with interactive controls for testing different states, themes, and device types.\n\n## ✨ Features\n\n- 🎭 **Mock ChatGPT Environment** - Simulates `window.openai` API exactly like production\n- 🎨 **Theme Switching** - Test light and dark themes instantly\n- 📱 **Device Simulation** - Desktop (768px), Tablet (576px), Mobile (380px) viewports aligned with OpenAI Apps SDK\n- 🔄 **State Testing** - Loading, data, and error states with customizable delays\n- 🐛 **Debug Overlays** - Visual boundary indicators for development\n- 🚀 **Zero Configuration** - Works out of the box with sensible defaults\n- 📦 **Production Ready** - Clean separation between dev tools and widget code\n- 🔌 **ChatGPT Apps SDK Compatible** - Works with any ChatGPT Apps SDK implementation\n\n## 📋 Requirements\n\n- **React** 18.0.0 or higher\n- **Node.js** 18.0.0 or higher\n- **Modern browser** with ES2020+ support\n  - Chrome 80+, Firefox 75+, Safari 13.1+, Edge 80+\n\n### Optional Dependencies\n\n- **@ainativekit/ui** 1.0.0 or higher (optional, but recommended for enhanced theming)\n  - DevTools includes basic theme support out of the box\n  - For full design system integration, install `@ainativekit/ui` and use `AppsSDKUIProvider`\n  - See usage examples below for both standalone and integrated approaches\n\n## 📦 Installation\n\n```bash\nnpm install --save-dev @ainativekit/devtools\n```\n\nor with yarn:\n\n```bash\nyarn add -D @ainativekit/devtools\n```\n\n## 🚀 Quick Start\n\n### Standalone Usage (No Dependencies)\n\nDevTools works out of the box with built-in theme support:\n\n```typescript\nimport { DevContainer } from '@ainativekit/devtools';\nimport App from './App';\n\n// Only use DevContainer in development\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nroot.render(\n  import.meta.env.DEV ? (\n    <DevContainer>\n      <App />\n    </DevContainer>\n  ) : (\n    <App />\n  )\n);\n```\n\n### Enhanced Usage (with @ainativekit/ui)\n\nFor full design system integration and advanced theming:\n\n```typescript\nimport { DevContainer } from '@ainativekit/devtools';\nimport { ThemeProvider } from '@ainativekit/ui';\nimport App from './App';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nroot.render(\n  <ThemeProvider>\n    {import.meta.env.DEV ? (\n      <DevContainer>\n        <App />\n      </DevContainer>\n    ) : (\n      <App />\n    )}\n  </ThemeProvider>\n);\n```\n\n### With Custom Data Loader\n\n```typescript\n<DevContainer\n  dataLoader={async () => {\n    // Return your widget-specific mock data\n    const response = await fetch('/api/mock-data');\n    return response.json();\n  }}\n  loadingDelay={3000} // Test loading states\n  theme=\"dark\" // Start with dark theme\n>\n  <YourWidget />\n</DevContainer>\n```\n\n### Multiple Widgets with Widget-Specific Data Loaders (v1.0.0+)\n\nDevContainer automatically detects when you have multiple widgets and shows a selector. Each widget can have its own data loader:\n\n```typescript\nimport { DevContainer } from '@ainativekit/devtools';\nimport { AppsSDKUIProvider } from '@ainativekit/ui';\nimport CarouselWidget from './widgets/CarouselWidget';\nimport MapWidget from './widgets/MapWidget';\nimport ListWidget from './widgets/ListWidget';\nimport AlbumWidget from './widgets/AlbumWidget';\n\nfunction App() {\n  return (\n    <AppsSDKUIProvider linkComponent=\"a\">\n      <DevContainer\n        widgets={[\n          {\n            id: 'carousel',\n            name: 'Pizza Carousel',\n            component: CarouselWidget,\n            dataLoader: () => carouselData,\n            emptyDataLoader: () => emptyCarouselData\n          },\n          {\n            id: 'map',\n            name: 'Pizza Map',\n            component: MapWidget,\n            dataLoader: () => mapData\n          },\n          {\n            id: 'list',\n            name: 'Pizza List',\n            component: ListWidget,\n            dataLoader: () => listData,\n            emptyDataLoader: () => emptyListData\n          },\n          {\n            id: 'album',\n            name: 'Photo Albums',\n            component: AlbumWidget,\n            dataLoader: () => albumData\n          }\n        ]}\n        loadingDelay={1500}\n        theme=\"light\"\n        autoLoad={true}\n        defaultWidget=\"carousel\"\n      />\n    </AppsSDKUIProvider>\n  );\n}\n```\n\n**Features:**\n- Single dev server for all widgets\n- Widget-specific data loaders (v1.0.0+)\n- Automatic widget selector (only shows when multiple widgets)\n- URL support (`?widget=map`) for deep linking\n- Persistent widget selection\n- Auto-reload data when switching widgets\n\n## 📖 API Reference\n\n### DevContainer Props\n\n#### Single Widget Mode\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `React.ReactNode` | - | Single widget component |\n| `dataLoader` | `() => Promise<any> \\| any` | - | Data loader function |\n| `emptyDataLoader` | `() => Promise<any> \\| any` | - | Empty state data loader |\n\n#### Multi-Widget Mode\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `widgets` | `Widget[]` | - | Array of widget configurations |\n| `dataLoaders` | `Record<string, Function>` | `{}` | Map of global data loader functions |\n| `emptyDataLoaders` | `Record<string, Function>` | `{}` | Map of global empty data loader functions |\n| `defaultDataLoader` | `string` | - | Key for default data loader |\n| `defaultWidget` | `string` | - | ID of default widget to show |\n\n#### Widget Type (v1.0.0+)\n| Property | Type | Required | Description |\n|----------|------|----------|-------------|\n| `id` | `string` | Yes | Unique identifier for the widget |\n| `name` | `string` | Yes | Display name for the widget selector |\n| `component` | `React.ComponentType` | Yes | The widget component |\n| `dataLoader` | `() => Promise<any> \\| any` | No | Widget-specific data loader (single, hides dropdown) |\n| `emptyDataLoader` | `() => Promise<any> \\| any` | No | Widget-specific empty state data loader |\n| `dataLoaders` | `Record<string, Function>` | No | Multiple named data loaders (v1.2.0+, shows dropdown) |\n| `emptyDataLoaders` | `Record<string, Function>` | No | Matching empty state loaders for dataLoaders |\n| `defaultDataLoader` | `string` | No | Default data loader key for the widget |\n\n#### Common Props\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `loadingDelay` | `number` | `2000` | Delay (ms) before loading data |\n| `theme` | `'light' \\| 'dark'` | `'light'` | Initial theme |\n| `autoLoad` | `boolean` | `true` | Auto-load data on mount |\n\n### createMockData\n\n```typescript\ncreateMockData<T>(fullData: T, config?: MockDataConfig<T>): MockData<T>\n```\n\nCreates type-safe mock data with automatic empty state generation.\n\n**Config Options:**\n- `emptyData`: Explicit empty state data\n- `emptyTransform`: Function to derive empty state from full data\n- If neither provided, generates empty object automatically\n\n### Mock OpenAI API\n\nThe DevContainer automatically mocks the `window.openai` API with these methods:\n\n```typescript\nwindow.openai = {\n  callTool: async (name, args) => { /* mocked */ },\n  sendFollowUpMessage: async ({ prompt }) => { /* mocked */ },\n  openExternal: ({ href }) => { /* mocked */ },\n  setWidgetState: (state) => { /* mocked */ },\n  // Plus all OpenAiGlobals properties\n  theme: 'light' | 'dark',\n  toolOutput: any,\n  toolResponseMetadata: any, // Server _meta field (v1.2.0+)\n  locale: string,\n  maxHeight: number,\n  userAgent: { device: { type }, capabilities: { hover, touch } },\n  // DevTools-specific (v1.1.0+)\n  widgetState: 'loading' | 'data' | 'empty' | 'error' // Current dev tool state\n}\n```\n\n## 🎮 Interactive Controls\n\n### Toolbar Features\n\n- **State Controls**: Switch between Loading, Instant Data, Delayed Data, Empty, and Error states\n- **Theme Toggle**: Switch between light and dark themes\n- **Device Simulation**: Test desktop, tablet, and mobile viewports\n- **Debug Border**: Toggle visual boundary indicators\n- **Collapsible UI**: Hide/show dev tools with a single click\n\n## 💡 Common Patterns\n\n### Testing Loading States\n\n```typescript\n<DevContainer\n  loadingDelay={5000} // 5 second delay\n  dataLoader={async () => {\n    // Simulate slow API\n    await new Promise(resolve => setTimeout(resolve, 2000));\n    return { data: 'loaded' };\n  }}\n>\n  <App />\n</DevContainer>\n```\n\n### Testing Empty States\n\n```typescript\n<DevContainer\n  emptyDataLoader={() => {\n    // Return widget-specific empty state\n    return {\n      type: 'search-results',\n      properties: [],\n      searchInfo: { totalResults: 0, location: 'Sydney, NSW' }\n    };\n  }}\n  dataLoader={async () => {\n    // Regular data when not in empty state\n    return await fetchMockData();\n  }}\n>\n  <SearchWidget />\n</DevContainer>\n```\n\n### Testing Error States\n\n```typescript\n<DevContainer\n  dataLoader={() => {\n    // Return error data\n    return { error: 'Something went wrong' };\n  }}\n>\n  <App />\n</DevContainer>\n```\n\n### Custom Mock Data\n\n```typescript\n// mockData.ts\nexport const mockSearchResults = {\n  type: 'search-results',\n  items: [\n    { id: 1, title: 'Result 1' },\n    { id: 2, title: 'Result 2' }\n  ]\n};\n\n// App.tsx\nimport { mockSearchResults } from './mockData';\n\n<DevContainer\n  dataLoader={() => mockSearchResults}\n>\n  <SearchWidget />\n</DevContainer>\n```\n\n## 🏗 Architecture\n\nThe DevContainer follows these principles:\n\n1. **Zero Widget Contamination** - Your widget code contains no dev-specific logic\n2. **Production Parity** - Uses the same APIs as production ChatGPT Apps\n3. **External Debugging** - All debug overlays are applied from outside the widget\n4. **Type Safety** - Full TypeScript support with AINativeKit types\n5. **Clean Separation** - Dev tools are never included in production builds\n\n## 🔧 Development\n\n### Building the Package\n\n```bash\nnpm run build\n```\n\n### Development Mode\n\n```bash\nnpm run dev\n```\n\n### Type Checking\n\n```bash\nnpm run type-check\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## 📄 License\n\nMIT © Jake Lin\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/AINativeKit/chatgpt-apps-sdk-devtools)\n- [NPM Package](https://www.npmjs.com/package/@ainativekit/devtools)\n- [AINativeKit - ChatGPT Apps SDK UI](https://github.com/AINativeKit/chatgpt-apps-sdk-ui)\n- [ChatGPT Apps Documentation](https://platform.openai.com/docs/chatgpt)\n\n## 🙏 Acknowledgments\n\nBuilt with ❤️ for the ChatGPT app developer community. This tool helps developers build and test ChatGPT Apps using the ChatGPT Apps SDK, making development faster and more enjoyable.","readmeFilename":"README.md"}