diff --git a/app.js b/app.js new file mode 100644 index 0000000..9420890 --- /dev/null +++ b/app.js @@ -0,0 +1,188 @@ +// ── State ── +let filteredTools = [...AI_TOOLS]; +let currentCategory = "all"; +let currentSort = "rating"; +let searchQuery = ""; + +// ── DOM refs ── +const grid = document.getElementById("tools-grid"); +const noResults = document.getElementById("no-results"); +const searchInput = document.getElementById("search"); +const categoryFilter = document.getElementById("category-filter"); +const sortBy = document.getElementById("sort-by"); +const totalToolsEl = document.getElementById("total-tools"); +const totalCategoriesEl = document.getElementById("total-categories"); +const modalOverlay = document.getElementById("modal-overlay"); +const modalContent = document.getElementById("modal-content"); +const modalClose = document.getElementById("modal-close"); + +// ── Helpers ── +function starsHTML(rating) { + const full = Math.floor(rating); + const half = rating % 1 >= 0.3; + let s = ""; + for (let i = 0; i < full; i++) s += "\u2605"; + if (half) s += "\u00BD"; + return s; +} + +function categoryLabel(cat) { + const labels = { + "coding-assistant": "Coding Assistant", + "cli-tool": "CLI Tool", + "agent-framework": "Agent Framework", + "ai-platform": "AI Platform", + "github-project": "GitHub Project", + skill: "Skill", + }; + return labels[cat] || cat; +} + +// ── Render ── +function renderCards() { + grid.innerHTML = ""; + if (filteredTools.length === 0) { + noResults.hidden = false; + return; + } + noResults.hidden = true; + + filteredTools.forEach((tool) => { + const card = document.createElement("div"); + card.className = "card"; + card.setAttribute("role", "button"); + card.setAttribute("tabindex", "0"); + card.innerHTML = ` +
+

${tool.name}

+ ${categoryLabel(tool.category)} +
+

${tool.tagline}

+
+
+ ${starsHTML(tool.rating)} + ${tool.rating.toFixed(1)} +
+ ${tool.trending ? 'Trending' : ""} +
+ `; + card.addEventListener("click", () => openModal(tool)); + card.addEventListener("keydown", (e) => { + if (e.key === "Enter") openModal(tool); + }); + grid.appendChild(card); + }); +} + +// ── Modal ── +function openModal(tool) { + modalContent.innerHTML = ` +

${tool.name}

