AI Research Agent - Next.js Edition

A production-ready, full-stack research assistant built with Next.js 14, TypeScript, and Tailwind CSS. This application leverages OpenAI's GPT models and Firecrawl's deep research capabilities to perform comprehensive web research on any topic.

🚀 Features

• Deep Web Research: Automatically searches the web, extracts content, and synthesizes findings using Firecrawl
• AI-Powered Enhancement: Uses OpenAI GPT-4 to elaborate on research findings with additional context and insights
• Modern UI: Beautiful, responsive interface built with Tailwind CSS and React
• Type-Safe: Full TypeScript support for better developer experience
• Production Ready: Optimized for performance with Next.js App Router and Server Components
• Downloadable Reports: Export research findings as markdown files
• Secure API Key Management: Client-side API key storage with localStorage
• Dark Mode Support: Automatic dark mode based on system preferences

🛠️ Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• AI: OpenAI GPT-4 Turbo
• Web Scraping: Firecrawl Deep Research API
• Deployment Ready: Vercel, Netlify, or any Node.js hosting

📋 Prerequisites

• Node.js 18+ and npm/yarn/pnpm
• OpenAI API key (Get one here)
• Firecrawl API key (Get one here)

🏗️ Installation

1. Clone the repository:

   git clone <your-repo-url>
   cd ai-research-agent

2. Install dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables (optional): Create a .env.local file in the root directory:

   OPENAI_API_KEY=your_openai_api_key_here
   FIRECRAWL_API_KEY=your_firecrawl_api_key_here

   Note: API keys can also be configured directly in the UI. They are stored securely in your browser's localStorage.

4. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

5. Open your browser: Navigate to http://localhost:3000

📖 Usage

1. Configure API Keys:

   • Click on "API Configuration" in the sidebar
   • Enter your OpenAI API key
   • Enter your Firecrawl API key
   • Keys are automatically saved to your browser's localStorage

2. Enter Research Topic:

   • Type your research question or topic in the input field
   • Examples:

• "Latest developments in quantum computing"
• "Impact of climate change on marine ecosystems"
• "Advancements in renewable energy storage"

3. Start Research:

   • Click the "Start Research" button
   • The application will:
     1. Use Firecrawl to perform deep web research
     2. Generate an initial research report
     3. Enhance the report with GPT-4 for additional insights
     4. Display the enhanced report

4. Download Report:

   • Click "Download Report" to save the research as a markdown file

🏛️ Project Structure

ai-research-agent/
├── app/
│   ├── api/
│   │   └── research/
│   │       └── route.ts          # API endpoint for research
│   ├── globals.css               # Global styles
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Main page component
├── components/
│   ├── ApiKeyConfig.tsx          # API key configuration component
│   ├── ResearchForm.tsx          # Research input form
│   └── ResearchResults.tsx       # Results display component
├── public/                       # Static assets
├── .gitignore                    # Git ignore rules
├── next.config.js                # Next.js configuration
├── package.json                  # Dependencies
├── postcss.config.js             # PostCSS configuration
├── tailwind.config.ts            # Tailwind CSS configuration
├── tsconfig.json                 # TypeScript configuration
└── README.md                     # This file

🔧 Configuration

Environment Variables

You can optionally set environment variables in .env.local:

• OPENAI_API_KEY: Your OpenAI API key
• FIRECRAWL_API_KEY: Your Firecrawl API key
• NEXT_PUBLIC_APP_URL: Your application URL (for production)

Research Parameters

The research parameters are configured in app/api/research/route.ts:

• maxDepth: Maximum depth for web crawling (default: 3)
• timeLimit: Maximum time for research in seconds (default: 180)
• maxUrls: Maximum number of URLs to crawl (default: 10)

You can modify these values in the deepResearch function call.

🚢 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify: Use the Next.js build preset
• Railway: Connect your GitHub repo
• AWS Amplify: Configure for Next.js
• Docker: Use the included Dockerfile (if added)

Build command: npm run build Start command: npm start

🔒 Security Considerations

• API keys are stored in the browser's localStorage (client-side only)
• API keys are never exposed in the client-side code
• All API calls are made server-side through Next.js API routes
• Consider implementing user authentication for production use
• Use environment variables for server-side API keys in production

🧪 Development

Type Checking

npm run type-check

Linting

npm run lint

Building for Production

npm run build

Running Production Build

npm start

📝 API Reference

POST /api/research

Performs deep research on a given topic.

Request Body:

{
  "topic": "Your research topic",
  "openaiApiKey": "sk-...",
  "firecrawlApiKey": "fc-..."
}

Response:

{
  "report": "Enhanced research report in markdown format"
}

Error Response:

{
  "error": "Error message"
}

🐛 Troubleshooting

Research fails with API errors

• Verify your API keys are correct
• Check your API key quotas and limits
• Ensure you have sufficient credits in your OpenAI and Firecrawl accounts

Build errors

• Ensure Node.js version is 18 or higher
• Delete node_modules and .next folders, then reinstall dependencies
• Check TypeScript errors with npm run type-check

API route not found

• Ensure you're using Next.js 14+ with App Router
• Check that the file structure matches the expected layout

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• OpenAI for the GPT models
• Firecrawl for web scraping capabilities
• Next.js for the amazing framework
• Tailwind CSS for the styling framework

📚 Additional Resources

• Next.js Documentation
• OpenAI API Documentation
• Firecrawl Documentation
• TypeScript Documentation

---

Built with ❤️ using Next.js, TypeScript, and modern web technologies.