AI Personal Learning
and practical guidance

Tap4 AI WebUI: open source lightweight AI tool navigation project

General Introduction

Tap4 AI WebUI is an open source lightweight AI tool navigation website project , designed to help users easily build their own AI tool catalog. The project uses Next.js and Supabase technology stack , support for multi-language SEO optimization , to provide classification of AI tools filtering , search and detailed display functions , with the Tap4 AI Crawler project to support the automation of crawling web pages . Whether you are an AI enthusiast or a developer, you can quickly build your own AI tool navigation site through this project.

Tap4 AI WebUI: open source lightweight AI tool navigation project

Function List

  • AI tool list display: support to display rich AI tool information
  • Categorized filtering: support for browsing AI tools by category
  • Search function: Provide AI tool search function
  • Detailed presentation: support for presenting AI tools in Markdown format Detailed presentation
  • SEO Friendly: Multi-language support for SEO optimization

Using Help

Installation process

  1. Deployment of Tap4 AI Crawler::
    • The first thing you need to do is deploy Tap4 AI Crawler Project. Once deployed, you can use the platform domain name or a custom domain name as the API interface for generating AI tool web content.
    • Tap4.AI Crawler Function:Website automatic screenshot and upload to Cloudflare R2.Support crawling website details and generating website title, description and specific introduction in Markdown format by AI.
  2. Creating a Supabase database and executing SQL scripts::
    • Register with Supabase and create a database, recording the SUPABASE_URL and SUPABASE_ANON_KEY for subsequent Vercel environment variable configuration.
    • Execute the SQL files in the project db directory in the Supabase backend: create_table.sql, insert_category_data.sql, insert_data.sql.
  3. Deployment on Vercel::
    • strike (on the keyboard)here (literary), follow the prompts to deploy. Note: Don't forget to set environment variables!
    • Example of environment variable configuration:
      NEXT_PUBLIC_SITE_URL="https://tap4.ai"
      GOOGLE_TRACKING_ID="G-XXXXXXX"
      GOOGLE_ADSENSE_URL="https://xxxx.googlesyndication.com/xxxxx/xxxxx"
      CONTACT_US_EMAIL="contact@tap4.ai"
      NEXT_PUBLIC_SUPABASE_URL="https://xxxyyyzzz.supabase.co"
      NEXT_PUBLIC_SUPABASE_ANON_KEY="XXX.YYY.ZZZ"
      CRAWLER_API="https://{crawler_domain}/site/crawl_async"
      CRAWLER_API_KEY="xxxx"
      CRON_AUTH_KEY="keyxxxx"
      SUBMIT_AUTH_KEY="xxxx"
      

 

  1. local operation::
    • Cloning Project:git clone https://github.com/6677-ai/tap4-ai-webui.git
    • Install the dependencies:Node NVM PNPM
    • Setting Environment Variables: Create the root directory.env.localfile, fill in the values of the corresponding environment variables
    • Run the development model:pnpm dev
  2. Content Updates::
    • Manual modification of the database: directly modify the web_navigation table data in Supabase
    • Crawler auto-update: if the crawler fails, you can manually query the submit table, then create relevant website content and insert it into the web_navigation table

May not be reproduced without permission:Chief AI Sharing Circle " Tap4 AI WebUI: open source lightweight AI tool navigation project

Chief AI Sharing Circle

Chief AI Sharing Circle specializes in AI learning, providing comprehensive AI learning content, AI tools and hands-on guidance. Our goal is to help users master AI technology and explore the unlimited potential of AI together through high-quality content and practical experience sharing. Whether you are an AI beginner or a senior expert, this is the ideal place for you to gain knowledge, improve your skills and realize innovation.

Contact Us
en_USEnglish