jo-jo-home/ojjychat

Public

wasmer run jo-jo-home/ojjychat

ojjyChat (OpenRouter + Groq) — Beginner-friendly, production-ready

ojjyChat is a fast, blue, modern chat UI with a secure backend proxy that supports OpenRouter and Groq, with streaming responses (tokens appear live).

✅ No provider API keys in the frontend
✅ Keys live only in server env vars (.env locally, Wasmer Secrets in deploy)
✅ Streaming, Stop, Regenerate, Markdown, code-block Copy
✅ Sidebar + chat history (localStorage) + per-chat system prompt

0) What you’re building (super simple)

Frontend (client/): the pretty chat website you open in the browser
Backend (server/): the “secret keeper” that talks to OpenRouter/Groq using env vars
Your browser calls POST /api/chat → backend forwards to OpenRouter/Groq → streams tokens back.

1) Download + open the project

Download the ZIP and unzip it.
You should see a folder named ojjyChat/.
Open that folder in your code editor (VS Code recommended).

Screenshot description:

In VS Code: File → Open Folder… → select ojjyChat → Open

2) Local setup (run on your computer)

Stage A — Install Node.js

Install Node.js LTS (Node 20+).
Verify it’s installed:

node -v

What it does: prints your Node version.

Common mistakes & fixes

command not found: node → Node isn’t installed (install Node 20+).
Node is 16/18 → upgrade to Node 20+.

Stage B — Install dependencies

Open a terminal inside the ojjyChat folder.

Screenshot description:

In VS Code: Terminal → New Terminal (bottom panel opens)

Run:

npm install

What it does: downloads all required libraries for both frontend + backend.

Common mistakes & fixes

Permission errors → don’t use sudo; install Node properly.
Network errors → try again, or switch networks.

Stage C — Add your API keys safely (local dev)

In the root ojjyChat/ folder, copy .env.example to server/.env

Screenshot description:

In the file explorer: right-click .env.example → Copy
Go into server/ → right-click → Paste
Rename copied file to .env

Open server/.env and fill in:

OPENROUTER_API_KEY=your_openrouter_key_here
GROQ_API_KEY=your_groq_key_here
SITE_URL=http://localhost:8080

What it does: the backend reads these env vars at runtime.
Important: do NOT paste keys into any browser console.

Common mistakes & fixes

Keys don’t work → check for extra spaces, missing characters.
Wrong key → OpenRouter key won’t work on Groq and vice versa.
Accidentally committed keys → delete from git history + rotate keys immediately.

Stage D — Run the app

Run:

npm run dev

What it does: starts the backend and the frontend dev server (hot reload).

Now open:

Frontend UI: http://localhost:5173
Backend API: http://localhost:8080/api/health

Screenshot description:

In your browser address bar, paste http://localhost:5173 and press Enter.

Common mistakes & fixes

Port already in use → close the other app using that port.
UI loads but chat fails → check your .env and server logs.

3) How to use the app (quick)

Left sidebar → New Chat
Settings (gear) → choose:
- Provider (OpenRouter / Groq)
- Model (dropdown or type custom)
- Temperature, Max tokens
- Streaming toggle (default ON)
- System prompt (per chat)
Type message → Enter to send
While streaming:
- Stop to cancel
- Regenerate to retry last response

4) Production build (local)

Run:

npm run build
npm start

What it does: builds the frontend + backend, then runs the production server on http://localhost:8080.

5) Deploy to Wasmer (beginner “click-by-click”)

Wasmer Edge is evolving quickly. The simplest path is:

Upload/Connect repo

Set Secrets/Env Vars

Ensure the app runs on PORT (default 8080) and binds 0.0.0.0

The server in this repo already binds to 0.0.0.0 and uses PORT (fallback 8080).

Stage A — Create a Wasmer account (web UI)

Go to Wasmer website and create an account.
Verify your email.

Screenshot description:

Click Sign up (top right), choose login method, finish signup.

Common mistakes & fixes

Can’t verify email → check spam/junk folder.

Stage B — Install Wasmer CLI (on your computer)

Run:

curl -sSfL https://get.wasmer.io | sh

