AI Tools Directory - Discover Amazing AI Tools

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_285":286,"_287":288},"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",10,"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/SearchBar.tsx","latestPath","fileId","594a3278-4430-11f0-930e-76b3cceeab13","name","SearchBar.tsx","fileType","script","content","/** @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}","createdAt",["D",1749363489559],"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":281,"_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":282,"_79":283,"_81":284,"_83":24},"tree",[175,182,187,189,190],"files",[175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"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":278,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":279,"_26":280},{"_42":274,"_31":266,"_29":260,"_133":161,"_40":41,"_39":162,"_135":57,"_37":275,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":276,"_26":277},{"_42":267,"_31":268,"_29":269,"_133":260,"_40":41,"_39":162,"_135":24,"_37":270,"_13":61,"_33":34,"_35":271,"_23":24,"_137":-5,"_192":272,"_26":273},{"_42":257,"_31":258,"_29":259,"_133":260,"_40":41,"_39":261,"_135":24,"_37":262,"_13":61,"_33":34,"_35":263,"_23":24,"_137":-5,"_192":264,"_26":265},{"_42":253,"_31":252,"_29":246,"_133":161,"_40":41,"_39":247,"_135":57,"_37":254,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":255,"_26":256},{"_42":243,"_31":244,"_29":245,"_133":246,"_40":41,"_39":247,"_135":24,"_37":248,"_13":61,"_33":34,"_35":249,"_23":24,"_137":-5,"_192":250,"_26":251},{"_42":236,"_31":237,"_29":55,"_133":161,"_40":41,"_39":238,"_135":24,"_37":239,"_13":61,"_33":34,"_35":240,"_23":24,"_137":-5,"_192":241,"_26":242},{"_42":153,"_31":154,"_29":155,"_133":-5,"_40":41,"_39":156,"_135":57,"_37":233,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":234,"_26":235},{"_42":229,"_31":220,"_29":216,"_133":155,"_40":41,"_39":224,"_135":57,"_37":230,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":231,"_26":232},{"_42":221,"_31":222,"_29":223,"_133":216,"_40":41,"_39":224,"_135":57,"_37":225,"_13":61,"_33":34,"_35":226,"_23":24,"_137":-5,"_192":227,"_26":228},{"_42":215,"_31":32,"_29":30,"_133":216,"_40":41,"_39":14,"_135":57,"_37":217,"_13":61,"_33":34,"_35":36,"_23":24,"_137":-5,"_192":218,"_26":219},{"_42":208,"_31":209,"_29":210,"_133":155,"_40":41,"_39":156,"_135":57,"_37":211,"_13":61,"_33":20,"_35":212,"_23":24,"_137":-5,"_192":213,"_26":214},{"_42":146,"_31":147,"_29":148,"_133":-5,"_40":41,"_39":149,"_135":57,"_37":205,"_13":61,"_33":151,"_35":-5,"_23":24,"_137":-5,"_192":206,"_26":207},{"_42":198,"_31":199,"_29":200,"_133":148,"_40":41,"_39":149,"_135":57,"_37":201,"_13":61,"_33":34,"_35":202,"_23":24,"_137":-5,"_192":203,"_26":204},{"_42":139,"_31":140,"_29":141,"_133":-5,"_40":41,"_39":142,"_135":24,"_37":195,"_13":61,"_33":20,"_35":144,"_23":24,"_137":-5,"_192":196,"_26":197},{"_42":130,"_31":131,"_29":132,"_133":-5,"_40":41,"_39":134,"_135":57,"_37":191,"_13":61,"_33":34,"_35":104,"_23":24,"_137":-5,"_192":193,"_26":194},["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,199],["D",1749363344704],[188],[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,209],"594a31ba-4430-11f0-930e-76b3cceeab13","69c171a6-4f75-4ddf-b5ac-27cdc056baf7",["D",1749363489559],[],[154,220,32],"components","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

Diff · v10