# Oh My Posh Configurator [Health: Active] **Category:** πŸ’» Developer Tools **Repository:** https://github.com/jamesmontemagno/ohmyposh-configurator **GitHub Stars:** 132 **Views:** 0 **Installs:** 0 **Upvotes:** 0 **Directory Page:** https://allmcps.com/mcp/oh-my-posh-configurator ## Description MCP server for creating, validating, and exporting Oh My Posh terminal prompt configurations. ## Claude Desktop Quick Installation Heuristic fallback β€” verify the package name and runner against the repository README before running it. Uses `npx` (confidence: low): ```json "mcpServers": { "oh-my-posh-configurator": { "command": "npx", "args": ["-y","oh-my-posh-configurator"] } } ``` ## Documentation & README # Oh My Posh Visual Configurator ✨
![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](https://raw.githubusercontent.com/jamesmontemagno/ohmyposh-configurator/HEAD/blogs/images/main-interface.png)
--- ## 🎯 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](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/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](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/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](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/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 segments β”‚ β”œβ”€β”€ health.json # 3 health tracker segments β”‚ └── README.md # Documentation for adding segments β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ components/ # React components β”‚ β”‚ β”œβ”€β”€ Canvas/ # Drag-and-drop prompt builder with tooltips support β”‚ β”‚ β”œβ”€β”€ SegmentPicker/ # Category browser with segments β”‚ β”‚ β”œβ”€β”€ PropertiesPanel/ # Segment, block, tooltip, and global properties editor β”‚ β”‚ β”œβ”€β”€ PreviewPanel/ # Live prompt preview with tooltip previews β”‚ β”‚ β”œβ”€β”€ AdvancedSettingsDialog/ # Progressive disclosure settings for advanced features β”‚ β”‚ β”œβ”€β”€ ExtraPromptsDialog/ # Secondary prompts configuration β”‚ β”‚ β”œβ”€β”€ ConfirmDialog/ # Reusable confirmation dialog β”‚ β”‚ └── ... β”‚ β”œβ”€β”€ data/ # Configuration data and color schemes β”‚ β”œβ”€β”€ store/ # Zustand state management with persistence β”‚ β”‚ β”œβ”€β”€ configStore.ts # Main config state (blocks, segments, tooltips, global settings) β”‚ β”‚ └── advancedFeaturesStore.ts # Feature toggles for progressive disclosure β”‚ β”œβ”€β”€ types/ # TypeScript type definitions (SegmentMetadata, Tooltip, etc.) β”‚ β”œβ”€β”€ utils/ # Utility functions β”‚ β”‚ β”œβ”€β”€ segmentLoader.ts # Dynamic segment loading with caching β”‚ β”‚ β”œβ”€β”€ configExporter.ts # Export to JSON/YAML/TOML β”‚ β”‚ β”œβ”€β”€ configImporter.ts # Import with auto-feature detection β”‚ β”‚ └── unicode.ts # Unicode escape handling β”‚ β”œβ”€β”€ constants/ # Nerd Font icons and other constants β”‚ └── hooks/ # Custom React hooks (useConfirm, etc.) β”œβ”€β”€ docs/ # Comprehensive documentation β”‚ β”œβ”€β”€ config-migration-guide.md # Guide for config structure updates β”‚ β”œβ”€β”€ segment-json-migration.md # Segment refactoring documentation β”‚ β”œβ”€β”€ quick-reference.md # Quick reference for contributors β”‚ └── nerd-font-icons-reference.md # 200+ icon documentation └── scripts/ # Build and validation scripts β”œβ”€β”€ validate-configs.js # Config validation tool └── README.md # Scripts documentation ``` ### Adding New Segments Segments are now stored in separate JSON files by category in `public/segments/`. This makes it easy to add or modify segments without touching the codebase: 1. Open the appropriate category file (e.g., `public/segments/languages.json`) 2. Add your segment with the following structure: ```json { "type": "segment-type", "name": "Display Name", "description": "Brief description", "icon": "lang-python", "defaultTemplate": " {{ .Property }} ", "properties": [ { "name": ".Property", "type": "string", "description": "Description of this template variable" } ], "options": [ { "name": "option_name", "type": "boolean", "default": true, "description": "What this option does" } ], "defaultCache": { "duration": "168h", "strategy": "folder" } } ``` 3. **Properties** are template variables available in `{{ }}` templates (e.g., `.Full`, `.Path`) 4. **Options** are segment configuration settings (e.g., `home_enabled`, `fetch_version`) 5. **defaultCache** (optional) provides recommended caching for performance (see Cache Strategy Guide in `public/segments/README.md`) 6. Segments are loaded dynamically on demand for better performance 7. Colors are applied automatically from category-based color schemes See [public/segments/README.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/public/segments/README.md) for detailed instructions. ## πŸ” SEO & Sharing This project includes comprehensive SEO optimization: - βœ… Structured data (JSON-LD) for search engines - βœ… Open Graph tags for rich social media previews - βœ… Twitter Card support - βœ… PWA manifest for "Add to Home Screen" - βœ… Sitemap and robots.txt - βœ… Semantic HTML with proper meta tags ## 🌟 Keywords `oh my posh`, `terminal customization`, `shell prompt`, `powerline`, `prompt theme`, `terminal theme`, `powershell prompt`, `zsh theme`, `bash prompt`, `terminal configurator`, `visual editor`, `drag and drop`, `oh-my-posh builder`, `prompt generator` ## πŸ“š Documentation ### User Documentation - [Oh My Posh Documentation](https://ohmyposh.dev/docs/) - [Configuration Overview](https://ohmyposh.dev/docs/configuration/overview) - [Segment Reference](https://ohmyposh.dev/docs/configuration/segment) - [Template Syntax](https://ohmyposh.dev/docs/configuration/templates) ### Developer Documentation - [CONTRIBUTING.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/CONTRIBUTING.md) - How to contribute themes and code - [docs/architecture.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/architecture.md) - Complete architecture and technical overview - [docs/quick-reference.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/quick-reference.md) - Quick reference for config structure - [docs/config-migration-guide.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/config-migration-guide.md) - Migrate old config format - [docs/segment-json-migration.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/segment-json-migration.md) - Segment refactoring details - [docs/nerd-font-icons-reference.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/nerd-font-icons-reference.md) - 200+ Nerd Font icons - [docs/config-structure-update-summary.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/docs/config-structure-update-summary.md) - Config structure changes - [public/segments/README.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/public/segments/README.md) - How to add new segments - [scripts/README.md](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/scripts/README.md) - Validation scripts documentation ## Contributing Contributions are welcome! Please feel free to submit a Pull Request. ## License This project is open source and available under the [MIT License](https://github.com/jamesmontemagno/ohmyposh-configurator/blob/HEAD/LICENSE). ## Acknowledgments - [Oh My Posh](https://github.com/JanDeDobbeleer/oh-my-posh) by Jan De Dobbeleer - All the Oh My Posh contributors and community