AI-powered image generation and chat studio supporting Gemini, OpenAI-compatible, and Anthropic models.
๐ง๐ท Leia em Portuguรชs
- Bun (v1.3.11+)
- One or more API keys for supported providers (Gemini, OpenAI-compatible, Anthropic)
-
Clone the repository:
git clone <repo-url> cd mangostudio
-
Install dependencies:
bun install
-
Start the development servers:
bun run dev
This starts:
- API at
http://localhost:3001(Elysia + Kysely/SQLite) - Frontend at
http://localhost:5173(Vite + React)
- API at
MangoStudio has a flexible multi-connector system for managing multiple API keys with different persistence levels.
- OS Secret Store โ Native secure storage via
Bun.secrets. Recommended for maximum security. - config.toml โ Stores keys in
~/.mango/config.toml. Ideal for sharing keys across instances or CLI tools. - .env file โ Adds variables to the
.mango/.envfile.
Go to the Settings page in the MangoStudio interface to add and manage connectors.
For each connector, you can enable or disable specific models (e.g., Gemini 2.5 Flash, Gemini 2.0 Flash Image). MangoStudio automatically selects the correct connector based on the active model in the chat.
You can manually add keys to ~/.mango/config.toml:
[gemini_api_keys]
personal = "your-key-here"
work = "another-key-here"MangoStudio will sync these keys automatically the next time the Settings page is loaded or a generation is requested.
mangostudio/
โโโ .mango/ # Example configuration
โ โโโ config.toml.example
โโโ apps/
โ โโโ api/
โ โ โโโ src/
โ โ โโโ routes/ # Elysia endpoints (chats, messages, settings, authโฆ)
โ โ โโโ services/ # Business logic (gemini, secret-store)
โ โ โโโ plugins/ # Reusable middlewares (auth, rate-limit)
โ โ โโโ db/ # Kysely + SQLite + migrations
โ โโโ frontend/
โ โ โโโ src/
โ โ โโโ components/
โ โ โ โโโ ui/ # Design system (Button, Input, Card, Spinner, Toast)
โ โ โโโ features/ # Feature modules (chat, galleryโฆ)
โ โ โโโ hooks/ # React hooks (use-i18n, use-app-stateโฆ)
โ โ โโโ routes/ # TanStack Router pages
โ โโโ shared/
โ โโโ src/
โ โโโ contracts/ # Request/response DTOs
โ โโโ types/ # Domain types
โ โโโ i18n/ # pt-BR / en dictionaries + useI18n hook
โ โโโ test-utils/ # Shared mock factories
โโโ docs/
โ โโโ pt-br/
โ โ โโโ README.md # Portuguese documentation
โ โโโ TESTING.md # Testing strategy and guide
โโโ package.json # Bun workspace root
โโโ tsconfig.json # Base TypeScript configuration
| Command | Description |
|---|---|
bun install |
Install all workspace dependencies |
bun run dev |
Start all dev servers concurrently |
bun run dev --api |
Start only the API dev server |
bun run build |
Build the frontend for production |
bun run build --binary |
Generate standalone binaries with embedded frontend |
bun run check |
Run ESLint, Prettier check, and typecheck |
bun run test |
Run unit and integration lanes |
bun run test --unit |
Run unit suites only |
bun run test --e2e |
Run the Playwright end-to-end suite (opt-in) |
bun run test --coverage |
Run coverage collection across applicable workspaces |
bun run fix |
Apply ESLint --fix, then Prettier --write |
bun run verify |
Full CI gate: check, test, build (stops on failure) |
bun run clean |
Remove dist, coverage, and build artifacts |
A lefthook pre-commit hook runs ESLint + Prettier on staged files automatically and typechecks only the affected workspaces.
bun run checkโ full check (lint, format, typecheck, circular deps).bun run check --stagedโ only the workspaces touched by staged files (used by the pre-commit hook).bun run check --changedโ only the workspaces changed vsorigin/main.bun run check --quickโ lint + format only, skip typecheck.bun run fix --stagedโ auto-fix only the affected workspaces.
| Layer | Technologies |
|---|---|
| Frontend | React 19, Vite 8, Tailwind CSS v4, TanStack Router/Query |
| API | Elysia, Better Auth, native rate limiting |
| Database | SQLite via Kysely (type-safe query builder) |
| AI | Multi-provider (Gemini, OpenAI-compatible, Anthropic) |
| Runtime | Bun โ no Node.js dependency |
| i18n | Pure TypeScript dictionary in @mangostudio/shared/i18n |
The frontend ships with a built-in design system under apps/frontend/src/components/ui/:
Buttonโ variantsprimary,secondary,ghost;loadingpropInputโ label, error message, spread ofInputHTMLAttributesCardโ variantsglass(glassmorphism) andsolidSpinnerโ loading indicator with sizessm,md,lgToastโ non-blocking notifications viauseToast()hook
UI strings are centralized in @mangostudio/shared/i18n. Supports pt-BR (default) and en, with automatic detection via navigator.language.
import { useI18n } from '@/hooks/use-i18n';
function MyComponent() {
const { t } = useI18n();
return <h1>{t.auth.loginTitle}</h1>;
}The Messages type is inferred directly from the pt-BR.ts dictionary (as const). Adding a key without translating it in en.ts is a compile-time error.
The bun run build --binary command compiles the API into platform-specific binaries under .mango/out/<platform>/.
- The database is persisted at
~/.mangostudio/database.sqliteby default. - Frontend assets are served from the
public/directory next to the executable.
This project is licensed under the MIT License.

