AI Tools Directory - Discover Amazing AI Tools

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_303":304,"_305":306},"routes/_app.x.$handle.$name",{"_95":94,"_31":44,"_103":85,"_26":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":24,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":24},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/ToolCard.tsx","latestPath","fileId","6f7084d0-4430-11f0-a36e-76b3cceeab13","name","ToolCard.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { AITool, Category } from \"../../shared/types.ts\";\n\ninterface ToolCardProps {\n tool: AITool;\n categories: Category[];\n}\n\nexport default function ToolCard({ tool, categories }: ToolCardProps) {\n const category = categories.find(c => c.id === tool.category);\n \n const getPricingBadgeClass = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'pricing-free';\n case 'freemium': return 'pricing-freemium';\n case 'paid': return 'pricing-paid';\n default: return 'bg-gray-600';\n }\n };\n\n const getPricingText = (pricing: string) => {\n switch (pricing) {\n case 'free': return 'Free';\n case 'freemium': return 'Freemium';\n case 'paid': return 'Paid';\n default: return pricing;\n }\n };\n\n const renderStars = (rating?: number) => {\n if (!rating) return null;\n \n const stars = [];\n const fullStars = Math.floor(rating);\n const hasHalfStar = rating % 1 >= 0.5;\n \n for (let i = 0; i < 5; i++) {\n if (i < fullStars) {\n stars.push(\n ★\n );\n } else if (i === fullStars && hasHalfStar) {\n stars.push(\n ☆\n );\n } else {\n stars.push(\n ☆\n );\n }\n }\n \n return (\n

{stars}

\n {rating.toFixed(1)}\n

