⬡ Hub
Skip to content

search-ai-agent

Search AI Agent

This is a simple AI search agent built with Next.js, TypeScript, and Tailwind CSS. It allows you to enter a search query, which is then sent to a backend API. The backend then uses a search tool to find relevant information and returns the results to the frontend.

Features

  • Simple, clean UI with a search bar and results area.
  • Backend API that can be extended to use various search tools.
  • Built with modern technologies like Next.js, TypeScript, and Tailwind CSS.

Getting Started

To get started, you'll need to have Node.js and npm installed on your machine. Then, follow these steps:

  1. Clone this repository to your local machine.
  2. Install the dependencies by running npm install in the project directory. This will install puppeteer for web scraping.
  3. Google Custom Search API Setup (Optional):
    • If you wish to use the Google Custom Search API (for higher query limits before falling back to DuckDuckGo), you'll need to:
      1. Create a Google Cloud Platform project.
      2. Enable the Custom Search API.
      3. Obtain an API key.
      4. Create a Custom Search Engine and get its ID.
      5. Set these as environment variables: bash GOOGLE_API_KEY=YOUR_GOOGLE_API_KEY GOOGLE_CSE_ID=YOUR_GOOGLE_CSE_ID (Note: The current implementation has a mocked Google API call that always falls back to DuckDuckGo. You'll need to uncomment the actual Google API call in src/app/utils/search.ts to use this functionality.)
  4. Start the development server by running npm run dev.
  5. Open your browser and navigate to http://localhost:3000.

How it Works

The application is divided into two main parts: the frontend and the backend.

Frontend

The frontend is built with React and Next.js. It consists of a single page (src/app/page.tsx) that contains the search bar and the results area. When the user enters a query and clicks the search button, the handleSearch function is called. This function sends a POST request to the /api/search endpoint with the search query in the request body.

Backend

The backend is built with Next.js API routes. The /api/search endpoint (src/app/api/search/route.ts) receives the search query from the frontend. It then calls the google_web_search function from src/app/utils/search.ts to perform the search. The results are then returned to the frontend as a JSON response.

Extending the Agent

This is a very basic implementation of a search agent. You can extend it in many ways, such as:

  • Adding more search sources: You can add more search tools to the backend, such as YouTube, blogs, or social media.
  • Improving the UI: You can improve the UI by adding features like pagination, filtering, and sorting.
  • Adding more features: You can add more features to the agent, such as the ability to save search results, or to share them with others.

Files and Subdirectories