mirror of
https://github.com/vercel-labs/json-render.git
synced 2026-10-02 03:54:41 +08:00
Chris Tate
3201854481
* external store adapter for state management Introduces a `StateStore` interface that lets users plug in their own state management (Redux, Zustand, XState, etc.) instead of being locked into the internal `useState`-based store. - Added `StateStore` interface and `createStateStore()` factory to `@json-render/core` - `StateProvider`, `JSONUIProvider`, and `createRenderer` now accept an optional `store` prop for controlled mode - When `store` is provided, it becomes the single source of truth (`initialState`/`onStateChange` are ignored) - When `store` is omitted, everything works exactly as before (fully backward compatible) - Applied across all platform packages: react, react-native, react-pdf * improvements * update docs * improvements * fixes * fix CI * add store adapters * fixes * fixes * fixes * fixes * e2e tests * improvements * fixes * fixes * fixes * fixes * update lockfile for widened react peer deps * fix dashboard build
Stripe App Examples
Stripe Apps examples demonstrating how to use json-render to build dynamic, AI-generated UI within the Stripe Dashboard.
Structure
| Folder | Description |
|---|---|
| api/ | Next.js server providing the /api/generate endpoint for AI-powered UI generation |
| drawer-app/ | Standard Stripe App that renders in the Dashboard drawer (sidebar) |
| fullpage-app/ | Full-page Stripe App using FullPageView (requires alpha access) |
Quick Start
1. Start the API server
cd api
pnpm install
cp .env.example .env # Set AI_GATEWAY_API_KEY
pnpm dev
2. Start a Stripe App
For the standard drawer app:
cd drawer-app
pnpm install
pnpm setup
stripe apps start
For the full-page app (requires alpha access):
cd fullpage-app
pnpm install
cp .env.example .env # Set STRIPE_APP_ID
pnpm setup
stripe apps start
# Navigate to https://dashboard.stripe.com/test/app/<your-app-id>
Notes
- The AI generation feature requires the API server to be running. Without it, the apps fall back to locally generated specs using real Stripe data.
- The
fullpage-appuses Stripe's full-page apps private developer preview. You need Stripe to enable the feature flag for your app and account. See fullpage-app/README.md for details.