ohmyposh-configurator

# Oh My Posh Visual Configurator ✨

<div align="center">

![Oh My Posh Configurator](https://img.shields.io/badge/Oh%20My%20Posh-Visual%20Configurator-e94560?style=for-the-badge)
[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](LICENSE)
[![Live Demo](https://img.shields.io/badge/demo-live-success?style=for-the-badge)](https://configurator.ohmyposh.dev/)

**Design beautiful terminal prompts without touching configuration files**

[🚀 Launch App](https://configurator.ohmyposh.dev/) • [📖 Documentation](https://ohmyposh.dev/docs/) • [💬 Discussions](https://github.com/jamesmontemagno/ohmyposh-configurator/discussions)

![Oh My Posh Visual Configurator](blogs/images/main-interface.png)

</div>

---

## 🎯 What is Oh My Posh Configurator?

The **Oh My Posh Visual Configurator** is a modern, intuitive web application that lets you design and customize your terminal prompt visually. No more manual JSON editing or trial-and-error configuration—just drag, drop, customize, and export!

Perfect for developers, DevOps engineers, and anyone who wants a beautiful, informative terminal prompt for PowerShell, Bash, Zsh, Fish, or any shell supported by [Oh My Posh](https://ohmyposh.dev/).

## ✨ Features

- 🎨 **103+ Segments**: Browse comprehensive segment library organized in 8 categories with detailed properties and options
- 🖱️ **Drag & Drop Interface**: Intuitive visual editor with real-time updates
- ⚡ **Live Preview**: See your prompt instantly with sample data and powerline/diamond styles
- 🎛️ **Full Customization**: Configure colors, templates, styles, and alignment with inline documentation
- 🚀 **Progressive Disclosure**: Advanced features hidden by default with settings dialog to show/hide complexity as needed
- 🎯 **Smart Defaults**: Auto-applied cache settings, intelligent feature detection on import
- 💡 **Command Tooltips**: Configure command-triggered custom prompts (e.g., show git status when typing `git`)
- 📚 **Segment Documentation**: Built-in properties and options reference for every segment
- 📦 **Import & Export**: Support for JSON, YAML, and TOML formats
- 💾 **Auto-Save**: Never lose your work with automatic browser storage
- 🎯 **Sample Configs**: Start quickly with 6 pre-built professional templates
- 👥 **Community Themes**: Browse and share community-contributed configurations
- 🤝 **Easy Sharing**: Submit your own themes via GitHub PR with built-in tools
- 🌐 **100% Client-Side**: Your configurations never leave your browser
- 📱 **Responsive Design**: Works on desktop, tablet, and mobile devices
- 🎨 **Smart Color Schemes**: Category-based default colors for quick setup
- 🤖 **MCP Server**: Use AI assistants like Claude to create and manage configurations through natural language ([Learn more](docs/MCP_SERVER.md))

## 🗂️ Segment Categories

- **System**: Path, OS, Shell, Session, Battery, Time, Execution Time, Status, and more
- **Version Control**: Git, Mercurial, SVN, Fossil, Plastic SCM, Sapling, Jujutsu
- **Languages**: Node.js, Python, Go, Rust, Java, .NET, PHP, Ruby, Swift, and 20+ more
- **Cloud & Infrastructure**: AWS, Azure, GCP, Kubernetes, Terraform, Docker, Pulumi
- **CLI Tools**: NPM, Yarn, PNPM, Angular, React, Flutter, and many more
- **Web**: IP Address, Weather, HTTP requests
- **Music**: Spotify, YouTube Music, Last.fm
- **Health**: Nightscout, Strava, Withings

## 🚀 Getting Started

### 🌐 Use Online (Recommended)

No installation required! Visit the hosted version:

**👉 [https://configurator.ohmyposh.dev/](https://configurator.ohmyposh.dev/)**

### 💻 Local Development

```bash
# Clone the repository
git clone https://github.com/jamesmontemagno/ohmyposh-configurator.git
cd ohmyposh-configurator

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production (includes JSON minification)
npm run build

# Preview production build locally
npm run preview
```

### 🔧 Development Scripts

- `npm run dev`: Start Vite development server
- `npm run build`: Build for production and minify all JSON assets
- `npm run build:mcp`: Build the MCP server
- `npm run mcp`: Run the MCP server
- `npm run preview`: Serve the production build from `dist/`
- `npm run minify`: Manually minify JSON files in the `public/` directory
- `npm run format:json`: Expand/format JSON files in `public/` for easier editing
- `npm run validate`: Validate all configuration files and manifests
- `npm run lint`: Run ESLint check
- `npm run test`: Run tests

## 🤖 MCP Server (AI-Powered Configuration)

Want to create Oh My Posh configurations using natural language with AI assistants? The Oh My Posh Configurator includes a Model Context Protocol (MCP) server that works with **VS Code** and **GitHub Copilot**.

[![Install in VS Code](https://img.shields.io/badge/Install_in-VS_Code-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect/mcp/install?name=ohmyposh-configurator&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22ohmyposh-configurator%22%5D%2C%22env%22%3A%7B%7D%7D)
[![Install in VS Code Insiders](https://img.shields.io/badge/Install_in-VS_Code_Insiders-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect/mcp/install?name=ohmyposh-configurator&config=%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22ohmyposh-configurator%22%5D%2C%22env%22%3A%7B%7D%7D&quality=insiders)
[![Install in Visual Studio](https://img.shields.io/badge/Install_in-Visual_Studio-C16FDE?style=flat-square&logo=visualstudio&logoColor=white)](https://vs-open.link/mcp-install?%7B%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22-y%22%2C%22ohmyposh-configurator%22%5D%2C%22env%22%3A%7B%7D%7D)

**Quick Setup for VS Code:**

1. Add to your workspace `.vscode/mcp.json`:
   ```json
   {
     "servers": {
       "ohmyposh-configurator": {
         "type": "stdio",
         "command": "node",
         "args": ["/path/to/ohmyposh-configurator/dist/mcp/index.js"]
       }
     }
   }
   ```

2. Build the MCP server:
   ```bash
   npm run build:mcp
   ```

3. Open GitHub Copilot Chat in VS Code and start creating prompts with AI!

**Example Requests:**
- "Create me a developer prompt with git and Python"
- "Add caching to all language segments"
- "Apply the Dracula color theme"
- "Help optimize my slow prompt"

📖 **[Full MCP Server Documentation](docs/MCP_SERVER.md)**

## 📖 Usage

### Quick Start Guide

1. **🎯 Choose a Starting Point**
   - Start from scratch, or
   - Load a sample configuration, or
   - Browse community themes, or
   - Import your existing Oh My Posh config

2. **➕ Add Segments**
   - Browse categories in the left sidebar
   - Click segments to add them to your prompt
   - Or drag them directly to desired positions

3. **🎨 Customize**
   - Click any segment to edit properties
   - Adjust colors, styles, and templates
   - Configure powerline, diamond, or plain styles

4. **👀 Preview**
   - See changes instantly in the preview panel
   - Toggle between dark and light backgrounds
   - View powerline arrows and diamond shapes

5. **💾 Export or Share**
   - Choose your format: JSON, YAML, or TOML
   - Download and use with Oh My Posh
   - Or share your creation with the community!

## 🤝 Contributing Your Theme

Love your configuration? Share it with the community!

1. Click the **"Share"** button in the header
2. Fill in your theme details (name, description, author, tags)
3. Select **"Open Submission Issue"** and submit the prefilled GitHub issue
4. A maintainer reviews your theme and automatically generates a draft pull request when approved
5. See your theme in the Community collection!

See [CONTRIBUTING.md](CONTRIBUTING.md) for detailed instructions.

### 🔧 Using Your Configuration

After downloading your configuration file, follow the [Oh My Posh installation guide](https://ohmyposh.dev/docs/installation/customize) to use it with your shell:

```bash
# PowerShell
oh-my-posh init pwsh --config ~/your-theme.json | Invoke-Expression

# Bash
eval "$(oh-my-posh init bash --config ~/your-theme.json)"

# Zsh
eval "$(oh-my-posh init zsh --config ~/your-theme.json)"
```

## 🛠️ Technology Stack

- **⚛️ Framework**: React 19 with TypeScript
- **⚡ Build Tool**: Vite 6.4
- **🎨 Styling**: Tailwind CSS 4.1
- **🖱️ Drag & Drop**: @dnd-kit (sortable lists and cross-container support)
- **💾 State Management**: Zustand with localStorage persistence
- **🎯 Icons**: Custom Nerd Font icon library (200+ icons) with unique IDs
- **📝 Config Parsing**: js-yaml, @iarna/toml
- **📦 Data Loading**: Dynamic JSON-based lazy loading with request-deduplication and caching

## ⚡ Performance & Optimization

- **JSON Minification**: All JSON metadata and configuration files are automatically minified during the production build to reduce payload size.
- **Smart Caching**: The application implements a request-deduplication and caching layer for all JSON assets. Each file is fetched exactly once, even if requested by multiple components simultaneously.
- **Lazy Loading**: Segment metadata is loaded on-demand by category, keeping the initial bundle size small.

## 🏗️ Project Structure

```
├── public/
│   ├── configs/          # Sample and community configurations
│   │   ├── samples/      # 6 pre-built professional templates
│   │   │   └── manifest.json  # Sample configs metadata
│   │   └── community/    # User-contributed themes
│   │       └── manifest.json  # Community configs metadata
│   └── segments/         # Segment metadata organized by category (103+ segments)
│       ├── system.json   # 14 system segments (path, battery, time, etc.)
│       ├── scm.json      # 8 version control segments (git, svn, etc.)
│       ├── languages.json # 26 programming language segments
│       ├── cloud.json    # 12 cloud provider segments
│       ├── cli.json      # 30 CLI tool segments
│       ├── web.json      # 7 web-related segments
│       ├── music.json    # 3 music player seg