+ + + + + + + + + + + + + + Visit Project → + `; + modalOverlay.classList.add("active"); + document.body.style.overflow = "hidden"; +} + +function closeModal() { + modalOverlay.classList.remove("active"); + document.body.style.overflow = ""; +} + +// ── Filter & Sort ── +function applyFilters() { + filteredTools = AI_TOOLS.filter((tool) => { + const matchesCategory = + currentCategory === "all" || tool.category === currentCategory; + const matchesSearch = + searchQuery === "" || + tool.name.toLowerCase().includes(searchQuery) || + tool.tagline.toLowerCase().includes(searchQuery) || + tool.description.toLowerCase().includes(searchQuery) || + tool.tags.some((t) => t.toLowerCase().includes(searchQuery)); + return matchesCategory && matchesSearch; + }); + + filteredTools.sort((a, b) => { + switch (currentSort) { + case "rating": + return b.rating - a.rating; + case "name": + return a.name.localeCompare(b.name); + case "trending": + return (b.trending ? 1 : 0) - (a.trending ? 1 : 0) || b.rating - a.rating; + case "newest": + return a.lastUpdated < b.lastUpdated ? 1 : -1; + default: + return 0; + } + }); + + renderCards(); +} + +// ── Stats ── +function updateStats() { + totalToolsEl.textContent = AI_TOOLS.length; + const cats = new Set(AI_TOOLS.map((t) => t.category)); + totalCategoriesEl.textContent = cats.size; +} + +// ── Event listeners ── +searchInput.addEventListener("input", (e) => { + searchQuery = e.target.value.toLowerCase().trim(); + applyFilters(); +}); + +categoryFilter.addEventListener("change", (e) => { + currentCategory = e.target.value; + applyFilters(); +}); + +sortBy.addEventListener("change", (e) => { + currentSort = e.target.value; + applyFilters(); +}); + +modalClose.addEventListener("click", closeModal); +modalOverlay.addEventListener("click", (e) => { + if (e.target === modalOverlay) closeModal(); +}); +document.addEventListener("keydown", (e) => { + if (e.key === "Escape") closeModal(); +}); + +// ── Init ── +updateStats(); +applyFilters(); diff --git a/data.js b/data.js new file mode 100644 index 0000000..4c29994 --- /dev/null +++ b/data.js @@ -0,0 +1,541 @@ +const AI_TOOLS = [ + // ── Coding Assistants ── + { + id: "claude-code", + name: "Claude Code", + category: "cli-tool", + rating: 4.8, + trending: true, + url: "https://github.com/anthropics/claude-code", + tagline: "Anthropic's agentic coding CLI — 4% of all GitHub commits and growing", + description: + "Claude Code is an agentic coding tool that lives in your terminal, understands your codebase, and helps you code faster through natural language commands. Powered by Claude Opus 4.6, it now accounts for ~4% of all public GitHub commits (~135K/day) and is projected to reach 20%+ by end of 2026. Named the most popular coding agent of early 2026, it accelerates development 2-3x.", + whyGood: [ + "Deep codebase understanding with whole-project context awareness", + "Multi-agent collaboration with Agent Teams for parallel workstreams", + "Works in terminal, IDE, Slack, and web — no environment switching", + "Automatic memory recall across sessions for continuity", + "Sandbox mode for safe execution on Linux & Mac", + "Enterprise-grade with analytics API, SSO, and managed MCP allowlists", + ], + useCases: [ + "Autonomous code generation and refactoring across large repos", + "Git workflow automation (commits, PRs, branch management)", + "Debugging and explaining complex legacy codebases", + "Multi-file editing orchestrated by AI agents", + "CI/CD pipeline debugging and infrastructure code", + ], + tags: ["CLI", "Anthropic", "Multi-agent", "Terminal", "Open Source"], + stars: "30k+", + pricing: "API-based (Anthropic credits)", + lastUpdated: "Feb 2026", + }, + { + id: "antigravity", + name: "Google Antigravity", + category: "coding-assistant", + rating: 4.7, + trending: true, + url: "https://antigravityai.org/", + tagline: "Google's $2.4B agent-first IDE powered by Gemini 3 — with Sergey Brin's return", + description: + "Google Antigravity is an AI-powered IDE announced Nov 2025 alongside Gemini 3. Born from Google's $2.4B acquisition of the Windsurf team — with Sergey Brin personally driving development in 'Founder Mode' — it introduces an 'agent-first' paradigm where AI agents function as independent actors across the full project lifecycle. Features Editor View for hands-on coding and Manager View (Mission Control) for orchestrating multiple agents asynchronously.", + whyGood: [ + "Agent-first design — AI agents work as independent actors across the project", + "Manager View (Mission Control) for spawning and observing multiple agents", + "Trust-Building Artifacts for verifiable agent reasoning and plans", + "Long-term memory that persists project context across sessions", + "MCP integration for databases, APIs, docs, and scraping tools", + "Multi-model support including Claude Sonnet 4.5 and GPT-OSS-120B", + ], + useCases: [ + "Full-stack application development with autonomous agents", + "Orchestrating multi-agent teams for parallel feature development", + "Complex refactoring with verifiable AI-generated implementation plans", + "Project architecture and planning at a task-oriented level", + "Enterprise development with SSO and data residency controls", + ], + tags: ["IDE", "Google", "Gemini 3", "Agent-first", "VS Code Fork"], + stars: "N/A (Preview)", + pricing: "Free preview; Pro ~$20/mo expected", + lastUpdated: "Feb 2026", + }, + { + id: "github-copilot", + name: "GitHub Copilot", + category: "coding-assistant", + rating: 4.5, + trending: false, + url: "https://github.com/features/copilot", + tagline: "The most widely adopted AI coding assistant with 1.8M+ subscribers", + description: + "GitHub Copilot remains the market leader in AI coding assistance with over 1.8 million paying subscribers. It supports multiple models including OpenAI, Claude, Gemini, and DeepSeek. The 2026 update introduced Next Edit Predictions that anticipate ripple effects across projects and suggest connected edits across the entire codebase.", + whyGood: [ + "Largest user base and ecosystem with proven reliability", + "Multi-model support (OpenAI, Claude, Gemini, DeepSeek)", + "Next Edit Predictions for cross-file impact analysis", + "Copilot Workspace for multi-file changes", + "Deep GitHub workflow integration (PRs, Issues, Actions)", + "Affordable at $10/month for individuals", + ], + useCases: [ + "Inline code completions predicting multiple lines", + "Code explanation and fixing via Copilot Chat", + "Multi-file changes with Copilot Workspace", + "Pull request summaries and review assistance", + "Learning new languages and frameworks quickly", + ], + tags: ["IDE Plugin", "GitHub", "Multi-model", "Enterprise"], + stars: "N/A", + pricing: "Free (2k completions/mo) / $10/mo / $39/user/mo", + lastUpdated: "Jan 2026", + }, + { + id: "cursor", + name: "Cursor", + category: "coding-assistant", + rating: 4.7, + trending: true, + url: "https://cursor.sh", + tagline: "AI-native IDE with best-in-class multi-file editing", + description: + "Cursor has rapidly become the preferred IDE for developers who want AI woven into every part of their workflow. Built as a VS Code fork, it provides whole-codebase context awareness. Its Composer mode enables sophisticated multi-file generation and refactoring that outperforms competitors on complex projects.", + whyGood: [ + "Best-in-class Composer mode for multi-file generation", + "Whole-repository context awareness — understands your entire codebase", + "Tab completion that predicts edits based on full project context", + "Cmd+K inline editing for rapid code transformation", + "Built-in multi-model support for flexibility", + "Familiar VS Code interface with minimal learning curve", + ], + useCases: [ + "Complex multi-file refactoring across large codebases", + "Rapid prototyping with whole-project AI generation", + "Architecture-level code transformations", + "Exploring and understanding unfamiliar codebases", + "Pair programming with context-aware AI agent", + ], + tags: ["IDE", "VS Code Fork", "Multi-model", "Composer"], + stars: "N/A", + pricing: "Free (limited) / Pro $20/mo / Business $40/user/mo", + lastUpdated: "Feb 2026", + }, + { + id: "windsurf", + name: "Windsurf (Cognition)", + category: "coding-assistant", + rating: 4.2, + trending: false, + url: "https://windsurf.com", + tagline: "Agentic IDE with Cascade — acquired by Cognition (Devin AI)", + description: + "Windsurf is an agentic IDE originally from Codeium, now owned by Cognition (the Devin AI team) after a July 2025 acquisition. Features Cascade for multi-file edits and Flows for maintaining long development session context. Undercuts Cursor at $15/mo but faces uncertainty around its long-term roadmap after leadership changes.", + whyGood: [ + "Cascade agent for multi-file edits with deep context awareness", + "Flows maintain context over long development sessions", + "More affordable than Cursor at $15/month", + "Clean developer experience for multi-file editing", + "Acts like a pair programmer that remembers your history", + ], + useCases: [ + "Solo development with persistent AI pair programming", + "Budget-conscious teams wanting agentic coding", + "Multi-file editing and iterative problem-solving", + "Rapid prototyping with AI-driven context awareness", + ], + tags: ["IDE", "VS Code Fork", "Cascade", "Cognition"], + stars: "N/A", + pricing: "Free (25 credits/mo) / $15/mo / $30/user/mo", + lastUpdated: "Jan 2026", + }, + { + id: "cline", + name: "Cline", + category: "cli-tool", + rating: 4.4, + trending: true, + url: "https://github.com/cline/cline", + tagline: "Open-source autonomous coding agent — 4M+ devs, BYO API key, full control", + description: + "Cline is a free, open-source AI coding assistant (Apache 2.0) that runs in VS Code with 5M+ installs and 4M+ developers. Uses a bring-your-own API key model supporting OpenAI, Anthropic, Google, AWS Bedrock, Azure, and local models via Ollama. Features dual Plan/Act modes, browser automation, and MCP integration. Spawned notable forks: Roo Code and Kilo Code ($8M seed round).", + whyGood: [ + "Completely free and open source", + "Bring-your-own API key for full cost and model control", + "Runs autonomous multi-step coding tasks", + "No vendor lock-in — use any compatible LLM provider", + "Active open-source community and rapid development", + ], + useCases: [ + "Autonomous code generation with custom model selection", + "Budget-conscious development with pay-per-use API pricing", + "Open-source projects requiring transparent AI tooling", + "Custom workflows and integrations via extensible architecture", + ], + tags: ["VS Code", "Open Source", "BYO Key", "Autonomous"], + stars: "35k+", + pricing: "Free (BYO API key)", + lastUpdated: "Feb 2026", + }, + + // ── Agent Frameworks ── + { + id: "langchain", + name: "LangChain / LangGraph", + category: "agent-framework", + rating: 4.6, + trending: false, + url: "https://github.com/langchain-ai/langchain", + tagline: "The most recognized LLM orchestration framework with 80K+ stars", + description: + "LangChain is the most widely adopted agent framework in the LLM ecosystem. Originally built for prompt chaining, it evolved into a full orchestration layer for LLM-powered applications. LangGraph adds graph-first thinking for stateful, multi-step workflows with nodes, edges, and conditional routing — enabling traceable, debuggable agent flows.", + whyGood: [ + "Largest community with 80K+ GitHub stars and comprehensive docs", + "Modular architecture for building complex LLM pipelines", + "LangGraph enables graph-based stateful workflows", + "Proven enterprise adoption and extensive integrations", + "Traceable, debuggable flows for production-grade agents", + "Rich ecosystem of tools, retrievers, and memory modules", + ], + useCases: [ + "Building complex multi-step RAG pipelines", + "Stateful workflow orchestration with conditional routing", + "Enterprise chatbots with tool use and memory", + "Data retrieval and processing chains", + "Production-grade agent deployments with monitoring", + ], + tags: ["Python", "TypeScript", "Graph", "RAG", "Enterprise"], + stars: "80k+", + pricing: "Open source / LangSmith hosted plans", + lastUpdated: "Feb 2026", + }, + { + id: "crewai", + name: "CrewAI", + category: "agent-framework", + rating: 4.5, + trending: true, + url: "https://github.com/crewAIInc/crewAI", + tagline: "Role-based multi-agent collaboration with Crews and Flows", + description: + "CrewAI emphasizes role-based multi-agent systems where each agent has a specialized function within a team. Uses a two-layer architecture: Crews for dynamic role-based collaboration and Flows for deterministic event-driven orchestration. Gentler learning curve makes it ideal for rapid prototyping and mid-scale agent setups.", + whyGood: [ + "Intuitive role-based agent design mimicking real teams", + "Two-layer architecture (Crews + Flows) balances autonomy with control", + "Gentler learning curve than LangChain for beginners", + "Great for rapid prototyping of multi-agent systems", + "Natural task delegation and negotiation between agents", + "Growing ecosystem with 20K+ GitHub stars", + ], + useCases: [ + "Multi-agent research and analysis teams", + "Content generation pipelines with specialized roles", + "Automated business workflow orchestration", + "Rapid prototyping of collaborative AI systems", + "Customer support with specialized agent roles", + ], + tags: ["Python", "Multi-agent", "Role-based", "Crews"], + stars: "20k+", + pricing: "Open source / Enterprise plans", + lastUpdated: "Jan 2026", + }, + { + id: "autogen", + name: "Microsoft AutoGen", + category: "agent-framework", + rating: 4.4, + trending: false, + url: "https://github.com/microsoft/autogen", + tagline: "Multi-agent conversations with strong Microsoft ecosystem integration", + description: + "Microsoft AutoGen supports next-generation LLM applications through multi-agent conversations. It treats workflows as conversations between agents, making it natural for collaborative AI systems. Particularly strong for organizations in the Microsoft/Azure ecosystem with excellent performance on coding tasks.", + whyGood: [ + "Intuitive multi-agent conversation paradigm", + "Strong Microsoft/Azure ecosystem integration", + "Excellent performance on collaborative coding tasks", + "Supports complex negotiation between agents", + "Well-suited for enterprise environments", + "Active development backed by Microsoft Research", + ], + useCases: [ + "Collaborative code generation with multiple specialized agents", + "Enterprise workflows in the Microsoft/Azure ecosystem", + "Research and analysis requiring multi-perspective reasoning", + "Automated testing and code review pipelines", + "Complex problem-solving through agent debates", + ], + tags: ["Python", "Microsoft", "Multi-agent", "Conversations"], + stars: "40k+", + pricing: "Open source", + lastUpdated: "Jan 2026", + }, + + // ── AI Platforms ── + { + id: "openai-platform", + name: "OpenAI Platform (GPT-5)", + category: "ai-platform", + rating: 4.6, + trending: true, + url: "https://platform.openai.com", + tagline: "Industry-leading AI platform with GPT-5 and Agents SDK", + description: + "The OpenAI Platform provides access to GPT-5 and a comprehensive suite of developer tools. The Agents SDK enables building production-ready AI agents with built-in tool use, function calling, and structured outputs. Remains the most widely used commercial AI API with deep ecosystem support.", + whyGood: [ + "GPT-5 delivers state-of-the-art language understanding", + "Agents SDK for building production-ready AI agents", + "Largest ecosystem of third-party integrations", + "Structured outputs and reliable function calling", + "Comprehensive API with vision, audio, and embedding models", + "Strong enterprise features with data privacy controls", + ], + useCases: [ + "Building AI-powered SaaS applications", + "Production agent deployments with function calling", + "Content generation and analysis at scale", + "Multi-modal applications (text, vision, audio)", + "Enterprise knowledge management and search", + ], + tags: ["API", "GPT-5", "Agents SDK", "Multi-modal"], + stars: "N/A", + pricing: "Pay-per-use API / ChatGPT Pro $200/mo", + lastUpdated: "Feb 2026", + }, + { + id: "anthropic-api", + name: "Anthropic Claude API", + category: "ai-platform", + rating: 4.7, + trending: true, + url: "https://platform.claude.com", + tagline: "Claude Opus 4.6 — top model for coding, agents, and safety", + description: + "The Anthropic Claude API provides access to Claude Opus 4.6 (the 'best model for coding, agents, and computer use'), Sonnet, and Haiku models. Known for strong safety alignment, extended thinking, and exceptional performance on coding and agentic tasks. The Claude Agent SDK enables building custom agent workflows.", + whyGood: [ + "Claude Opus 4.6 excels at coding and agentic tasks", + "Extended thinking mode for complex reasoning", + "Industry-leading safety and alignment", + "200K context window for processing large codebases", + "Claude Agent SDK for custom multi-agent systems", + "MCP (Model Context Protocol) for rich tool integration", + ], + useCases: [ + "AI-powered coding assistants and code generation", + "Complex document analysis with long context", + "Building safe, aligned AI agents for enterprise", + "Research and analysis requiring deep reasoning", + "Custom development workflows via Claude Code", + ], + tags: ["API", "Claude", "Safety", "MCP", "Extended Thinking"], + stars: "N/A", + pricing: "Pay-per-use API / Claude Pro $20/mo", + lastUpdated: "Feb 2026", + }, + + // ── GitHub Projects ── + { + id: "n8n", + name: "n8n", + category: "github-project", + rating: 4.5, + trending: true, + url: "https://github.com/n8n-io/n8n", + tagline: "Open-source workflow automation with native AI capabilities", + description: + "n8n is an open-source workflow automation platform combining a visual no-code interface with code flexibility, now supercharged with native AI capabilities. With 400+ integrations, it enables technical teams to build powerful automation pipelines with full control over data and execution.", + whyGood: [ + "Visual no-code interface combined with full code flexibility", + "400+ native integrations for seamless connectivity", + "Native AI nodes for LLM-powered automation", + "Self-hostable for full data control and privacy", + "Active community and rapid feature development", + ], + useCases: [ + "AI-powered automation workflows and pipelines", + "Data processing and ETL with AI enrichment", + "Building internal tools with AI decision-making", + "Customer support automation with LLM integration", + "DevOps and CI/CD automation with AI triggers", + ], + tags: ["Automation", "No-code", "Self-hosted", "AI Workflows"], + stars: "55k+", + pricing: "Open source / Cloud plans from $20/mo", + lastUpdated: "Feb 2026", + }, + { + id: "ragflow", + name: "RAGFlow", + category: "github-project", + rating: 4.3, + trending: true, + url: "https://github.com/infiniflow/ragflow", + tagline: "Open-source RAG engine fusing retrieval with agent capabilities", + description: + "RAGFlow is an open-source engine for Retrieval-Augmented Generation that fuses cutting-edge RAG with agent capabilities to create a superior context layer for LLMs. Provides deep document understanding, template-based chunking, and grounded citations to reduce hallucinations.", + whyGood: [ + "Deep document understanding with template-based chunking", + "Grounded citations to reduce LLM hallucinations", + "Combines RAG with agent capabilities seamlessly", + "Supports multiple document formats and data sources", + "Active development with growing community", + ], + useCases: [ + "Enterprise knowledge base with grounded AI answers", + "Document Q&A systems with citation tracking", + "Building RAG pipelines with agent orchestration", + "Legal and compliance document analysis", + "Research paper analysis and summarization", + ], + tags: ["RAG", "Open Source", "Document AI", "Knowledge Base"], + stars: "35k+", + pricing: "Open source", + lastUpdated: "Jan 2026", + }, + { + id: "opencode", + name: "OpenCode", + category: "github-project", + rating: 4.4, + trending: true, + url: "https://github.com/opencode-ai/opencode", + tagline: "The open-source coding agent with 100K+ GitHub stars", + description: + "OpenCode is a fully open-source coding agent that has rapidly accumulated over 100K GitHub stars. It provides a transparent, community-driven alternative to proprietary coding assistants, with support for multiple LLM backends and extensible architecture.", + whyGood: [ + "Fully open source with massive community (100K+ stars)", + "Transparent AI coding with community-driven development", + "Multi-model backend support for flexibility", + "Extensible plugin and tool architecture", + "No vendor lock-in or subscription costs", + ], + useCases: [ + "Open-source alternative to proprietary coding assistants", + "Custom coding agent workflows with full control", + "Community-driven AI development tools", + "Educational use for understanding AI coding agents", + ], + tags: ["Open Source", "Coding Agent", "Community", "Multi-model"], + stars: "105k+", + pricing: "Open source (BYO API key)", + lastUpdated: "Feb 2026", + }, + { + id: "langflow", + name: "Langflow", + category: "github-project", + rating: 4.3, + trending: false, + url: "https://github.com/langflow-ai/langflow", + tagline: "Visual low-code builder for agentic and RAG applications", + description: + "Langflow is a powerful visual tool for building and deploying AI-powered agents and workflows. Its drag-and-drop interface makes it accessible to non-developers while retaining the power needed for production deployments. Supports integration with major LLM providers and tool ecosystems.", + whyGood: [ + "Visual drag-and-drop interface for building AI workflows", + "Accessible to non-developers while remaining powerful", + "Integrates with major LLM providers and tools", + "Export flows as production-ready Python code", + "Large community with 140K+ stars", + ], + useCases: [ + "Rapid prototyping of AI agent workflows", + "Building RAG pipelines without code", + "Deploying AI-powered chatbots and assistants", + "Teaching AI concepts with visual workflow builder", + "Connecting multiple AI services in unified workflows", + ], + tags: ["Low-code", "Visual Builder", "RAG", "Workflows"], + stars: "144k+", + pricing: "Open source / DataStax hosted plans", + lastUpdated: "Jan 2026", + }, + + // ── Skills & Learning ── + { + id: "gen-ai-beginners", + name: "Generative AI for Beginners", + category: "skill", + rating: 4.6, + trending: false, + url: "https://github.com/microsoft/generative-ai-for-beginners", + tagline: "Microsoft's 21-lesson course for building with generative AI", + description: + "Microsoft's comprehensive educational repository offers 21 lessons covering everything from prompt engineering to building full AI applications. With over 106K GitHub stars, it's one of the most popular resources for developers getting started with generative AI.", + whyGood: [ + "Structured 21-lesson curriculum from basic to advanced", + "Backed by Microsoft with regular updates", + "Hands-on projects and coding exercises", + "Covers prompt engineering, RAG, agents, and deployment", + "Free and open source — no paywall", + "106K+ GitHub stars showing community trust", + ], + useCases: [ + "Onboarding developers into the AI ecosystem", + "Learning prompt engineering and AI fundamentals", + "Building first AI applications with guided projects", + "Team training programs for AI adoption", + "Self-paced learning for career transition into AI", + ], + tags: ["Education", "Microsoft", "Free", "Beginner-friendly"], + stars: "106k+", + pricing: "Free", + lastUpdated: "Jan 2026", + }, + { + id: "prompt-engineering", + name: "Prompt Engineering Guide", + category: "skill", + rating: 4.5, + trending: false, + url: "https://github.com/dair-ai/Prompt-Engineering-Guide", + tagline: "Comprehensive guide to prompt engineering techniques and best practices", + description: + "The most comprehensive open-source guide to prompt engineering. Covers techniques from basic zero-shot prompting to advanced chain-of-thought, tree-of-thought, and ReAct patterns. Essential reading for anyone working with LLMs professionally.", + whyGood: [ + "Most comprehensive prompt engineering resource available", + "Covers basic to advanced techniques systematically", + "Regularly updated with latest research and methods", + "Community-contributed examples and patterns", + "Available in multiple languages", + ], + useCases: [ + "Mastering prompt engineering for production AI systems", + "Learning chain-of-thought and ReAct patterns", + "Optimizing LLM outputs for specific use cases", + "Training teams on effective AI communication", + "Reference guide for advanced prompting techniques", + ], + tags: ["Education", "Prompting", "LLM", "Open Source"], + stars: "55k+", + pricing: "Free", + lastUpdated: "Dec 2025", + }, + { + id: "mcp-protocol", + name: "Model Context Protocol (MCP)", + category: "skill", + rating: 4.6, + trending: true, + url: "https://modelcontextprotocol.io", + tagline: "Open standard for connecting AI models to data and tools", + description: + "The Model Context Protocol (MCP) is an open standard pioneered by Anthropic for connecting AI models to external data sources, APIs, and tools. Rapidly adopted across the industry — supported by Claude Code, Google Antigravity, Cursor, and others. Essential skill for building production AI systems in 2026.", + whyGood: [ + "Open standard with broad industry adoption", + "Enables AI models to interact with any data source or tool", + "Supported by major platforms (Claude, Antigravity, Cursor)", + "Reduces integration complexity for AI applications", + "Active development with growing server ecosystem", + "Critical skill for AI developers in 2026", + ], + useCases: [ + "Connecting AI assistants to databases and APIs", + "Building tool-using AI agents with standardized interfaces", + "Enterprise data integration for AI systems", + "Creating reusable MCP servers for common services", + "Enabling AI to interact with browsers, files, and cloud services", + ], + tags: ["Protocol", "Integration", "Anthropic", "Open Standard"], + stars: "45k+", + pricing: "Free / Open standard", + lastUpdated: "Feb 2026", + }, +]; diff --git a/index.html b/index.html new file mode 100644 index 0000000..fbf72f2 --- /dev/null +++ b/index.html @@ -0,0 +1,70 @@ + + + + + + AI Tools Hub - Discover the Best AI Developer Tools + + + +
+
+

AI Tools Hub

+

Curated ratings & news on the best AI developer tools, frameworks, and skills

+
+
+ + + +
+
+
0 Tools
+
0 Categories
+
Updated: Feb 2026
+
+ +
+ +
+ + +
+ + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..872936a --- /dev/null +++ b/style.css @@ -0,0 +1,356 @@ +/* ── Reset & Base ── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --bg: #0f1117; + --surface: #1a1d27; + --surface-hover: #222633; + --border: #2a2e3d; + --text: #e4e6ed; + --text-muted: #8b8fa3; + --accent: #6c5ce7; + --accent-light: #a29bfe; + --green: #00b894; + --orange: #fdcb6e; + --red: #e17055; + --blue: #74b9ff; + --radius: 12px; + --shadow: 0 4px 24px rgba(0,0,0,.35); +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif; + background: var(--bg); + color: var(--text); + line-height: 1.6; + min-height: 100vh; +} + +/* ── Header ── */ +header { + background: linear-gradient(135deg, #1a1d27 0%, #2d1b69 50%, #1a1d27 100%); + padding: 3rem 1.5rem 2rem; + text-align: center; + border-bottom: 1px solid var(--border); +} +.header-content h1 { + font-size: 2.4rem; + font-weight: 800; + background: linear-gradient(135deg, var(--accent-light), var(--blue)); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + margin-bottom: .4rem; +} +.tagline { + color: var(--text-muted); + font-size: 1.05rem; +} + +/* ── Toolbar ── */ +.toolbar { + display: flex; + flex-wrap: wrap; + gap: 1rem; + padding: 1rem 1.5rem; + max-width: 1280px; + margin: 0 auto; + align-items: center; +} +.search-box { flex: 1; min-width: 220px; } +.search-box input { + width: 100%; + padding: .7rem 1rem; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--surface); + color: var(--text); + font-size: .95rem; + outline: none; + transition: border-color .2s; +} +.search-box input:focus { border-color: var(--accent); } + +.filters { display: flex; gap: .6rem; flex-wrap: wrap; } +.filters select { + padding: .65rem .9rem; + border-radius: var(--radius); + border: 1px solid var(--border); + background: var(--surface); + color: var(--text); + font-size: .9rem; + cursor: pointer; + outline: none; +} +.filters select:focus { border-color: var(--accent); } + +/* ── Stats Bar ── */ +.stats-bar { + display: flex; + gap: 2rem; + padding: .8rem 1.5rem; + max-width: 1280px; + margin: 0 auto; + color: var(--text-muted); + font-size: .85rem; +} +.stats-bar .stat span { color: var(--accent-light); font-weight: 600; } + +/* ── Tools Grid ── */ +.tools-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: 1.2rem; + padding: 1rem 1.5rem 3rem; + max-width: 1280px; + margin: 0 auto; +} + +/* ── Card ── */ +.card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.4rem; + cursor: pointer; + transition: transform .15s, border-color .2s, box-shadow .2s; + display: flex; + flex-direction: column; + gap: .7rem; +} +.card:hover { + transform: translateY(-3px); + border-color: var(--accent); + box-shadow: var(--shadow); +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: .6rem; +} +.card-header h3 { + font-size: 1.15rem; + font-weight: 700; +} +.card-badge { + font-size: .7rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .04em; + padding: .2rem .55rem; + border-radius: 6px; + white-space: nowrap; + flex-shrink: 0; +} +.badge-coding-assistant { background: rgba(108,92,231,.2); color: var(--accent-light); } +.badge-cli-tool { background: rgba(0,184,148,.2); color: var(--green); } +.badge-agent-framework { background: rgba(253,203,110,.2); color: var(--orange); } +.badge-ai-platform { background: rgba(116,185,255,.2); color: var(--blue); } +.badge-github-project { background: rgba(255,255,255,.1); color: var(--text-muted); } +.badge-skill { background: rgba(225,112,85,.2); color: var(--red); } + +.card-desc { + color: var(--text-muted); + font-size: .9rem; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.card-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: auto; + padding-top: .5rem; + border-top: 1px solid var(--border); +} + +.rating { + display: flex; + align-items: center; + gap: .3rem; + font-weight: 700; + font-size: .95rem; +} +.stars { color: var(--orange); letter-spacing: 1px; font-size: .85rem; } + +.trending-badge { + font-size: .72rem; + font-weight: 600; + padding: .15rem .5rem; + border-radius: 5px; + background: rgba(108,92,231,.15); + color: var(--accent-light); +} + +/* ── No Results ── */ +.no-results { + text-align: center; + padding: 4rem 1rem; + color: var(--text-muted); + font-size: 1.1rem; +} + +/* ── Modal ── */ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,.7); + display: none; + align-items: center; + justify-content: center; + z-index: 100; + padding: 1rem; +} +.modal-overlay.active { + display: flex; +} +.modal { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + max-width: 680px; + width: 100%; + max-height: 85vh; + overflow-y: auto; + padding: 2rem; + position: relative; + box-shadow: 0 8px 40px rgba(0,0,0,.5); +} +.modal-close { + position: absolute; + top: .5rem; + right: .5rem; + background: var(--border); + border: none; + color: var(--text); + font-size: 1.4rem; + cursor: pointer; + line-height: 1; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 10; +} +.modal-close:hover { background: var(--accent); color: #fff; } + +.modal h2 { + font-size: 1.5rem; + margin-bottom: .3rem; +} +.modal .modal-category { + font-size: .8rem; + text-transform: uppercase; + color: var(--accent-light); + letter-spacing: .04em; + margin-bottom: 1rem; +} +.modal .modal-rating { + display: flex; + align-items: center; + gap: .5rem; + margin-bottom: 1.2rem; +} +.modal .modal-rating .score { + font-size: 1.8rem; + font-weight: 800; + color: var(--orange); +} +.modal .modal-rating .out-of { + color: var(--text-muted); + font-size: .9rem; +} +.modal .modal-rating .stars { + font-size: 1rem; +} + +.modal-section { margin-bottom: 1.3rem; } +.modal-section h4 { + font-size: .85rem; + text-transform: uppercase; + letter-spacing: .05em; + color: var(--accent-light); + margin-bottom: .5rem; +} +.modal-section p, +.modal-section li { + color: var(--text-muted); + font-size: .92rem; + line-height: 1.7; +} +.modal-section ul { + list-style: none; + padding: 0; +} +.modal-section ul li::before { + content: "\25B8"; + color: var(--accent); + margin-right: .5rem; +} + +.modal-tags { + display: flex; + flex-wrap: wrap; + gap: .4rem; + margin-top: .5rem; +} +.modal-tag { + font-size: .75rem; + padding: .2rem .6rem; + border-radius: 5px; + background: rgba(108,92,231,.12); + color: var(--accent-light); +} + +.modal-link { + display: inline-block; + margin-top: 1rem; + padding: .6rem 1.4rem; + background: var(--accent); + color: #fff; + border-radius: var(--radius); + text-decoration: none; + font-size: .9rem; + font-weight: 600; + transition: background .2s; +} +.modal-link:hover { background: #5a4bd1; } + +/* ── Footer ── */ +footer { + text-align: center; + padding: 2rem; + color: var(--text-muted); + font-size: .82rem; + border-top: 1px solid var(--border); +} + +/* ── Responsive ── */ +@media (max-width: 600px) { + .header-content h1 { font-size: 1.7rem; } + .tools-grid { grid-template-columns: 1fr; } + .toolbar { flex-direction: column; } + .modal { + max-height: 80vh; + padding: 1.5rem 1.2rem; + margin-top: auto; + border-radius: var(--radius) var(--radius) 0 0; + } + .modal-overlay { + align-items: flex-end; + } + .modal-close { + width: 3rem; + height: 3rem; + font-size: 1.6rem; + top: .5rem; + right: .5rem; + } +}