Skip to content

Aliemeka/ai-tools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

AI Tools Directory

A comprehensive, open-source directory of AI tools for professionals. Built with Astro, TypeScript, and Tailwind CSS.

License: MIT Built with Astro

✨ Features

  • 40+ AI Tools: Curated collection of the best AI tools across different categories
  • Advanced Filtering: Filter by pricing (free, freemium, paid) and source type (open-source, closed-source)
  • Smart Search: Real-time search across tool names, descriptions, and tags
  • Sorting Options: Sort by rating, name, or category
  • Category Navigation: Browse tools by categories like Chat, Code Assistants, Image Generation, etc.
  • Responsive Design: Beautiful, mobile-first design with fuchsia accent theme
  • Open Source: MIT licensed for maximum community contribution

πŸš€ Live Demo

Visit the live site at: aiworktools.vercel.app

πŸ› οΈ Tech Stack

πŸ“‚ Project Structure

/
β”œβ”€β”€ public/                 # Static assets
β”‚   └── images/
β”‚       └── tools/         # Tool logos and icons
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ components/        # Reusable components
β”‚   β”‚   β”œβ”€β”€ CategoryFilter.astro
β”‚   β”‚   β”œβ”€β”€ SearchBar.astro
β”‚   β”‚   └── ToolGrid.astro
β”‚   β”œβ”€β”€ content/
β”‚   β”‚   β”œβ”€β”€ config.ts     # Content collection schema
β”‚   β”‚   └── tools/        # Tool entries (Markdown)
β”‚   β”œβ”€β”€ layouts/          # Page layouts
β”‚   β”‚   β”œβ”€β”€ BaseLayout.astro
β”‚   β”‚   └── ToolLayout.astro
β”‚   β”œβ”€β”€ pages/            # Routes
β”‚   β”‚   β”œβ”€β”€ index.astro   # Homepage
β”‚   β”‚   β”œβ”€β”€ tools.astro   # All tools page
β”‚   β”‚   └── tools/[slug].astro # Individual tool pages
β”‚   └── styles/
β”‚       └── global.css    # Global styles and custom classes
β”œβ”€β”€ LICENSE               # MIT License
└── README.md

πŸƒβ€β™‚οΈ Getting Started

Prerequisites

  • Node.js 18+
  • pnpm (recommended) or npm

Installation

  1. Clone the repository

    git clone https://github.com/Aliemeka/ai-tools.git
    cd ai-tools-directory
  2. Install dependencies

    pnpm install
  3. Start the development server

    pnpm dev
  4. Open your browser

    http://localhost:3000
    

🧞 Commands

Command Action
pnpm install Install dependencies
pnpm dev Start local dev server at localhost:3000
pnpm build Build production site to ./dist/
pnpm preview Preview your build locally

βž• Adding New Tools

To add a new AI tool to the directory:

  1. Create a new Markdown file in src/content/tools/

    touch src/content/tools/your-tool-name.md
  2. Add the frontmatter and content

    ---
    title: "Your Tool Name"
    description: "Brief description of what the tool does"
    category: "chat" # chat, code-assistant, image-generation, etc.
    subcategory: "conversational-ai"
    pricing: "freemium" # free, freemium, paid
    source: "closed-source" # open-source, closed-source
    website: "https://yourtool.com"
    logo: "/images/tools/yourtool.svg"
    tags: ["ai", "productivity", "automation"]
    features:
      - "Feature 1"
      - "Feature 2"
    pricing_details:
      free: "Free tier description"
      paid: "Paid tier description"
    api_available: true
    mobile_app: false
    integrations: ["API", "Slack", "Discord"]
    last_updated: "2025-07-10"
    rating: 4.5
    user_count: "1M+"
    ---
    
    ## Overview
    
    Detailed description of the tool...
    
    ## Key Features
    
    - Feature descriptions...
    
    ## Use Cases
    
    - Use case examples...
    
    ## Pricing
    
    - Pricing information...
  3. Add the tool logo to public/images/tools/

  4. Test locally and submit a pull request!

🎨 Design System

  • Primary Color: Fuchsia (#c026d3)
  • Text Colors: Slate scale (slate-900, slate-600, etc.)
  • Fonts:
    • Headings: Instrument Serif
    • Body: Outfit
  • Spacing: Tailwind's spacing scale
  • Shadows: Subtle shadows with hover effects

🀝 Contributing

We welcome contributions! Here's how you can help:

  • Add new tools: Follow the guide above
  • Improve existing entries: Update descriptions, pricing, features
  • Fix bugs: Report issues or submit fixes
  • Enhance features: Suggest new filtering options or UI improvements
  • Update documentation: Help improve this README

Contribution Guidelines

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Make your changes
  4. Test locally (pnpm dev)
  5. Commit your changes (git commit -m 'Add amazing feature')
  6. Push to the branch (git push origin feature/amazing-feature)
  7. Open a Pull Request

πŸ“„ License

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

πŸ™ Acknowledgments


Star ⭐ this repo if you find it helpful!

About

A comprehensive, open-source directory of AI tools for professionals.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published