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)

1. Clone the repository:

   git clone <repo-url>
   cd mangostudio

2. Install dependencies:

   bun install

3. Start the development servers:

   bun run dev

   This starts:

   • API at http://localhost:3001 (Elysia + Kysely/SQLite)
   • Frontend at http://localhost:5173 (Vite + React)

MangoStudio has a flexible multi-connector system for managing multiple API keys with different persistence levels.

1. OS Secret Store — Native secure storage via Bun.secrets. Recommended for maximum security.
2. config.toml — Stores keys in ~/.mango/config.toml. Ideal for sharing keys across instances or CLI tools.
3. .env file — Adds variables to the .mango/.env file.

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

The frontend ships with a built-in design system under apps/frontend/src/components/ui/:

• Button — variants primary, secondary, ghost; loading prop
• Input — label, error message, spread of InputHTMLAttributes
• Card — variants glass (glassmorphism) and solid
• Spinner — loading indicator with sizes sm, md, lg
• Toast — non-blocking notifications via useToast() 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.sqlite by default.
• Frontend assets are served from the public/ directory next to the executable.

This project is licensed under the MIT License.