A modern React-based web application for visualizing and exploring system prompts and tool configurations from various AI development platforms and tools.

AI Tools Viewer Vite License

• Real-time statistics of all AI tools and models
• Visual categorization and organization
• Quick navigation to different tool categories

• Full-text search across tool names, prompts, and configurations
• Category-based filtering (Code Editors, AI Assistants, Development Tools, etc.)
• Real-time search results with highlighting

• Formatted View: Structured display with sections and headers
• Raw View: Original text with syntax highlighting
• Copy to Clipboard: Easy copying of prompts for reuse
• Metadata Display: Author, creation date, and modification timestamps

• Interactive JSON Schema Viewer: Collapsible tree structure for complex configurations
• Tool Definition Visualization: Graphical representation of tool parameters
• Type Information: Color-coded data types (string, number, boolean, array, object)
• Required Fields Highlighting: Clear indication of mandatory parameters

• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Dark/Light Theme Support: Automatic theme detection
• Grid/List View Toggle: Multiple viewing options for better organization
• Smooth Animations: Enhanced user experience with CSS transitions

• Individual Model Routes: Direct URLs for each AI tool (/model/claude-code)
• Breadcrumb Navigation: Easy navigation hierarchy
• Deep Linking: Shareable URLs for specific tools and configurations

• Frontend Framework: React 18 with Hooks
• Build Tool: Vite for fast development and optimized builds
• Routing: React Router for client-side navigation
• Styling: Modern CSS with Flexbox and Grid layouts
• Icons: Lucide React for beautiful, consistent icons
• Data Processing: Node.js scripts for build-time data generation

• Node.js: Version 16.0 or higher
• npm: Version 8.0 or higher (comes with Node.js)

1. Clone the repository:

git clone <repository-url>
cd mds

2. Install dependencies:

npm install

3. Generate data from prompts:

npm run generate-data

4. Start development server:

npm run dev

The application will be available at http://localhost:3000.

npm run build

This will generate optimized assets in the dist directory.

mds/
├── public/ # Static assets
│ ├── data/ # Generated JSON data files
│ │ ├── tools.json # Main tools data
│ │ └── stats.json # Statistics data
│ └── vite.svg # Favicon
│
├── scripts/ # Build scripts
│ └── generateData.js # Data generation script
│
├── src/ # Source code
│ ├── components/ # React components
│ │ ├── AIModelCard.jsx # Model card component
│ │ ├── AIModelDetail.jsx # Detailed model view
│ │ ├── HomePage.jsx # Main dashboard
│ │ ├── ModelPage.jsx # Individual model page
│ │ ├── Breadcrumb.jsx # Navigation breadcrumb
│ │ ├── PromptViewer.jsx # Prompt display component
│ │ └── ToolDefinitionViewer.jsx # Config viewer
│ │
│ ├── utils/ # Utility functions
│ │ └── clientDataParser.js # Data fetching utilities
│ │
│ ├── styles/ # Stylesheets
│ │ └── App.css # Main application styles
│ │
│ ├── App.jsx # Root application component
│ └── main.jsx # Application entry point
│
├── prompt/ # Source data directory
│ └── system-prompts-and-models-of-ai-tools/
│
├── package.json # Dependencies and scripts
├── vite.config.js # Vite configuration
├── index.html # HTML template
├── .gitignore # Git ignore rules
└── README.md # This file

The application uses a sophisticated build-time data generation system:

1. Directory Scanning: Recursively scans the prompt/system-prompts-and-models-of-ai-tools/ directory
2. File Processing:
   • Parses .txt files as system prompts
   • Processes .json files as tool configurations
   • Extracts metadata (creation date, file size, etc.)
3. Special Collections: Handles nested collections like "Open Source prompts"
4. Data Transformation: Creates structured JSON with:
   • Tool categorization
   • Statistical summaries
   • Search indexes
   • Routing slugs
5. Static Generation: Outputs optimized JSON files for frontend consumption

• .txt: System prompts and instruction files
• .json: Tool definitions, configurations, and schemas
• Nested directories: Automatic collection handling

Navigate to http://localhost:3000/model/claude-code to view Claude Code's prompts and configurations.

Use the search bar to find prompts containing specific keywords like "code review" or "debugging".

Click on any tool card to view its detailed configuration schema with interactive exploration.

Use the copy button in the prompt viewer to copy formatted prompts to your clipboard.

1. Add your tool's directory to prompt/system-prompts-and-models-of-ai-tools/
2. Include .txt files for prompts and .json files for configurations
3. Run npm run generate-data to update the data
4. The new tool will automatically appear in the interface

• Edit src/styles/App.css for visual customizations
• Component-specific styles are organized by section
• Uses CSS custom properties for easy theming

• Ensure the prompt/ directory exists and contains valid files
• Check console output for JSON parsing errors
• Invalid JSON files are skipped with warnings

• Verify Node.js version is 16 or higher
• Clear npm cache: npm cache clean --force
• Delete node_modules and reinstall: rm -rf node_modules && npm install

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run data generation: npm run generate-data
5. Test your changes: npm run dev
6. Commit your changes: git commit -m 'Add amazing feature'
7. Push to the branch: git push origin feature/amazing-feature
8. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Thanks to all AI tool developers whose prompts and configurations are showcased
• Built with modern web technologies for optimal performance
• Inspired by the need for better AI prompt organization and sharing

Made with ❤️ for the AI development community