Platform Implementations

Relevant source files

• package.json
• packages/core/package.json
• packages/core/src/services/prompt/electron-proxy.ts
• packages/desktop/main.js
• packages/desktop/package.json
• packages/desktop/preload.js
• packages/extension/package.json
• packages/extension/public/manifest.json
• packages/extension/src/App.vue
• packages/mcp-server/package.json
• packages/ui/package.json
• packages/ui/src/components/DataManager.vue
• packages/ui/src/components/LanguageSwitchDropdown.vue
• packages/ui/src/components/OptimizationModeSelector.vue
• packages/ui/src/components/PromptPanel.vue
• packages/ui/src/components/UpdaterIcon.vue
• packages/ui/src/composables/mode/useProSubMode.ts
• packages/ui/src/i18n/README.md
• packages/ui/src/index.ts
• packages/ui/src/plugins/i18n.ts
• packages/ui/src/types/electron.d.ts
• packages/web/package.json
• packages/web/src/App.vue
• pnpm-lock.yaml

This document provides an overview of how the shared @prompt-optimizer/core and @prompt-optimizer/ui libraries are packaged and deployed across different platforms. It covers the build system, platform-specific packages, and architectural differences between web, browser extension, desktop, and MCP server implementations.

For details about development workflow and build commands, see Development Workflow and Build System. For deployment configuration specifics, see Deployment and Configuration.

Overview

The Prompt Optimizer codebase supports four distinct platform implementations from a single monorepo:

Platform	Package	Primary Use Case	Deployment Target
Web Application	@prompt-optimizer/web	Browser-based usage, Vercel/static hosting	Static files
Browser Extension	@prompt-optimizer/extension	Chrome/Edge extension with popup interface	Chrome Web Store
Desktop Application	@prompt-optimizer/desktop	Native app without CORS limitations	Electron installers (.exe, .dmg, .AppImage)
MCP Server	@prompt-optimizer/mcp-server	Programmatic API access via Model Context Protocol	Docker container, Node.js runtime

All platforms share the same core business logic (@prompt-optimizer/core) and UI components (@prompt-optimizer/ui), ensuring feature parity and reducing maintenance overhead.

Sources: README.md73-156 package.json1-107

Build System Architecture

The build system enforces a strict dependency order defined in package.json12-19:

1. Core library build: pnpm build:core compiles TypeScript to CommonJS and ESM formats using tsup
2. UI library build: pnpm build:ui bundles Vue components and styles using Vite
3. Platform builds: pnpm build:parallel builds web and extension in parallel
4. Desktop special build: pnpm build:desktop first builds web, then copies web/dist to desktop/web-dist, finally packages with electron-builder

Sources: package.json12-26 packages/core/package.json16-17 packages/ui/package.json24-27

Platform Package Dependencies

Dependency patterns:

