Prompt-Optimizer Monorepo Architecture: Core, Web, Desktop, and MCP Server Explained

The prompt-optimizer repository is a pnpm-managed monorepo that centralizes business logic in a TypeScript core library (@prompt-optimizer/core) and distributes it across a Vite web app, Electron desktop wrapper, browser extension, and Express MCP server.

The linshenkx/prompt-optimizer project is an open-source prompt optimization tool built as a scalable pnpm monorepo. Understanding the prompt-optimizer monorepo architecture reveals how the codebase separates concerns between a shared core library and multiple runtime targets including web, desktop, and server environments.

High-Level Monorepo Structure

The repository root uses pnpm-workspace.yaml to declare all packages under the packages/ directory. This configuration enables symlink-based workspace dependencies and consistent versioning across the project.

prompt-optimizer/
├─ packages/
│   ├─ core/          # Pure TypeScript business logic

│   ├─ ui/            # Vue 3 component library

│   ├─ web/           # Vite SPA for browsers

│   ├─ extension/     # Browser extension build

│   ├─ desktop/       # Electron wrapper

│   └─ mcp-server/    # Express MCP API server

├─ pnpm-workspace.yaml
└─ scripts/           # Build and version sync helpers

All packages reference each other using workspace protocol dependencies (e.g., "@prompt-optimizer/core": "workspace:*"), allowing them to resolve to each other via pnpm symlinks rather than registry downloads.

Core Package Architecture

The @prompt-optimizer/core package serves as the single source of truth for all business logic. Located in packages/core/src/index.ts, it exports service factories and managers that handle LLM adapters, prompt optimization, image models, and user preferences.

Key services exported from the core include:

• ModelManager and createModelManager – Handles LLM provider configuration and model routing
• PromptService – Executes prompt optimization strategies
• ImageModelManager and createImageModelManager – Manages image generation model adapters
• PreferenceService and createPreferenceService – Persists user settings and application state

The core library is framework-agnostic, allowing it to run in Node.js, Electron main processes, and serverless environments without modification. You can import these services directly:

// example.ts
import { createModelManager, createPromptService } from '@prompt-optimizer/core';

async function run() {
  const modelMgr = await createModelManager();
  await modelMgr.ensureInitialized();

  const promptSvc = createPromptService(modelMgr);
  const result = await promptSvc.optimizePrompt({
    systemPrompt: 'You are an AI assistant.',
    userPrompt: 'Help me write a concise product description.',
    modelKey: 'openai:gpt-4o',
  });

  console.log(result);
}
run();

UI Layer and Web Application

The @prompt-optimizer/ui package provides a Vue 3 component library built with Naive UI, CodeMirror, and markdown-it. It consumes core services directly via import { PromptService } from '@prompt-optimizer/core'.

The entry point at packages/ui/src/index.ts exports reusable components that power both the web and desktop interfaces.

The @prompt-optimizer/web package is a Vite-powered SPA that instantiates core services on the client side. Key files include:

• packages/web/src/main.ts – Application bootstrap
• packages/web/vite.config.ts – Build configuration with workspace aliasing

Development starts with pnpm dev, which executes vite --force as defined in packages/web/package.json:

# from the repository root

pnpm dev

Desktop and Extension Packages

The @prompt-optimizer/desktop package wraps the web application in an Electron shell. Unlike typical Electron apps that load remote URLs, this architecture builds the web assets first (pnpm run build:web) and serves them locally from web-dist/.

The main process initialization in packages/desktop/main.js demonstrates the architecture's service-oriented design:

1. Loads environment variables
2. Initializes all core services in the main process
3. Creates IPC bridges to expose APIs to the renderer
4. Loads the built web assets into a BrowserWindow

To launch the desktop application in development mode:

# Build the web assets first

pnpm run build:web

# Then start Electron with hot-reload

pnpm dev

The @prompt-optimizer/extension package produces a browser extension using the same Vite tooling and UI components. Its entry point at packages/extension/src/main.ts reuses the component library while adapting to the extension runtime constraints.

MCP Server and Workspace Coordination

The @prompt-optimizer/mcp-server package implements an Express server that exposes the Model-Context-Protocol (MCP) API. It imports the core library to share model, prompt, and image services with the rest of the monorepo.

The server bootstrap occurs in packages/mcp-server/src/start.ts, with build configuration in packages/mcp-server/package.json using tsup for bundling.

To run the MCP server:

pnpm -F @prompt-optimizer/mcp-server dev

Workspace coordination is managed through pnpm-workspace.yaml at the repository root, which declares:

packages:
  - "packages/*"

This configuration enables pnpm to hoist shared dependencies, enforce consistent versioning, and resolve workspace packages via symlinks rather than registry downloads.

Summary

• The prompt-optimizer monorepo uses pnpm workspaces to manage seven interconnected packages under the packages/ directory
• @prompt-optimizer/core provides framework-agnostic business logic and service factories exported from packages/core/src/index.ts
• @prompt-optimizer/ui delivers Vue 3 components that consume core services directly
• @prompt-optimizer/web is a Vite SPA that runs core services in the browser, configured in packages/web/vite.config.ts
• @prompt-optimizer/desktop wraps the web build in Electron, initializing core services in the main process at packages/desktop/main.js
• @prompt-optimizer/extension and @prompt-optimizer/mcp-server extend the architecture to browser extensions and MCP API endpoints respectively
• All packages resolve dependencies via pnpm workspace symlinks defined in pnpm-workspace.yaml

Frequently Asked Questions

What is the relationship between the core package and the web/desktop apps?

The core package contains all business logic, LLM adapters, and service factories. Both the web and desktop applications import these services via import { PromptService } from '@prompt-optimizer/core'. The web app runs services in the browser context, while the desktop app initializes them in Electron's main process and exposes them to the renderer via IPC bridges defined in packages/desktop/main.js.

How does the desktop application serve the web interface?

The desktop package builds the web assets using pnpm run build:web and serves them locally from the web-dist/ directory. The Electron main process loads these static files into a BrowserWindow rather than fetching a remote URL, ensuring offline functionality and version consistency between the shell and UI components.

Can I use the prompt optimization logic outside of the web or desktop apps?

Yes. The core library is framework-agnostic and can run in any Node.js environment. You can import createPromptService or createModelManager from @prompt-optimizer/core in serverless functions, CLI tools, or custom applications. The MCP server package demonstrates this by exposing the same services via an Express HTTP API in packages/mcp-server/src/start.ts.

How are dependencies shared across the monorepo?

All packages reference each other using workspace protocol dependencies (e.g., "@prompt-optimizer/core": "workspace:*"). The pnpm-workspace.yaml file at the repository root defines the workspace glob pattern (packages/*), enabling pnpm to create symlinks between packages and hoist shared dependencies like Vue, TypeScript, and Vite to the root node_modules.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}