Besidka：自带 API Key 的 AI 聊天应用，按用量付费

Besidka — AI Chat

Bring Your API Keys and Pay for What You Use.

My detailed post in Twitter about the process of development:
https://x.com/besidka_ai/status/1946685763183133001

Project

Project board is available here.

How to try?

You are welcome to visit the production site besidka.com.
Please choose any option of authentication such as Google sign in, GitHub sign in or more common way of the Email + Password flow.
When you are authorized, please put your API keys there: besidka.com/profile/keys.
You are welcome to start a new chat: https://besidka.com/chats/new

Tech stack

Nuxt (Vue + Nitro + Cloudflare workers)
Nuxt Content (landing page CMS, isolated D1)
Nuxt Studio (visual content editor)
Drizzle ORM
Better Auth
Cloudflare Email Sending
Daisy UI
Vercel AI SDK
Evlog (observability and logging)
Mediabunny (high-performance streaming video from a Cloudflare R2 bucket)
Plyr (video player)

Features

PINK — Dark and light themes, both unapologetically pink
BYOK — Bring Your Own API Key — Use your API keys from any supported LLM provider (Anthropic, Google, OpenAI, xAI, DeepSeek, Moonshot AI, Qwen), route through gateways (Vercel, Cloudflare, OpenRouter), and search with Brave or Exa. Only pay for what you use. No subscriptions, no markup
Multiple AI Models — Switch between the latest models from all providers in one place
Web Search — Ground AI answers with real-time web context; use native provider search, Brave, or Exa
Reasoning Mode — Step-by-step thinking for complex questions
AI Image Generation — Generate one image per request with supported OpenAI and Google models, then preview or download it from your private Generated by AI file library; generated images count toward your storage quota
Deep Research — Dedicated research-agent models browse the web and write cited reports; runs asynchronously with a push notification when it's ready, billed per-task on your own API key
File Attachments & File Manager — Send images and PDFs, reuse files across chats
Chat Branching — Fork a conversation mid-thread to explore a different direction
Shareable Chats — Share a chat via a public, unguessable link that anyone can view without an account and branch into their own chats; control link expiry, search-engine indexing, and what's visible per share
Projects — Organize chats with shared instructions and memory
Resumable Streams — Refresh the page and pick up right where you left off
Chat History — Search, pin and rename past conversations
Syntax Highlighting — Clean, readable code blocks out of the box
No Install Required — Works in any browser, sign in and go
Better Auth — Email/password, Google or GitHub sign-in

OAuth troubleshooting

Social OAuth in in-app browsers

Symptom: Google or GitHub social sign-in is unavailable, or Google shows 403: disallowed_useragent.
Cause: The app is opened in an embedded/in-app browser (for example Threads, Instagram, Facebook, TikTok), and OAuth providers may block these user agents.
Resolution: Open the same page in your system browser (Chrome/Safari/Firefox) and try again with social sign-in.
Config sanity check: Ensure your Google OAuth app has this redirect URI: https://<your-domain>/api/auth/callback/google

Local installation

Pay your attention that the project is designed to run on Cloudflare Workers. It requires additional steps to run it via Cloudflare Workers preview or deploy to the production environment.

The steps below are for local development only for the quick start and check.

Prerequisites

PNPM

Steps

Clone the repository.

git clone git@github.com:besidka/besidka.git

Go to the project directory. Install the dependencies.

cd besidka
pnpm install

Copy ENV related files.

cp .dev.vars.example .dev.vars

Generate environment types for the project.

pnpm run cf-typegen

Prepare drizzle migrations.

# Expected output is .drizzle/migrations/*.sql
pnpm run db:generate

Apply the migrations to the D1 database.

# Expected output is .wrangler/state/v3/d1/*.sqlite
pnpx wrangler d1 migrations apply DB

Prepare and apply the cookie-consent database migrations. This is a separate D1 database (CONSENT_DB) used to store consent receipts. See docs/cookie-consent.md for details.

# Expected output is .drizzle/migrations-consent/*.sql
pnpm run db:consents:generate
pnpm run db:consents:migrate

Start the development server.

pnpm run dev

or to start Cloudflare Workers preview server

pnpm run preview

Open http://localhost:3000 in your browser.
Sign up http://localhost:3000/signup. Please use the Email + Password flow because you don't have prepared API keys for Google and GitHub OAuth yet. In development mode you don't need to wait for email confirmation. You have to be automatically redirected to the home page as a customer already.
Put your own API keys here: http://localhost:3000/profile/keys
You are welcome to start a new chat: http://localhost:3000/chats/new

Content (Nuxt Content + Studio)

The landing page is powered by Nuxt Content v3 with a dedicated Cloudflare D1 database (CONTENT_DB) that is fully isolated from the main application database (DB). Nuxt Studio provides an optional in-app visual editor that commits changes directly to the GitHub repository.

Creating the D1 databases

Run these commands once after cloning. They print a database_id UUID — copy it into the matching "TO_BE_CREATED" placeholder in wrangler.jsonc.

# Preview environment (default env in wrangler.jsonc)
pnpm exec wrangler d1 create besidka-content

# Production environment
pnpm exec wrangler d1 create besidka-content --env production

Replace both "TO_BE_CREATED" values in wrangler.jsonc under the CONTENT_DB binding with the returned UUIDs.

Nuxt Content manages its own schema inside CONTENT_DB at runtime — no Drizzle migrations are needed for this database.

Studio OAuth setup

Studio is optional. The landing page renders and all content is editable via Git without it. Studio adds a /_studio route to the deployed site so editors can make changes through a browser UI.

Go to GitHub → Settings → Developer settings → OAuth Apps → New OAuth App.
Set Homepage URL to https://besidka.com (the canonical apex host — a Cloudflare redirect sends www.besidka.com to besidka.com).
Set Authorization callback URL to https://besidka.com/_studio (production) or http://localhost:3000/_studio (development).
Copy the Client ID and generate a Client Secret.

Add them to .dev.vars for local development:

STUDIO_GITHUB_CLIENT_ID=<your_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_client_secret>

Add them as Wrangler secrets for the deployed Worker:

pnpm exec wrangler secret put STUDIO_GITHUB_CLIENT_ID
pnpm exec wrangler secret put STUDIO_GITHUB_CLIENT_SECRET
# For production:
pnpm exec wrangler secret put STUDIO_GITHUB_CLIENT_ID --env production
pnpm exec wrangler secret put STUDIO_GITHUB_CLIENT_SECRET --env production

Landing page without Studio

The landing page works without Studio configured. Content lives in content/landing/ as Markdown files and is committed to the repository like any other source file. Studio is purely an authoring convenience — it does not affect how the landing page is built or served.

Security

Snyk code checking repository

Snyk is a tool for finding and fixing vulnerabilities in your code.

# Total issues: 0
snyk code test

Preview

Light theme

Dark theme