{
  "markdown": "# Oh My Posh Visual Configurator ✨\n\n<div align=\"center\">\n\n![Oh My Posh Configurator](https://img.shields.io/badge/Oh%20My%20Posh-Visual%20Configurator-e94560?style=for-the-badge)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](LICENSE)\n[![Live Demo](https://img.shields.io/badge/demo-live-success?style=for-the-badge)](https://configurator.ohmyposh.dev/)\n\n**Design beautiful terminal prompts without touching configuration files**\n\n[🚀 Launch App](https://configurator.ohmyposh.dev/) • [📖 Documentation](https://ohmyposh.dev/docs/) • [💬 Discussions](https://github.com/jamesmontemagno/ohmyposh-configurator/discussions)\n\n![Oh My Posh Visual Configurator](blogs/images/main-interface.png)\n\n</div>\n\n---\n\n## 🎯 What is Oh My Posh Configurator?\n\nThe **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!\n\nPerfect 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/).\n\n## ✨ Features\n\n- 🎨 **103+ Segments**: Browse comprehensive segment library organized in 8 categories with detailed properties and options\n- 🖱️ **Drag & Drop Interface**: Intuitive visual editor with real-time updates\n- ⚡ **Live Preview**: See your prompt instantly with sample data and powerline/diamond styles\n- 🎛️ **Full Customization**: Configure colors, templates, styles, and alignment with inline documentation\n- 🚀 **Progressive Disclosure**: Advanced features hidden by default with settings dialog to show/hide complexity as needed\n- 🎯 **Smart Defaults**: Auto-applied cache settings, intelligent feature detection on import\n- 💡 **Command Tooltips**: Configure command-triggered custom prompts (e.g., show git status when typing `git`)\n- 📚 **Segment Documentation**: Built-in properties and options reference for every segment\n- 📦 **Import & Export**: Support for JSON, YAML, and TOML formats\n- 💾 **Auto-Save**: Never lose your work with automatic browser storage\n- 🎯 **Sample Configs**: Start quickly with 6 pre-built professional templates\n- 👥 **Community Themes**: Browse and share community-contributed configurations\n- 🤝 **Easy Sharing**: Submit your own themes via GitHub PR with built-in tools\n- 🌐 **100% Client-Side**: Your configurations never leave your browser\n- 📱 **Responsive Design**: Works on desktop, tablet, and mobile devices\n- 🎨 **Smart Color Schemes**: Category-based default colors for quick setup\n- 🤖 **MCP Server**: Use AI assistants like Claude to create and manage configurations through natural language ([Learn more](docs/MCP_SERVER.md))\n\n## 🗂️ Segment Categories\n\n- **System**: Path, OS, Shell, Session, Battery, Time, Execution Time, Status, and more\n- **Version Control**: Git, Mercurial, SVN, Fossil, Plastic SCM, Sapling, Jujutsu\n- **Languages**: Node.js, Python, Go, Rust, Java, .NET, PHP, Ruby, Swift, and 20+ more\n- **Cloud & Infrastructure**: AWS, Azure, GCP, Kubernetes, Terraform, Docker, Pulumi\n- **CLI Tools**: NPM, Yarn, PNPM, Angular, React, Flutter, and many more\n- **Web**: IP Address, Weather, HTTP requests\n- **Music**: Spotify, YouTube Music, Last.fm\n- **Health**: Nightscout, Strava, Withings\n\n## 🚀 Getting Started\n\n### 🌐 Use Online (Recommended)\n\nNo installation required! Visit the hosted version:\n\n**👉 [https://configurator.ohmyposh.dev/](https://configurator.ohmyposh.dev/)**\n\n### 💻 Local Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/jamesmontemagno/ohmyposh-configurator.git\ncd ohmyposh-configurator\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production (includes JSON minification)\nnpm run build\n\n# Preview production build locally\nnpm run preview\n```\n\n### 🔧 Development Scripts\n\n- `npm run dev`: Start Vite development server\n- `npm run build`: Build for production and minify all JSON assets\n- `npm run build:mcp`: Build the MCP server\n- `npm run mcp`: Run the MCP server\n- `npm run preview`: Serve the production build from `dist/`\n- `npm run minify`: Manually minify JSON files in the `public/` directory\n- `npm run format:json`: Expand/format JSON files in `public/` for easier editing\n- `npm run validate`: Validate all configuration files and manifests\n- `npm run lint`: Run ESLint check\n- `npm run test`: Run tests\n\n## 🤖 MCP Server (AI-Powered Configuration)\n\nWant 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**.\n\n[![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)\n[![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)\n[![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)\n\n**Quick Setup for VS Code:**\n\n1. Add to your workspace `.vscode/mcp.json`:\n   ```json\n   {\n     \"servers\": {\n       \"ohmyposh-configurator\": {\n         \"type\": \"stdio\",\n         \"command\": \"node\",\n         \"args\": [\"/path/to/ohmyposh-configurator/dist/mcp/index.js\"]\n       }\n     }\n   }\n   ```\n\n2. Build the MCP server:\n   ```bash\n   npm run build:mcp\n   ```\n\n3. Open GitHub Copilot Chat in VS Code and start creating prompts with AI!\n\n**Example Requests:**\n- \"Create me a developer prompt with git and Python\"\n- \"Add caching to all language segments\"\n- \"Apply the Dracula color theme\"\n- \"Help optimize my slow prompt\"\n\n📖 **[Full MCP Server Documentation](docs/MCP_SERVER.md)**\n\n## 📖 Usage\n\n### Quick Start Guide\n\n1. **🎯 Choose a Starting Point**\n   - Start from scratch, or\n   - Load a sample configuration, or\n   - Browse community themes, or\n   - Import your existing Oh My Posh config\n\n2. **➕ Add Segments**\n   - Browse categories in the left sidebar\n   - Click segments to add them to your prompt\n   - Or drag them directly to desired positions\n\n3. **🎨 Customize**\n   - Click any segment to edit properties\n   - Adjust colors, styles, and templates\n   - Configure powerline, diamond, or plain styles\n\n4. **👀 Preview**\n   - See changes instantly in the preview panel\n   - Toggle between dark and light backgrounds\n   - View powerline arrows and diamond shapes\n\n5. **💾 Export or Share**\n   - Choose your format: JSON, YAML, or TOML\n   - Download and use with Oh My Posh\n   - Or share your creation with the community!\n\n## 🤝 Contributing Your Theme\n\nLove your configuration? Share it with the community!\n\n1. Click the **\"Share\"** button in the header\n2. Fill in your theme details (name, description, author, tags)\n3. Select **\"Open Submission Issue\"** and submit the prefilled GitHub issue\n4. A maintainer reviews your theme and automatically generates a draft pull request when approved\n5. See your theme in the Community collection!\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for detailed instructions.\n\n### 🔧 Using Your Configuration\n\nAfter downloading your configuration file, follow the [Oh My Posh installation guide](https://ohmyposh.dev/docs/installation/customize) to use it with your shell:\n\n```bash\n# PowerShell\noh-my-posh init pwsh --config ~/your-theme.json | Invoke-Expression\n\n# Bash\neval \"$(oh-my-posh init bash --config ~/your-theme.json)\"\n\n# Zsh\neval \"$(oh-my-posh init zsh --config ~/your-theme.json)\"\n```\n\n## 🛠️ Technology Stack\n\n- **⚛️ Framework**: React 19 with TypeScript\n- **⚡ Build Tool**: Vite 6.4\n- **🎨 Styling**: Tailwind CSS 4.1\n- **🖱️ Drag & Drop**: @dnd-kit (sortable lists and cross-container support)\n- **💾 State Management**: Zustand with localStorage persistence\n- **🎯 Icons**: Custom Nerd Font icon library (200+ icons) with unique IDs\n- **📝 Config Parsing**: js-yaml, @iarna/toml\n- **📦 Data Loading**: Dynamic JSON-based lazy loading with request-deduplication and caching\n\n## ⚡ Performance & Optimization\n\n- **JSON Minification**: All JSON metadata and configuration files are automatically minified during the production build to reduce payload size.\n- **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.\n- **Lazy Loading**: Segment metadata is loaded on-demand by category, keeping the initial bundle size small.\n\n## 🏗️ Project Structure\n\n```\n├── public/\n│   ├── configs/          # Sample and community configurations\n│   │   ├── samples/      # 6 pre-built professional templates\n│   │   │   └── manifest.json  # Sample configs metadata\n│   │   └── community/    # User-contributed themes\n│   │       └── manifest.json  # Community configs metadata\n│   └── segments/         # Segment metadata organized by category (103+ segments)\n│       ├── system.json   # 14 system segments (path, battery, time, etc.)\n│       ├── scm.json      # 8 version control segments (git, svn, etc.)\n│       ├── languages.json # 26 programming language segments\n│       ├── cloud.json    # 12 cloud provider segments\n│       ├── cli.json      # 30 CLI tool segments\n│       ├── web.json      # 7 web-related segments\n│       ├── music.json    # 3 music player segments\n│       ├── health.json   # 3 health tracker segments\n│       └── README.md     # Documentation for adding segments\n├── src/\n│   ├── components/       # React components\n│   │   ├── Canvas/       # Drag-and-drop prompt builder with tooltips support\n│   │   ├── SegmentPicker/ # Category browser with segments\n│   │   ├── PropertiesPanel/ # Segment, block, tooltip, and global properties editor\n│   │   ├── PreviewPanel/ # Live prompt preview with tooltip previews\n│   │   ├── AdvancedSettingsDialog/ # Progressive disclosure settings for advanced features\n│   │   ├── ExtraPromptsDialog/ # Secondary prompts configuration\n│   │   ├── ConfirmDialog/ # Reusable confirmation dialog\n│   │   └── ...\n│   ├── data/            # Configuration data and color schemes\n│   ├── store/           # Zustand state management with persistence\n│   │   ├── configStore.ts  # Main config state (blocks, segments, tooltips, global settings)\n│   │   └── advancedFeaturesStore.ts  # Feature toggles for progressive disclosure\n│   ├── types/           # TypeScript type definitions (SegmentMetadata, Tooltip, etc.)\n│   ├── utils/           # Utility functions\n│   │   ├── segmentLoader.ts  # Dynamic segment loading with caching\n│   │   ├── configExporter.ts # Export to JSON/YAML/TOML\n│   │   ├── configImporter.ts # Import with auto-feature detection\n│   │   └── unicode.ts   # Unicode escape handling\n│   ├── constants/       # Nerd Font icons and other constants\n│   └── hooks/           # Custom React hooks (useConfirm, etc.)\n├── docs/                # Comprehensive documentation\n│   ├── config-migration-guide.md  # Guide for config structure updates\n│   ├── segment-json-migration.md  # Segment refactoring documentation\n│   ├── quick-reference.md         # Quick reference for contributors\n│   └── nerd-font-icons-reference.md # 200+ icon documentation\n└── scripts/             # Build and validation scripts\n    ├── validate-configs.js        # Config validation tool\n    └── README.md                  # Scripts documentation\n```\n\n### Adding New Segments\n\nSegments 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:\n\n1. Open the appropriate category file (e.g., `public/segments/languages.json`)\n2. Add your segment with the following structure:\n   ```json\n   {\n     \"type\": \"segment-type\",\n     \"name\": \"Display Name\",\n     \"description\": \"Brief description\",\n     \"icon\": \"lang-python\",\n     \"defaultTemplate\": \" {{ .Property }} \",\n     \"properties\": [\n       {\n         \"name\": \".Property\",\n         \"type\": \"string\",\n         \"description\": \"Description of this template variable\"\n       }\n     ],\n     \"options\": [\n       {\n         \"name\": \"option_name\",\n         \"type\": \"boolean\",\n         \"default\": true,\n         \"description\": \"What this option does\"\n       }\n     ],\n     \"defaultCache\": {\n       \"duration\": \"168h\",\n       \"strategy\": \"folder\"\n     }\n   }\n   ```\n3. **Properties** are template variables available in `{{ }}` templates (e.g., `.Full`, `.Path`)\n4. **Options** are segment configuration settings (e.g., `home_enabled`, `fetch_version`)\n5. **defaultCache** (optional) provides recommended caching for performance (see Cache Strategy Guide in `public/segments/README.md`)\n6. Segments are loaded dynamically on demand for better performance\n7. Colors are applied automatically from category-based color schemes\n\nSee [public/segments/README.md](public/segments/README.md) for detailed instructions.\n\n## 🔍 SEO & Sharing\n\nThis project includes comprehensive SEO optimization:\n- ✅ Structured data (JSON-LD) for search engines\n- ✅ Open Graph tags for rich social media previews\n- ✅ Twitter Card support\n- ✅ PWA manifest for \"Add to Home Screen\"\n- ✅ Sitemap and robots.txt\n- ✅ Semantic HTML with proper meta tags\n\n## 🌟 Keywords\n\n`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`\n\n## 📚 Documentation\n\n### User Documentation\n- [Oh My Posh Documentation](https://ohmyposh.dev/docs/)\n- [Configuration Overview](https://ohmyposh.dev/docs/configuration/overview)\n- [Segment Reference](https://ohmyposh.dev/docs/configuration/segment)\n- [Template Syntax](https://ohmyposh.dev/docs/configuration/templates)\n\n### Developer Documentation\n- [CONTRIBUTING.md](CONTRIBUTING.md) - How to contribute themes and code\n- [docs/architecture.md](docs/architecture.md) - Complete architecture and technical overview\n- [docs/quick-reference.md](docs/quick-reference.md) - Quick reference for config structure\n- [docs/config-migration-guide.md](docs/config-migration-guide.md) - Migrate old config format\n- [docs/segment-json-migration.md](docs/segment-json-migration.md) - Segment refactoring details\n- [docs/nerd-font-icons-reference.md](docs/nerd-font-icons-reference.md) - 200+ Nerd Font icons\n- [docs/config-structure-update-summary.md](docs/config-structure-update-summary.md) - Config structure changes\n- [public/segments/README.md](public/segments/README.md) - How to add new segments\n- [scripts/README.md](scripts/README.md) - Validation scripts documentation\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## Acknowledgments\n\n- [Oh My Posh](https://github.com/JanDeDobbeleer/oh-my-posh) by Jan De Dobbeleer\n- All the Oh My Posh contributors and community\n",
  "bytes": 15592,
  "sha": "ca7e182457ef37cf4ab88b4cbc0e74aca3edd928b09f355b5aea6e20a26abda5",
  "repo_slug": "jamesmontemagno/ohmyposh-configurator",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_jamesmontemagno_ohmyposh_confi_486e9399/readme"
}