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

> Explore the Prompt-Optimizer monorepo architecture. Learn how its core library, Vite web app, Electron desktop, and MCP server integrate efficiently using pnpm.

- Repository: [且炼时光/prompt-optimizer](https://github.com/linshenkx/prompt-optimizer)
- Tags: architecture
- Published: 2026-02-23

---

**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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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:

```typescript
// 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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/web/src/main.ts) – Application bootstrap
- [`packages/web/vite.config.ts`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/web/package.json):

```bash

# 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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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:

```bash

# 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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/mcp-server/src/start.ts), with build configuration in [`packages/mcp-server/package.json`](https://github.com/linshenkx/prompt-optimizer/blob/main/packages/mcp-server/package.json) using `tsup` for bundling.

To run the MCP server:

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

```

Workspace coordination is managed through [`pnpm-workspace.yaml`](https://github.com/linshenkx/prompt-optimizer/blob/main/pnpm-workspace.yaml) at the repository root, which declares:

```yaml
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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`](https://github.com/linshenkx/prompt-optimizer/blob/main/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`.