LLM Gateway Templates

A collection of open-source templates for building AI-powered applications using LLM Gateway - a unified API gateway for accessing multiple Large Language Models.

Deploy

Monetize your AI app in 5 minutes (Embeddable Credits) ⭐

Image Generation App

Templates

Template	Description	Stack	Deploy	Live preview
Embeddable Credits ⭐	Monetize your AI app in 5 min — end-user wallets ("Stripe for AI")	Next.js 16, React 19, Embeddable SDK
Showcase	Public gallery of apps built with LLM Gateway templates	Next.js 16, React 19, Tailwind CSS
Image Generation	Full-stack web app for AI image generation	Next.js 16, React 19, Tailwind CSS		Live demo
AI Chatbot	Streaming chat with conversation history and model selector	Next.js 16, React 19, Tailwind CSS		Live demo
Model Arena	Compare up to four models side by side on speed, cost and quality	Next.js 16, React 19, AI SDK 7
AI Slides	AI presentation builder with research, images, charts and PowerPoint export	Next.js 16, React 19, json-render
QA Agent	Natural-language QA tests run by an agent in a real headless browser	Next.js 16, Playwright, AI SDK 7
OG Image Generator	AI-powered Open Graph image generator with preview and download	Next.js 16, React 19, Tailwind CSS		Live demo
Feedback Dashboard	Customer feedback sentiment analysis dashboard	Next.js 16, React 19, Tailwind CSS		Live demo
Writing Assistant	AI writing assistant with text actions (rewrite, summarize, expand)	Next.js 16, React 19, Tailwind CSS		Live demo
Slack Q&A Bot	Slack bot that streams AI answers and keeps thread context	Chat SDK, AI SDK, Hono, Redis
Weather Agent	CLI agent that answers weather queries with live data	Node.js, TypeScript, AI SDK 7
Lead Agent	CLI agent that researches people and posts to Discord	Node.js, TypeScript, AI SDK 7
Changelog Generator	CLI agent that generates changelogs from git history	Node.js, TypeScript, AI SDK 7
Email Drafter	CLI agent that drafts polished emails from notes	Node.js, TypeScript, AI SDK 7
Sentiment Analyzer	CLI agent that analyzes text sentiment	Node.js, TypeScript, AI SDK 7
Data Extractor	CLI agent that extracts structured entities from text	Node.js, TypeScript, AI SDK 7
Research Agent	Deep web research with source checking and a cited markdown report	Node.js, TypeScript, AI SDK 7
Code Review Agent	Reviews git diffs, reports findings by severity and gates CI	Node.js, TypeScript, AI SDK 7
Model Router Agent	Routes each prompt to the cheapest capable model and prints its cost	Node.js, TypeScript, AI SDK 7
Meeting Notes Agent	Turns transcripts into decisions and owned action items	Node.js, TypeScript, AI SDK 7
SQL Agent	Answers data questions by inspecting the schema and running read-only SQLite	Node.js, TypeScript, AI SDK 7
Support Triage Agent	Prioritizes support tickets and drafts replies in the customer's language	Node.js, TypeScript, AI SDK 7

Showcase

Shipped something on a template? Add it to the Showcase — a public, filterable gallery of apps built with LLM Gateway. It's a deployable template itself, so you can host your own, and it doubles as inspiration for new builders. Submit your app via the showcase issue form.

Powered-By badge

Every app you deploy with these templates can carry a small, referral-tagged "Powered by LLM Gateway" badge — turning each deployment into an impression that helps other developers discover the gateway.

• Already using the embeddable SDK? Import it:

  import { PoweredBy } from "@llmgateway/elements";
  
  <PoweredBy campaign="my-app" />;

  <BuyCredits> also renders the attribution under the pay button by default (poweredBy={false} to opt out).

• Any other app? Copy the dependency-free component — see templates/showcase/src/components/powered-by.tsx (light) or templates/ai-chatbot/src/components/powered-by.tsx (dark) — and drop <PoweredBy /> in your footer.

Skills

Claude Code skills for working with LLM Gateway — drop a SKILL.md into .claude/skills/ and trigger it by name. See skills/ for installation details.

Skill	Trigger	Description
Changelog	changelog	Writes a new LLM Gateway changelog entry in the house style, plus a gpt-image-2 prompt for its OpenGraph image

Quick Start

The easiest way to get started is with the CLI:

# Create a new project (interactive)
npx @llmgateway/cli init

# Or specify a template directly
npx @llmgateway/cli init --template image-generation
npx @llmgateway/cli init --template weather-agent
npx @llmgateway/cli init --template model-arena

CLI

