Oh My Posh Visual Configurator ✨

🎯 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.

✨ 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)

🗂️ 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/

💻 Local Development

# 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.

Quick Setup for VS Code:

1. Add to your workspace .vscode/mcp.json:

   config.json

   Copy

   {
     "servers": {
       "ohmyposh-configurator": {
         "type": "stdio",
         "command": "node",
         "args": ["/path/to/ohmyposh-configurator/dist/mcp/index.js"]
       }
     }
   }
   

2. Build the MCP server:

   Terminal

   Copy

   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

📖 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 for detailed instructions.

🔧 Using Your Configuration

After downloading your configuration file, follow the Oh My Posh installation guide to use it with your shell:

# 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