Skip to main content

​
✅ Prerequisites

  • Node.js 18+ (Vite 5 requires Node 18 or newer)
  • npm (or pnpm/yarn)
  • Accounts/keys for: OpenRouter and/or Groq (for chat), Firebase (Auth + Realtime Database), optionally Gumroad (license verification)

​
🚀 Quick Start

  1. Install dependencies
npm install
  1. Create .env in the project root or Generate it via https://anyllm.xyz/env
Required at runtime (the app will not start without these): 
# Provider keys and endpoints
VITE_OPENROUTER_API_URL=https://openrouter.ai/api/v1/chat/completions
VITE_GROQ_API_URL=https://api.groq.com/openai/v1/chat/completions
VITE_GROQ_TRANSCRIBE_URL=https://api.groq.com/openai/v1/audio/transcriptions
VITE_OPENROUTER_API_KEY=your_openrouter_key
VITE_GROQ_API_KEY=your_groq_key

# Firebase (client-side)
VITE_FIREBASE_API_KEY=your_firebase_api_key
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=000000000000
VITE_FIREBASE_APP_ID=1:000000000000:web:abcd1234abcd1234
VITE_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
Optional (branding, links, pricing, assets): 
VITE_SITE_NAME=AnyLLM
VITE_SITE_URL=https://example.com
VITE_SITE_DESCRIPTION=Your site description
VITE_SITE_KEYWORDS=keyword1, keyword2
VITE_OG_IMAGE_URL=/icons/og-image.png

VITE_DOCS_URL=https://docs.example.com
VITE_APP_URL=https://app.example.com
VITE_UPGRADE_URL=https://pay.example.com
VITE_GITHUB_URL=https://github.com/you/yourrepo
VITE_TWITTER_URL=https://x.com/yourhandle
VITE_COMPANY_ABOUT_URL=https://example.com/about
[email protected]

VITE_PRICE_MONTHLY=5.99
VITE_GUMROAD_PRODUCT_ID=your_gumroad_product_id

VITE_LOADER_LOGO_URL=
  1. Start the dev server
npm run dev
If required variables are missing, the app shows a full-screen hint listing what to add.

​
🔌 Provider Setup

​
OpenRouter (Chat API)

  • Create an account and generate an API key.
  • Set VITE_OPENROUTER_API_KEY and VITE_OPENROUTER_API_URL.

​
Groq (Chat + Transcription)

  • Create an account and generate an API key.
  • Set VITE_GROQ_API_KEY, VITE_GROQ_API_URL, and VITE_GROQ_TRANSCRIBE_URL.

​
Firebase (Auth + Realtime Database)

  1. Create a Firebase project.
  2. In Build → Authentication → Sign-in method, enable Google.
  3. In Build → Realtime Database, create a database (choose location, start rules as needed for your app). You can import database.rules.json or configure rules in console.
  4. Go to Project settings → Your apps (Web) and copy config values into the VITE_FIREBASE_* variables.

​
Gumroad (License Verification, optional)

  • Create a product and enable license keys.
  • Find the product identifier (see Gumroad docs) and set VITE_GUMROAD_PRODUCT_ID.
  • Set VITE_UPGRADE_URL to your Gumroad checkout/overlay link if you use the in-app upgrade button.

​
⚙️ Configuration Reference

Central config lives in src/config.ts (reads from import.meta.env).
  • Branding & SEO: VITE_SITE_NAME, VITE_SITE_URL, VITE_SITE_DESCRIPTION, VITE_SITE_KEYWORDS, VITE_OG_IMAGE_URL
  • External Links: VITE_DOCS_URL, VITE_APP_URL, VITE_UPGRADE_URL, VITE_GITHUB_URL, VITE_TWITTER_URL, VITE_COMPANY_ABOUT_URL, VITE_CONTACT_EMAIL
  • Pricing / Gumroad: VITE_PRICE_MONTHLY, VITE_GUMROAD_PRODUCT_ID
  • APIs: VITE_OPENROUTER_API_URL, VITE_GROQ_API_URL, VITE_GROQ_TRANSCRIBE_URL, VITE_OPENROUTER_API_KEY, VITE_GROQ_API_KEY
  • Firebase: VITE_FIREBASE_*
Static files to review:
  • public/manifest.json → PWA name/short_name/description/icons
  • public/robots.txt and public/sitemap.xml
  • index.html → neutral meta; per-page SEO is set via src/components/SEO.tsx

​
🧰 Development

  • Dev server: npm run dev
  • Lint: npm run lint
  • Build: npm run build (outputs to dist/)
  • Preview: npm run preview

​
☁️ Deploy (Vercel)

  1. Add the repo on Vercel.
  2. Set all VITE_* variables in Project → Settings → Environment Variables.
  3. Build command: vite build (default via npm run build).
  4. Output directory: dist/.
  5. vercel.json in this repo routes SPA paths to index.html.

​
🎨 Customize

  • Replace logos in src/assets/ and PWA icons in public/icons/.
  • Update public/manifest.json name/short_name.
  • Edit copy in src/components/Hero.tsx, PricingSection.tsx, etc.
  • Adjust landing model sections in src/data/models.ts.

​
🧯 Troubleshooting

  • Missing env screen: ensure all keys listed in the hint are present in .env.
  • 401/403 from providers: verify the correct API key and endpoint URL; check billing.
  • Firebase permission errors: review Realtime Database rules and authentication state.
  • Google sign-in blocked: set your authorized domain in Firebase Auth settings.

​
🔒 Security Notes

  • Do not commit your real .env.
  • Vite VITE_* envs are exposed to the client. If you must protect provider keys, proxy requests through your own backend.