• Web: Depends on both @prompt-optimizer/ui (for components) and implicitly on @prompt-optimizer/core (via UI's dependency). Uses Dexie for IndexedDB storage. packages/web/package.json15-18

• Extension: Depends only on @prompt-optimizer/ui. Nearly identical to web but adds Chrome extension manifest.json with service_worker background script. packages/extension/package.json13-17 packages/extension/public/manifest.json1-34

• Desktop: Direct dependency on @prompt-optimizer/core only for main process services. Bundles the compiled web application for the renderer process. Uses electron-log, electron-updater, and FileStorage for persistence. packages/desktop/package.json24-30

• MCP Server: Depends only on @prompt-optimizer/core for LLM and prompt services. Adds @modelcontextprotocol/sdk and express for HTTP transport. No UI dependencies. packages/mcp-server/package.json28-34

Sources: packages/web/package.json1-36 packages/extension/package.json1-37 packages/desktop/package.json1-99 packages/mcp-server/package.json1-53

Platform-Specific Adaptations

Web Application (packages/web)

The web package is a minimal wrapper that instantiates PromptOptimizerApp from @prompt-optimizer/ui:

• Entry point: src/main.ts creates the Vue app and mounts it
• Storage: Uses Dexie (IndexedDB) via PreferenceService from core
• Routing: Inherits Vue Router configuration from UI package
• Build output: Static files deployable to any web server

Configuration is injected via Vite environment variables with VITE_ prefix (e.g., VITE_OPENAI_API_KEY).

Key limitation: Subject to browser CORS restrictions when calling AI APIs directly.

Sources: packages/web/package.json1-36 README.md73-80

Browser Extension (packages/extension)

Chrome extension implementation with popup interface:

• Manifest V3: packages/extension/public/manifest.json1-34 defines extension metadata, permissions, and background service worker
• Background script: service_worker handles extension lifecycle packages/extension/public/manifest.json20-23
• No permissions required: The extension requests zero permissions for maximum privacy packages/extension/public/manifest.json24
• Internationalization: Uses Chrome's __MSG_extName__ syntax for i18n in manifest packages/extension/public/manifest.json4-6
• Content Security Policy: Restricts script execution to 'self' packages/extension/public/manifest.json27-29

The extension is functionally identical to the web app but packaged for distribution via Chrome Web Store.

Sources: packages/extension/public/manifest.json1-34 packages/extension/package.json1-37 README.md107-110

Desktop Application (packages/desktop)

Electron-based native application with the most complex build process:

Build configuration in packages/desktop/package.json32-91:

• Dual package output: Both installer (.exe, .dmg, .AppImage) and archive (.zip) formats
• Multi-architecture: macOS supports both x64 and arm64 packages/desktop/package.json62-74
• Auto-update: Configured with GitHub releases provider packages/desktop/package.json45-50
• NSIS installer: Allows user to choose installation directory packages/desktop/package.json87-90

Key advantages:

• No CORS restrictions (native app, not browser context)
• File system access for persistent storage in user data directory
• Automatic updates via electron-updater
• Can connect to local models (Ollama) without security restrictions

Sources: packages/desktop/package.json1-99 packages/desktop/package.json11-16 README.md96-106

MCP Server (packages/mcp-server)

Headless Node.js server implementing Model Context Protocol for programmatic access:

• Protocol implementation: Uses @modelcontextprotocol/sdk for MCP server creation
• Transport: HTTP via Express, mounted at /mcp path in Docker deployments docker-compose.yml11-13
• Entry point: dist/start.cjs initializes HTTP transport with configurable port packages/mcp-server/package.json9
• Tools exposed: Three MCP tools for prompt optimization (detailed in page 4.4)
  • optimize-user-prompt
  • optimize-system-prompt
  • iterate-prompt

Configuration via environment variables with MCP_ prefix:

• MCP_DEFAULT_MODEL_PROVIDER: Sets default LLM provider (openai, gemini, deepseek, etc.)
• MCP_LOG_LEVEL: Controls logging verbosity
• MCP_DEFAULT_LANGUAGE: Sets i18n locale for templates docker-compose.yml33-35

Sources: packages/mcp-server/package.json1-53 docker-compose.yml31-35 README.md182-246

Deployment Configurations

Vercel (Web)

Static hosting with environment variable injection:

• Build command: Custom command handles monorepo context vercel.json2
• Output directory: packages/web/dist vercel.json3
• SPA routing: All routes rewrite to /index.html vercel.json10-13
• Environment markers: Sets VITE_VERCEL_DEPLOYMENT=true vercel.json24-31

Sources: vercel.json1-32 README.md82-95

Docker (Web + MCP)

Multi-service container combining web UI and MCP server:

• Base image: nginx for serving static files + Node.js for MCP server
• Port mapping: Single external port (8081) serves both web UI (:80/) and MCP (:80/mcp) docker-compose.yml11
• Health checks: Validates both web and MCP endpoints docker-compose.yml12-17
• Basic authentication: Optional password protection via generate-auth.sh script docker/generate-auth.sh1-46
• Environment propagation: Injects VITE_* and MCP_* variables docker-compose.yml23-35

Sources: docker-compose.yml1-44 docker/generate-auth.sh1-46 README.md112-156

Desktop Distribution

Electron app packaged for native installation:

• Windows: .exe installer (NSIS) + .zip portable packages/desktop/package.json52-57
• macOS: .dmg installer + .zip archive, both architectures packages/desktop/package.json59-77
• Linux: .AppImage + .zip packages/desktop/package.json79-86
• Update mechanism: GitHub Releases as update server packages/desktop/package.json45-50

Sources: packages/desktop/package.json32-91 README.md96-106

Cross-Platform Considerations

Storage Abstraction

Different platforms use different storage backends:

Platform	Storage Implementation	Location
Web/Extension	Dexie (IndexedDB)	Browser storage
Desktop	FileStorage (JSON files)	app.getPath('userData')
MCP Server	In-memory (stateless)	N/A

The PreferenceService from @prompt-optimizer/core provides a unified interface, abstracting the underlying storage mechanism.

CORS and API Access

Platform	CORS Restrictions	Local Model Support
Web	Yes (browser policy)	Limited (mixed content blocks HTTPS→HTTP)
Extension	Partial (some APIs blocked)	Limited
Desktop	No (native app)	Full support
MCP Server	No (server-side)	Full support

This is the primary reason desktop is recommended for users running local models like Ollama.

Sources: README.md354-409

Configuration Injection

All platforms support runtime configuration via environment variables:

• Web/Extension: Vite injects VITE_* variables at build time
• Desktop: Electron main process reads environment and bridges to renderer
• MCP: Node.js directly reads process.env

The desktop app additionally supports .env file loading via dotenv package for local development.

Sources: packages/desktop/package.json26 README.md248-290

Platform-Specific Pages

For detailed implementation information about each platform:

• Web Application - Vite configuration, main.ts entry point, deployment options
• Browser Extension - Manifest V3 setup, Chrome APIs, Web Store publishing
• Desktop Application (Electron) - IPC architecture, FileStorage, auto-updater, native menus
• MCP Server Integration - MCP tools, Express HTTP server, Claude Desktop integration

Sources: package.json1-107 README.md1-472