The @llmgateway/cli provides tools for scaffolding templates and managing AI projects:

npx @llmgateway/cli init              # Create a new project from a template
npx @llmgateway/cli list              # List available templates
npx @llmgateway/cli models            # Browse available AI models
npx @llmgateway/cli add tool weather  # Add tools to your project
npx @llmgateway/cli auth login        # Browser login and SSO
npx @llmgateway/cli docs              # Open documentation

Launch coding agents

Start any supported coding agent with LLM Gateway configured out of the box — one API key, 200+ models, full cost tracking:

npx @llmgateway/cli launch            # Interactive agent picker
npx @llmgateway/cli devpass-code      # DevPass Code (first-party)
npx @llmgateway/cli claude            # Claude Code
npx @llmgateway/cli opencode          # OpenCode
npx @llmgateway/cli empryo            # Empryo
npx @llmgateway/cli soulforge         # SoulForge
npx @llmgateway/cli codex             # Codex CLI
npx @llmgateway/cli launch --list     # See all supported agents

Also supported: Aider, Qwen Code, Goose, Autohand, Pi, Kimi Code, MiMo Code, OpenClaw, and Hermes Agent. Pick a model with -m (e.g. npx @llmgateway/cli launch -m gpt-6.1-sol claude); anything after the agent name is passed through to the agent itself. See the integration guides for details per agent.

Enterprise workflows

npx @llmgateway/cli auth login --sso you@example.com
npx @llmgateway/cli orgs use <org-id>
npx @llmgateway/cli skills add --all --agent codex
npx @llmgateway/cli agents add ./company-agent.json
npx @llmgateway/cli launch company-agent

Browser authentication uses your dashboard's login methods. Organization skills are installed with their supporting files, and custom agents receive credentials through environment variables. Private deployments can configure management, dashboard, and inference URLs independently. See the enterprise deployment contract for the companion API requirements.

See the CLI documentation for all available commands.

Getting Started (Manual)

Prerequisites

• Node.js 22+ (24 LTS recommended)
• pnpm 10.28.1 (via Corepack)
• LLM Gateway API Key

Installation

# Clone the repository
git clone https://github.com/theopenco/llmgateway-templates.git
cd llmgateway-templates

# Install dependencies
pnpm install

# Copy environment variables
cp templates/image-generation/.env.example templates/image-generation/.env.local
cp agents/weather-agent/.env.example agents/weather-agent/.env.local

# Add your API key to the .env.local files

Development

# Run all templates in development mode
pnpm dev

# Or run a specific template
cd templates/image-generation && pnpm dev
cd agents/weather-agent && pnpm dev

Build

# Build all templates
pnpm build
pnpm lint
pnpm test

Project Structure

llmgateway-templates/
├── packages/
│   └── llmgateway-cli/      # @llmgateway/cli package
├── templates/
│   ├── image-generation/    # Next.js image generation app
│   ├── ai-chatbot/          # Next.js streaming chatbot
│   ├── og-image-generator/  # Next.js OG image generator
│   ├── feedback-dashboard/  # Next.js sentiment dashboard
│   ├── writing-assistant/   # Next.js writing assistant
│   ├── model-arena/         # Next.js side-by-side model comparison
│   ├── ai-slides/           # Next.js AI presentation builder
│   ├── qa-agent/            # Next.js + Playwright QA agent
│   └── slack-qa-bot/        # Chat SDK Slack Q&A bot
├── agents/
│   ├── weather-agent/              # CLI weather agent
│   ├── lead-agent/                 # CLI lead research agent
│   ├── changelog-generator-agent/  # CLI changelog generator
│   ├── email-drafter-agent/        # CLI email drafter
│   ├── sentiment-analyzer-agent/   # CLI sentiment analyzer
│   ├── data-extractor-agent/       # CLI data extractor
│   ├── research-agent/             # CLI web research with citations
│   ├── code-review-agent/          # CLI diff reviewer for local use and CI
│   ├── model-router-agent/         # CLI cost-aware model router
│   ├── meeting-notes-agent/        # CLI transcript to action items
│   ├── sql-agent/                  # CLI natural-language questions over SQLite
│   └── support-triage-agent/       # CLI ticket triage and reply drafts
├── package.json             # Root workspace config
├── pnpm-workspace.yaml      # pnpm workspace config
└── turbo.json               # Turbo build config

Tech Stack

• AI SDK: AI SDK 7 with @llmgateway/ai-sdk-provider
• Package Manager: pnpm
• Monorepo: Turborepo
• Runtime: Node.js 22+

Documentation

• LLM Gateway Docs
• Vercel AI SDK Docs

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

• GitHub Issues
• LLM Gateway Discord