What it does: downloads and installs the Wasmer command-line tool.

Then restart your terminal and verify:

wasmer --version

What it does: prints your Wasmer CLI version.

Common mistakes & fixes

curl: command not found → install curl (macOS already has it).
wasmer: command not found → restart terminal, or re-run installer.

Stage C — Log in to Wasmer (CLI)

Run:

wasmer login

What it does: opens a browser login flow and connects your CLI to your Wasmer account.

Common mistakes & fixes

Browser didn’t open → copy/paste the URL shown in terminal.

Stage D — Create + deploy your app to Wasmer (CLI)

In your terminal, cd into the project folder:

cd path/to/ojjyChat

What it does: changes your terminal directory to the project folder.

Deploy:

wasmer deploy

What it does: uploads your project and creates a deployment on Wasmer.

Screenshot description (Wasmer web dashboard):

Go to Dashboard → Apps
You should see your new app and its URL like https://<name>.wasmer.app

Common mistakes & fixes

Build fails → see logs (Stage G).
App deploys but blank → check build output; confirm npm run build works locally.

Stage E — Set Secrets / Env Vars in Wasmer (web UI)

Open Wasmer dashboard → your app
Click Settings (or similar)
Find Secrets / Environment Variables
Add these keys:

OPENROUTER_API_KEY = (your OpenRouter key)
GROQ_API_KEY = (your Groq key)
SITE_URL = (your deployed Wasmer URL, optional but recommended)

What NOT to paste anywhere else

Do not paste keys into the frontend
Do not paste keys into logs
Do not paste keys into browser console

Common mistakes & fixes

Missing env var → the UI will show friendly error; add it and redeploy.
Wrong variable name → must match exactly (case-sensitive).

Stage F — Get the URL / open your site

In your app page, look for the default domain like:

https://your-app.wasmer.app

Open it in your browser.

Stage G — View logs (Wasmer)

Click-by-click:

Wasmer dashboard → your app
Click Logs
Look for errors like:
- missing env vars
- 401/429 from provider
- build errors

Stage H — Redeploy after changes

Make your code changes
Re-run locally to check:

npm run dev

Deploy again:

wasmer deploy

6) Troubleshooting on Wasmer (common fixes)

Wrong port / not binding 0.0.0.0

This repo listens on 0.0.0.0 and uses PORT (fallback 8080) in server/src/index.ts.
If you changed it, undo that.

Missing env vars

If you see “Missing OPENROUTER_API_KEY” or “Missing GROQ_API_KEY”:
- Wasmer dashboard → App → Settings → Secrets/Env → add them → redeploy.

Build fails

Check logs for the failing command.
Locally run:
- npm install
- npm run build
Fix the local error first, then redeploy.

CORS errors

In production, frontend + backend are same origin (no CORS).
In dev, Vite proxies /api to the backend (so also no CORS).
If you changed ports, update client/vite.config.ts.

401 / 429 provider errors

401: key invalid / missing.
429: rate limit exceeded (provider or your backend limiter).
The UI will show a friendly message.

Streaming not working

Ensure “Stream responses” is ON.
If a proxy buffers responses, try redeploying or check platform settings.
Some models/providers may not stream reliably.

7) Example model IDs (examples only)

Groq (examples)

llama-3.1-8b-instant
llama-3.1-70b-versatile
llama-3.2-1b-preview
llama-3.2-3b-preview

OpenRouter (examples)

openai/gpt-4o-mini
anthropic/claude-3.5-sonnet
google/gemini-1.5-pro
meta-llama/llama-3.1-70b-instruct

8) Security notes (read this)

Keys never go in the frontend.
Backend never logs secrets.
If you ever pasted a key into a chat or repo: rotate/revoke it immediately.

Project structure

ojjyChat/
  client/   # Vite + React + TS + Tailwind
  server/   # Node + Express proxy + streaming SSE
  app.yaml
  wasmer.toml
  README.md

ojjyChat - Vite+React frontend + Express backend proxy for OpenRouter & Groq

More packages

jo-jo-home/jo-jo-home-proxy

My first proxy project for class

jo-jo-home/ragdollhitbyojjy

Ragdollhit static site (Unity WebGL)