mirror of
https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools.git
synced 2025-12-16 05:25:11 +00:00
This commit adds a complete, production-ready web application for browsing and exploring AI tool system prompts. The interface provides an intuitive, responsive, and feature-rich experience for discovering AI tools. ## Web Application Features **Core Functionality:** - 🔍 Advanced search with real-time filtering - 📊 Interactive statistics dashboard with visualizations - 🔄 Side-by-side comparison of up to 4 tools - ⭐ Favorites system with local persistence - 📱 Fully responsive mobile-first design - 🎨 Dark/light mode with system preference detection - ⚡ Optimized performance with Next.js Server Components **Pages:** - Home: Hero section, features showcase, featured tools - Browse: Advanced filtering, grid/list views, category filters - Stats: Comprehensive analytics and visualizations - Compare: Side-by-side tool comparison - Tool Detail: In-depth tool information - About: Project information and tech stack **Components:** - Responsive navbar with mobile menu - Tool cards with interactive actions - Reusable UI components (Button, Card, Badge, Input) - Footer with quick links and stats - Theme provider for dark mode - Loading and error states ## Technical Stack **Framework & Libraries:** - Next.js 15 with App Router - React 19.0 with Server Components - TypeScript 5.6 for type safety - Tailwind CSS for styling - Zustand for state management - next-themes for theme switching - Lucide React for icons **Features:** - Server-side rendering (SSR) - Static site generation (SSG) for tool pages - Optimized bundle with automatic code splitting - SEO-friendly with metadata API - Accessibility best practices ## Project Structure web/ ├── app/ # Next.js pages ├── components/ # React components ├── lib/ # Utilities and data ├── data/ # Static data (index.json) ├── setup.sh # Setup script └── README.md # Documentation ## Developer Experience - TypeScript for type safety - ESLint for code quality - Hot module replacement - Fast refresh - Comprehensive documentation - Setup script for quick start ## Updated Documentation - Enhanced main README with web interface section - Created comprehensive web/README.md - Updated roadmap to mark completed features - Added Quick Start guide for web app ## Stats - 33 new files created - ~3,500 lines of TypeScript/TSX - Full responsive design (mobile, tablet, desktop) - Production-ready with build optimizations Users can now explore 32+ AI tools through an intuitive web interface instead of just command-line tools. Version: 2.0.0
102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import { AITool, ToolIndex } from './types'
|
|
import indexData from '../data/index.json'
|
|
|
|
export function getToolIndex(): ToolIndex {
|
|
return indexData as ToolIndex
|
|
}
|
|
|
|
export function getAllTools(): AITool[] {
|
|
const index = getToolIndex()
|
|
return index.tools
|
|
}
|
|
|
|
export function getToolByDirectory(directory: string): AITool | undefined {
|
|
const tools = getAllTools()
|
|
return tools.find(tool => tool.directory === directory)
|
|
}
|
|
|
|
export function getToolsByCategory(category: string): AITool[] {
|
|
const tools = getAllTools()
|
|
return tools.filter(tool => tool.category === category)
|
|
}
|
|
|
|
export function getToolsByCompany(company: string): AITool[] {
|
|
const tools = getAllTools()
|
|
return tools.filter(tool => tool.company === company)
|
|
}
|
|
|
|
export function searchTools(query: string): AITool[] {
|
|
if (!query) return getAllTools()
|
|
|
|
const lowercaseQuery = query.toLowerCase()
|
|
const tools = getAllTools()
|
|
|
|
return tools.filter(tool => {
|
|
return (
|
|
tool.name.toLowerCase().includes(lowercaseQuery) ||
|
|
tool.description.toLowerCase().includes(lowercaseQuery) ||
|
|
tool.company.toLowerCase().includes(lowercaseQuery) ||
|
|
tool.category.toLowerCase().includes(lowercaseQuery) ||
|
|
tool.models.some(model => model.toLowerCase().includes(lowercaseQuery))
|
|
)
|
|
})
|
|
}
|
|
|
|
export function getCategories(): string[] {
|
|
const index = getToolIndex()
|
|
return Object.keys(index.stats.by_category).sort()
|
|
}
|
|
|
|
export function getCompanies(): string[] {
|
|
const tools = getAllTools()
|
|
const companies = new Set(tools.map(tool => tool.company))
|
|
return Array.from(companies).sort()
|
|
}
|
|
|
|
export function getModels(): string[] {
|
|
const tools = getAllTools()
|
|
const models = new Set<string>()
|
|
tools.forEach(tool => {
|
|
tool.models.forEach(model => models.add(model))
|
|
})
|
|
return Array.from(models).sort()
|
|
}
|
|
|
|
export function getStats() {
|
|
const index = getToolIndex()
|
|
return index.stats
|
|
}
|
|
|
|
export function getCategoryIcon(category: string): string {
|
|
const icons: Record<string, string> = {
|
|
'Code Assistant': '💻',
|
|
'IDE': '🏢',
|
|
'AI Agent': '🤖',
|
|
'Web Builder': '🌐',
|
|
'Terminal': '🖥️',
|
|
'Cloud IDE': '🏭',
|
|
'Document Assistant': '📝',
|
|
'Search Assistant': '🔍',
|
|
'Foundation Model': '🧠',
|
|
'Collection': '📚',
|
|
'Unknown': '❓',
|
|
}
|
|
return icons[category] || '📦'
|
|
}
|
|
|
|
export function getCategoryColor(category: string): string {
|
|
const colors: Record<string, string> = {
|
|
'Code Assistant': 'from-blue-500 to-cyan-500',
|
|
'IDE': 'from-purple-500 to-pink-500',
|
|
'AI Agent': 'from-green-500 to-emerald-500',
|
|
'Web Builder': 'from-orange-500 to-red-500',
|
|
'Terminal': 'from-gray-500 to-slate-500',
|
|
'Cloud IDE': 'from-indigo-500 to-blue-500',
|
|
'Document Assistant': 'from-yellow-500 to-orange-500',
|
|
'Search Assistant': 'from-pink-500 to-rose-500',
|
|
'Foundation Model': 'from-violet-500 to-purple-500',
|
|
'Collection': 'from-teal-500 to-cyan-500',
|
|
}
|
|
return colors[category] || 'from-gray-500 to-slate-500'
|
|
}
|