freshcrate
Skin:/
Home > AI Agents > mangostudio

mangostudio

AI-powered image generation and chat studio

Why this rank:Recent releaseHealthy release cadenceStrong adoption

Description

AI-powered image generation and chat studio

README

GHBanner

MangoStudio

AI-powered image generation and chat studio supporting Gemini, OpenAI-compatible, and Anthropic models.

๐Ÿ‡ง๐Ÿ‡ท Leia em Portuguรชs

Prerequisites

  • Bun (v1.3.11+)
  • One or more API keys for supported providers (Gemini, OpenAI-compatible, Anthropic)

Installation

  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)

Connector Configuration (Secrets)

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

Supported Persistence Methods

  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.

How to Configure

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.

Terminal Sync

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.

Project Structure

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

Main Scripts

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

Local Validation

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 vs origin/main.
  • bun run check --quick โ€” lint + format only, skip typecheck.
  • bun run fix --staged โ€” auto-fix only the affected workspaces.

Architecture

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

Design System

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

Internationalization (i18n)

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.

Standalone Build Notes

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.

License

This project is licensed under the MIT License.

Release History

VersionChangesUrgencyDate
main@2026-06-03Latest activity on main branchHigh6/3/2026
0.0.0No release found โ€” using repo HEADHigh4/9/2026

Dependencies & License Audit

Loading dependencies...

Similar Packages

vibe-replayTurn AI coding sessions into animated, interactive web replaysv0.2.3
learn-claude-codeBuild a minimal Claude-style AI agent from scratch that processes messages, interacts with tools, and generates dynamic responses.main@2026-06-04
claw-marketEnable autonomous agents to create, trade, and scale digital products and services across decentralized marketplaces efficiently.main@2026-06-02
uix-ai-agent๐Ÿค– Generate UI & UX flows for web and mobile apps using natural language prompts with UIX AI Agent, your intelligent design assistant.main@2026-06-07
ai-notes-apiNo descriptionmaster@2026-06-06

More in AI Agents

@blockrun/franklinFranklin โ€” The AI agent with a wallet. Spends USDC autonomously to get real work done. Pay per action, no subscriptions.
hermes-agentThe agent that grows with you
awesome-copilotCommunity-contributed instructions, agents, skills, and configurations to help you make the most of GitHub Copilot.
e2bE2B SDK that give agents cloud environments