An experimental project showcasing integration of AI capabilities into a modern web application.
Built with Next.js and TypeScript, it provides a minimal API layer to interact with an AI provider (e.g., OpenAI), guardrails for prompt safety, and a simple frontend UI for experimentation.

• AI Miniapp (experimental)

• Framework: Next.js (App Router, API routes)
• Language: TypeScript
• Styling: Tailwind CSS + shadcn/ui
• AI Integration: OpenAI API (or other LLM provider)
• Auth: Basic key-based auth (optional)
• Testing: Vitest + React Testing Library
• Deployment: Vercel (serverless functions)
• CI/CD: GitHub Actions

ai-miniapp/
├─ src/
│  ├─ app/                  # Next.js App Router pages
│  │  ├─ page.tsx           # Home
│  │  ├─ layout.tsx         # Root layout
│  │  ├─ api/ai/route.ts    # AI endpoint (proxy to provider)
│  │  └─ demos/             # Example UIs
│  ├─ components/           # UI components
│  ├─ lib/                  # AI helpers (prompt builder, validation)
│  ├─ styles/               # Tailwind styles
│  └─ public/               # static assets
├─ test/                    # tests
├─ package.json
└─ README.md

• Call external AI provider (e.g., OpenAI)
• Prompt builder & validator
• Guardrails (max tokens, content filtering, error handling)
• Minimal UI to experiment with prompts
• Optional usage tracking with Upstash Redis or DB

• Node.js LTS (≥ 20)
• npm (or pnpm/yarn)
• API key from OpenAI (or compatible provider)

git clone https://github.com/tonisilvan/ai-miniapp.git
cd ai-miniapp
npm install

Create .env.local:

OPENAI_API_KEY=sk-xxxx
NEXT_PUBLIC_SITE_URL=http://localhost:3000

npm run dev
# open http://localhost:3000

npm run build
npm start

• Unit tests with Vitest
• Component tests with React Testing Library
• Example test:

npm test

• Add prompt history
• Add cost estimation & token usage tracking
• Add user authentication (JWT/Clerk/Auth0)
• Add multi‑provider support (Anthropic, Cohere)
• Deploy demos to Vercel

MIT © Toni Silván