create-vettly-app

Scaffold a new Vettly project with App Store Guideline 1.2 compliance built in. Production-ready moderation in 5 minutes.

App Store Guideline 1.2

Apple requires every iOS app with user-generated content to implement four things. Every template includes all four out of the box:

| Requirement | Guideline | Included in Template | |-------------|-----------|----------------------| | Content filtering | 1.2.1 | Moderation middleware + components | | User reporting | 1.2.2 | SDK client wired up | | User blocking | 1.2.3 | SDK client wired up | | Audit trail | — | decisionId stored with every content record |

Run npx create-vettly-app and all four requirements are wired up.

Quick Start

npx create-vettly-app

Follow the prompts to:

1. Name your project
2. Choose a template (Next.js, Express, or React)
3. Select your package manager
4. Optionally add your API key

Templates

Next.js (Recommended)

Full-stack React with App Router, API routes, and built-in moderation.

Includes:

• @vettly/nextjs - Middleware and route helpers
• @vettly/react - Real-time moderation components
• API route with moderation middleware
• Example moderated form component

npx create-vettly-app my-app --template nextjs

Express

Node.js API server with Express middleware.

Includes:

• @vettly/express - Moderation middleware
• @vettly/sdk - Direct client access
• Example protected routes
• Error handling setup

npx create-vettly-app my-api --template express

React

React SPA with Vite and real-time moderation.

Includes:

• @vettly/react - Moderated components and hooks
• Vite build setup
• Example forms with live feedback

npx create-vettly-app my-frontend --template react

Usage

Interactive Mode

npx create-vettly-app

Prompts for:

• Project name
• Template selection
• Package manager preference
• API key (optional)

With Arguments

# Specify project name
npx create-vettly-app my-project

# Specify template
npx create-vettly-app my-project --template nextjs

# Specify package manager
npx create-vettly-app my-project --npm
npx create-vettly-app my-project --yarn
npx create-vettly-app my-project --pnpm
npx create-vettly-app my-project --bun

Options

| Option | Alias | Description | |--------|-------|-------------| | --template <name> | -t | Template: nextjs, express, or react | | --npm | | Use npm as package manager | | --yarn | | Use yarn as package manager | | --pnpm | | Use pnpm as package manager | | --bun | | Use bun as package manager |

What Gets Created

my-app/
├── .env                    # VETTLY_API_KEY (if provided)
├── .env.example            # Template for env vars
├── package.json            # Dependencies and scripts
├── README.md               # Getting started guide
└── [template files]        # Template-specific structure

Next.js Structure

my-app/
├── app/
│   ├── api/
│   │   └── comments/
│   │       └── route.ts    # Moderated API route
│   ├── page.tsx            # Home page with form
│   └── layout.tsx
├── components/
│   └── CommentForm.tsx     # ModeratedTextarea example
├── middleware.ts           # Route protection (optional)
└── ...

Express Structure

my-app/
├── src/
│   ├── index.ts            # Express app with middleware
│   ├── routes/
│   │   └── comments.ts     # Protected route
│   └── middleware/
│       └── moderation.ts   # Moderation setup
└── ...

React Structure

my-app/
├── src/
│   ├── App.tsx             # Main app
│   ├── components/
│   │   └── CommentForm.tsx # Moderated form
│   └── hooks/
│       └── useModeration.ts # Hook usage example
└── ...

After Creation

# Navigate to your project
cd my-app

# Start development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Then visit http://localhost:3000 to see your app.

Get Your API Key

If you didn't provide an API key during setup:

1. Sign up at vettly.dev
2. Go to Dashboard > API Keys
3. Create and copy your key
4. Add to .env:

VETTLY_API_KEY=sk_live_...

Next Steps

1. Try the example - Submit content and see moderation in action
2. Customize policies - Create policies at vettly.dev/dashboard
3. Add more routes - Use middleware to protect additional endpoints
4. Store decisions - Save decisionId with your data for audit trails

Links

• vettly.dev - Sign up
• docs.vettly.dev - Documentation
• @vettly/sdk - Core SDK
• @vettly/react - React components
• @vettly/nextjs - Next.js integration
• @vettly/express - Express middleware