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

AI Easy Learning

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>
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