\n );\n };\n\n return (\n

\n {/* Featured Badge */}\n {tool.featured && (\n

\n ⭐ Featured\n

\n )}\n\n {/* Category Icon & Name */}\n

\n {category && (\n <>\n {category.icon}\n \n {category.name}\n \n \n )}\n

\n \n {/* Pricing Badge */}\n

\n {getPricingText(tool.pricing)}\n

\n\n {/* Tool Name */}\n

\n {tool.name}\n

\n\n {/* Description */}\n

\n {tool.description}\n

\n\n {/* Tags */}\n {tool.tags && tool.tags.length > 0 && (\n

\n {tool.tags.slice(0, 3).map((tag, index) => (\n \n #{tag}\n \n ))}\n {tool.tags.length > 3 && (\n \n +{tool.tags.length - 3} more\n \n )}\n

\n )}\n\n {/* Rating */}\n {tool.rating && (\n

\n {renderStars(tool.rating)}\n

\n )}\n\n {/* Action Button */}\n

\n \n Try Now\n \n \n\n {/* Share Button */}\n {\n if (navigator.share) {\n navigator.share({\n title: tool.name,\n text: tool.description,\n url: tool.url\n });\n } else {\n navigator.clipboard.writeText(tool.url);\n // Could add a toast notification here\n }\n }}\n className=\"p-2 text-gray-400 hover:text-white transition-colors\"\n title=\"Share this tool\"\n >\n \n \n

\n );\n}","createdAt",["D",1749363526719],"branchVersion","branchId","a080dd64-442f-11f0-9005-76b3cceeab13","id","a08071e4-442f-11f0-9005-76b3cceeab13","untitled-9921",["D",1749363179537],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","cd7bd560-442c-11f0-9348-b5586772b2fb","pinnedFileId","299f452c-4430-11f0-b0ae-76b3cceeab13","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","35b54dee-ade2-446d-b3bf-dabff6757df5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":53,"_99":100,"_101":24},"branch",{"_13":84,"_31":85,"_42":41,"_86":43,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":44,"_93":94},"isOwned",39,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","DevGoku","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ5REd1bmdlVHpSaU85R1oyTGR0SVFvUGtLSSJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":299,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":300,"_79":301,"_81":302,"_83":24},"tree",[175,182,189,191,192],"files",[175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192],"counts",{"_165":61,"_166":134,"_167":61,"_168":169,"_170":171},"contents",[125,126,127,128,129],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":159,"_31":160,"_29":161,"_133":-5,"_40":41,"_39":162,"_135":57,"_37":163,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":164},{"_42":153,"_31":154,"_29":155,"_133":-5,"_40":41,"_39":156,"_135":57,"_37":157,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":158},{"_42":146,"_31":147,"_29":148,"_133":-5,"_40":41,"_39":149,"_135":57,"_37":150,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_26":152},{"_42":139,"_31":140,"_29":141,"_133":-5,"_40":41,"_39":142,"_135":24,"_37":143,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_26":145},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":57,"_37":136,"_13":61,"_33":34,"_35":104,"_23":24,"_137":-5,"_26":138},"a0834806-442f-11f0-9005-76b3cceeab13","main.tsx","a08348a6-442f-11f0-9005-76b3cceeab13","parentId",1,"latest",["D",1749363179552],"label",[131],"fd35c524-442f-11f0-93cf-76b3cceeab13","README.md","fd35c5e2-442f-11f0-93cf-76b3cceeab13",2,["D",1749363335072],"# AI Tools Directory\n\nA comprehensive, beautifully designed directory of AI tools with a sleek black and icy aesthetic featuring 3D graphics.\n\n## Features\n\n- 🔍 **Smart Search**: Find AI tools by name, category, or functionality\n- 🎨 **Categories**: Video Gen, Image Gen, Text AI, Audio AI, Code AI, and more\n- 🌟 **3D Interface**: Immersive black and icy theme with floating elements\n- ⚡ **Fast Discovery**: Instantly browse and discover new AI tools\n- 📱 **Responsive**: Works perfectly on all devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema and initial data\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ └── tools.ts # API routes for tools\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application\n│ │ ├── ToolCard.tsx # Individual tool display\n│ │ ├── SearchBar.tsx # Search functionality\n│ │ ├── CategoryFilter.tsx # Category filtering\n│ │ └── Scene3D.tsx # 3D background effects\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React entry point\n│ └── style.css # Custom styling\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## Tech Stack\n\n- **Backend**: Hono + SQLite\n- **Frontend**: React 18 + Three.js for 3D effects\n- **Styling**: TailwindCSS + Custom CSS\n- **Database**: SQLite with comprehensive AI tools data\n\n## Getting Started\n\nThe main entry point is `backend/index.ts` which serves both the API and frontend.",[140],"02f3a2b0-4430-11f0-a82e-76b3cceeab13","shared","2f5bc2f0-7b51-4518-be5d-f6af01f93733",3,["D",1749363344704],"directory",[147],"467dc9fc-4430-11f0-857c-76b3cceeab13","frontend","a6b57135-d1c2-4a2c-98cf-1dbd71dedf35",8,["D",1749363458017],[154],"1528818a-4430-11f0-8bf1-76b3cceeab13","backend","c001d08a-777b-408c-a2d9-50520bfd7df1",4,["D",1749363375248],[160],"pulls","branches","forks","envVars",{"_172":61,"_174":61},"connections",{"_172":61,"_173":61},"count","unfilledCount","emptyCount",{"_42":159,"_31":160,"_29":161,"_133":-5,"_40":41,"_39":162,"_135":57,"_37":296,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":297,"_26":298},{"_42":292,"_31":284,"_29":278,"_133":161,"_40":41,"_39":162,"_135":57,"_37":293,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":294,"_26":295},{"_42":285,"_31":286,"_29":287,"_133":278,"_40":41,"_39":162,"_135":24,"_37":288,"_13":61,"_33":34,"_35":289,"_23":24,"_137":-5,"_194":290,"_26":291},{"_42":275,"_31":276,"_29":277,"_133":278,"_40":41,"_39":279,"_135":24,"_37":280,"_13":61,"_33":34,"_35":281,"_23":24,"_137":-5,"_194":282,"_26":283},{"_42":271,"_31":270,"_29":264,"_133":161,"_40":41,"_39":265,"_135":57,"_37":272,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":273,"_26":274},{"_42":261,"_31":262,"_29":263,"_133":264,"_40":41,"_39":265,"_135":24,"_37":266,"_13":61,"_33":34,"_35":267,"_23":24,"_137":-5,"_194":268,"_26":269},{"_42":254,"_31":255,"_29":55,"_133":161,"_40":41,"_39":256,"_135":24,"_37":257,"_13":61,"_33":34,"_35":258,"_23":24,"_137":-5,"_194":259,"_26":260},{"_42":153,"_31":154,"_29":155,"_133":-5,"_40":41,"_39":156,"_135":57,"_37":251,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":252,"_26":253},{"_42":247,"_31":222,"_29":218,"_133":155,"_40":41,"_39":234,"_135":57,"_37":248,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":249,"_26":250},{"_42":239,"_31":240,"_29":241,"_133":218,"_40":41,"_39":242,"_135":57,"_37":243,"_13":61,"_33":34,"_35":244,"_23":24,"_137":-5,"_194":245,"_26":246},{"_42":231,"_31":232,"_29":233,"_133":218,"_40":41,"_39":234,"_135":57,"_37":235,"_13":61,"_33":34,"_35":236,"_23":24,"_137":-5,"_194":237,"_26":238},{"_42":223,"_31":224,"_29":225,"_133":218,"_40":41,"_39":226,"_135":57,"_37":227,"_13":61,"_33":34,"_35":228,"_23":24,"_137":-5,"_194":229,"_26":230},{"_42":217,"_31":32,"_29":30,"_133":218,"_40":41,"_39":14,"_135":57,"_37":219,"_13":61,"_33":34,"_35":36,"_23":24,"_137":-5,"_194":220,"_26":221},{"_42":210,"_31":211,"_29":212,"_133":155,"_40":41,"_39":156,"_135":57,"_37":213,"_13":61,"_33":20,"_35":214,"_23":24,"_137":-5,"_194":215,"_26":216},{"_42":146,"_31":147,"_29":148,"_133":-5,"_40":41,"_39":149,"_135":57,"_37":207,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_194":208,"_26":209},{"_42":200,"_31":201,"_29":202,"_133":148,"_40":41,"_39":149,"_135":57,"_37":203,"_13":61,"_33":34,"_35":204,"_23":24,"_137":-5,"_194":205,"_26":206},{"_42":139,"_31":140,"_29":141,"_133":-5,"_40":41,"_39":142,"_135":24,"_37":197,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_194":198,"_26":199},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":57,"_37":193,"_13":61,"_33":34,"_35":104,"_23":24,"_137":-5,"_194":195,"_26":196},["D",1749363179552],"children",[],[131],["D",1749363335072],[],[140],"02f3928e-4430-11f0-a82e-76b3cceeab13","types.ts","02f39360-4430-11f0-a82e-76b3cceeab13",["D",1749363344704],"// Shared types for the AI Tools Directory\n\nexport interface AITool {\n id: number;\n name: string;\n description: string;\n category: string;\n url: string;\n tags: string[];\n pricing: 'free' | 'freemium' | 'paid';\n featured: boolean;\n rating?: number;\n createdAt: string;\n}\n\nexport interface Category {\n id: string;\n name: string;\n description: string;\n icon: string;\n color: string;\n}\n\nexport interface SearchFilters {\n query?: string;\n category?: string;\n pricing?: string;\n featured?: boolean;\n}\n\nexport const CATEGORIES: Category[] = [\n {\n id: 'video-gen',\n name: 'Video Generation',\n description: 'AI tools for creating and editing videos',\n icon: '🎬',\n color: '#8B5CF6'\n },\n {\n id: 'image-gen',\n name: 'Image Generation',\n description: 'AI tools for creating and editing images',\n icon: '🎨',\n color: '#06B6D4'\n },\n {\n id: 'text-ai',\n name: 'Text & Writing',\n description: 'AI tools for writing, editing, and content creation',\n icon: '✍️',\n color: '#10B981'\n },\n {\n id: 'audio-ai',\n name: 'Audio & Music',\n description: 'AI tools for audio generation and music creation',\n icon: '🎵',\n color: '#F59E0B'\n },\n {\n id: 'code-ai',\n name: 'Code & Development',\n description: 'AI tools for coding and software development',\n icon: '💻',\n color: '#EF4444'\n },\n {\n id: 'chat-ai',\n name: 'Chat & Assistants',\n description: 'AI chatbots and virtual assistants',\n icon: '💬',\n color: '#8B5CF6'\n },\n {\n id: 'design-ai',\n name: 'Design & UI',\n description: 'AI tools for design and user interface creation',\n icon: '🎯',\n color: '#EC4899'\n },\n {\n id: 'data-ai',\n name: 'Data & Analytics',\n description: 'AI tools for data analysis and insights',\n icon: '📊',\n color: '#6366F1'\n }\n];",[],[147,201],["D",1749363344704],[190],[147],"467db5c0-4430-11f0-857c-76b3cceeab13","index.html","467db674-4430-11f0-857c-76b3cceeab13",["D",1749363458017],"\n\n\n \n \n AI Tools Directory - Discover Amazing AI Tools\n \n \n \n 🤖\">\n \n \n \n \n \n \n \n \n \n \n \n\n\n \n

\n \n \n

\n \n \n \n\n",[],[154,211],"6f7083fe-4430-11f0-a36e-76b3cceeab13","69c171a6-4f75-4ddf-b5ac-27cdc056baf7",["D",1749363526719],[],[154,222,32],"components","594a31ba-4430-11f0-930e-76b3cceeab13","SearchBar.tsx","594a3278-4430-11f0-930e-76b3cceeab13",10,["D",1749363489559],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface SearchBarProps {\n onSearch: (query: string) => void;\n placeholder?: string;\n}\n\nexport default function SearchBar({ onSearch, placeholder = \"Search AI tools...\" }: SearchBarProps) {\n const [query, setQuery] = useState(\"\");\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n onSearch(query);\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const value = e.target.value;\n setQuery(value);\n // Real-time search with debouncing\n setTimeout(() => {\n if (value === query) {\n onSearch(value);\n }\n }, 300);\n };\n\n return (\n \n );\n}",[],[154,222,224],"52a583c8-4430-11f0-bcbe-76b3cceeab13","Scene3D.tsx","52a5849a-4430-11f0-bcbe-76b3cceeab13",9,["D",1749363478408],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ndeclare global {\n interface Window {\n THREE: any;\n }\n}\n\nexport default function Scene3D() {\n const canvasRef = useRef(null);\n\n useEffect(() => {\n if (!canvasRef.current || !window.THREE) return;\n\n const canvas = canvasRef.current;\n const scene = new window.THREE.Scene();\n const camera = new window.THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n const renderer = new window.THREE.WebGLRenderer({ canvas, alpha: true });\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(window.devicePixelRatio);\n\n // Create floating ice crystals\n const crystalGeometry = new window.THREE.OctahedronGeometry(0.5, 0);\n const crystalMaterial = new window.THREE.MeshBasicMaterial({\n color: 0x00d4ff,\n transparent: true,\n opacity: 0.6,\n wireframe: true\n });\n\n const crystals: any[] = [];\n for (let i = 0; i < 50; i++) {\n const crystal = new window.THREE.Mesh(crystalGeometry, crystalMaterial);\n crystal.position.x = (Math.random() - 0.5) * 100;\n crystal.position.y = (Math.random() - 0.5) * 100;\n crystal.position.z = (Math.random() - 0.5) * 100;\n crystal.rotation.x = Math.random() * Math.PI;\n crystal.rotation.y = Math.random() * Math.PI;\n crystal.userData = {\n rotationSpeed: {\n x: (Math.random() - 0.5) * 0.02,\n y: (Math.random() - 0.5) * 0.02,\n z: (Math.random() - 0.5) * 0.02\n },\n floatSpeed: Math.random() * 0.01 + 0.005\n };\n scene.add(crystal);\n crystals.push(crystal);\n }\n\n // Create particle system\n const particleCount = 200;\n const particles = new window.THREE.BufferGeometry();\n const positions = new Float32Array(particleCount * 3);\n const colors = new Float32Array(particleCount * 3);\n\n for (let i = 0; i < particleCount * 3; i += 3) {\n positions[i] = (Math.random() - 0.5) * 200;\n positions[i + 1] = (Math.random() - 0.5) * 200;\n positions[i + 2] = (Math.random() - 0.5) * 200;\n\n // Ice blue colors\n colors[i] = 0; // R\n colors[i + 1] = 0.8 + Math.random() * 0.2; // G\n colors[i + 2] = 1; // B\n }\n\n particles.setAttribute('position', new window.THREE.BufferAttribute(positions, 3));\n particles.setAttribute('color', new window.THREE.BufferAttribute(colors, 3));\n\n const particleMaterial = new window.THREE.PointsMaterial({\n size: 2,\n vertexColors: true,\n transparent: true,\n opacity: 0.8\n });\n\n const particleSystem = new window.THREE.Points(particles, particleMaterial);\n scene.add(particleSystem);\n\n camera.position.z = 30;\n\n // Animation loop\n let animationId: number;\n const animate = () => {\n animationId = requestAnimationFrame(animate);\n\n // Rotate crystals\n crystals.forEach(crystal => {\n crystal.rotation.x += crystal.userData.rotationSpeed.x;\n crystal.rotation.y += crystal.userData.rotationSpeed.y;\n crystal.rotation.z += crystal.userData.rotationSpeed.z;\n \n // Floating motion\n crystal.position.y += Math.sin(Date.now() * crystal.userData.floatSpeed) * 0.01;\n });\n\n // Rotate particle system\n particleSystem.rotation.y += 0.001;\n particleSystem.rotation.x += 0.0005;\n\n // Camera movement based on mouse (if mouse position is available)\n const time = Date.now() * 0.0005;\n camera.position.x = Math.cos(time) * 5;\n camera.position.y = Math.sin(time * 0.7) * 3;\n camera.lookAt(0, 0, 0);\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n // Handle window resize\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n // Mouse interaction\n const handleMouseMove = (event: MouseEvent) => {\n const mouseX = (event.clientX / window.innerWidth) * 2 - 1;\n const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;\n \n camera.position.x += (mouseX * 10 - camera.position.x) * 0.05;\n camera.position.y += (mouseY * 10 - camera.position.y) * 0.05;\n };\n\n window.addEventListener('mousemove', handleMouseMove);\n\n // Cleanup\n return () => {\n cancelAnimationFrame(animationId);\n window.removeEventListener('resize', handleResize);\n window.removeEventListener('mousemove', handleMouseMove);\n renderer.dispose();\n };\n }, []);\n\n return

\n {tool.name}\n

\n 🏷️\n Categories\n

{category.name}

Diff · v12