Chris Tate 0e16ca33d4 Fix LLM hallucinations by dynamically generating prompt examples from catalog (#89)		5 maanden geleden
..
src	0e16ca33d4 Fix LLM hallucinations by dynamically generating prompt examples from catalog (#89)	5 maanden geleden
.env.example	4ae049f218 stripe app (#62)	5 maanden geleden
README.md	711e79b069 remove key/parentKey from flat specs (#77)	5 maanden geleden
eslint.config.js	4ae049f218 stripe app (#62)	5 maanden geleden
jest.config.js	4ae049f218 stripe app (#62)	5 maanden geleden
package.json	844f18d1ee fix deps (#70)	5 maanden geleden
pnpm-lock.yaml	4ae049f218 stripe app (#62)	5 maanden geleden
stripe-app.json	4ae049f218 stripe app (#62)	5 maanden geleden
tsconfig.json	4ae049f218 stripe app (#62)	5 maanden geleden
ui-extensions.d.ts	4ae049f218 stripe app (#62)	5 maanden geleden

Stripe App Example

A Stripe App example demonstrating how to use json-render to build dynamic, AI-generated UI within the Stripe Dashboard.

Overview

This example shows how to integrate json-render with Stripe's UI Extension SDK to create dashboard views that can be dynamically generated from prompts. The app includes:

Home - Revenue dashboard with AI-powered UI generation
Customers - Customer list and management
Customer Details - Individual customer view
Payments - Payment list and details
Subscriptions - Subscription management
Invoices - Invoice list
Products - Product catalog

Features

Full Stripe UIXT component catalog mapped to json-render
Dynamic spec generation from natural language prompts
Real-time data binding with Stripe API
Action handlers for Stripe operations (refunds, subscriptions, etc.)

Getting Started

Prerequisites

Stripe CLI installed
A Stripe account with app development enabled

Installation

# Install dependencies
pnpm install

# Start the Stripe App in development mode
stripe apps start

Development

The app uses the Stripe UI Extension SDK which handles authentication automatically - no API keys required in your environment.

# Run linting
pnpm lint

# Run tests
pnpm test

How It Works

Component Catalog: Maps json-render component types to Stripe UIXT components (Box, Button, Badge, etc.)
Action Handlers: Defines actions that can be triggered from the UI (e.g., refundPayment, cancelSubscription)
StripeRenderer: A custom renderer that uses the Stripe component catalog to render json-render specs
Views: Each view fetches data from the Stripe API and renders it using json-render specs

Example Usage

import { StripeRenderer, stripeCatalog } from "./lib/render";
import type { Spec } from "@json-render/react";

const spec: Spec = {
  root: "container",
  elements: {
    container: {
      type: "Stack",
      props: { direction: "vertical", gap: "medium" },
      children: ["heading", "metric"],
    },
    heading: {
      type: "Heading",
      props: { text: "Revenue", size: "large" },
      children: [],
    },
    metric: {
      type: "Metric",
      props: { label: "Total", value: "$12,345", format: "currency" },
      children: [],
    },
  },
};

function MyView() {
  return <StripeRenderer spec={spec} catalog={stripeCatalog} />;
}

README.md