🌤️ Multi-Modal Chatbot with Weather Integration

A modern AI-powered chatbot application built with Next.js, TailwindCSS, and @ai-sdk/react, featuring real-time weather forecasting, file uploads, and a sleek chat interface.

---

Preview

---

🚀 Features

• 🤖 AI Chat Assistant: Powered by OpenAI for intelligent and contextual conversations.
• 🌦️ Real-Time Weather Forecasting: Integrated with WeatherAPI.com to fetch live weather updates.
• 📎 File and Image Uploads: Supports file attachments and image previews in chat.
• 📬 Markdown Support: Chat messages support Markdown for rich text formatting.
• 🛠️ Tool Execution: Built-in tool execution using tool() from ai with zod schema validation.
• 🎨 Responsive Design: Fully responsive UI built with TailwindCSS.

---

🛠️ Tech Stack

• Framework: Next.js
• Styling: TailwindCSS
• AI SDK: @ai-sdk/react
• Weather API: WeatherAPI.com
• Validation: Zod

---

📁 Folder Structure

├── src/ │ ├── app/ │ │ ├── api/ │ │ │ └── chat/ │ │ │ └── route.ts # API route for chat functionality │ │ ├── layout.tsx # Root layout for the app │ │ └── page.tsx # Main chat page │ ├── lib/ │ │ └── tools.ts # Weather tool integration │ └── styles/ │ └── globals.css # Global styles ├── public/ # Static assets ├── .env # Environment variables ├── README.md # Project documentation └── package.json # Project dependencies

---

🏁 Getting Started

Follow these steps to set up and run the project locally.

---

✅ Prerequisites

Make sure you have the following installed:

• Node.js (v18 or higher recommended)
• pnpm

---

📦 Install Dependencies

Clone the repository and install the required packages:

git clone https://github.com/your-username/ai-weather-chat.git
cd ai-weather-chat
pnpm install

🔐 Set Up Environment Variables

Create a .env file in the root of the project:

touch .env

Add your WeatherAPI key:

WEATHER_API_KEY=your_weatherapi_key_here

🔑 You can get a free API key from https://www.weatherapi.com

▶️ Run the Development Server

Start the development server:

pnpm dev

The app should now be running at:

http://localhost:3000

🤝 Contributing

Contributions are welcome! Please follow these steps:

• Fork the repository.
• Create a new branch: git checkout -b feature-name.
• Commit your changes: git commit -m 'Add feature'.
• Push to the branch: git push origin feature-name.
• Open a pull request.

📧 Contact

For questions or support, please contact ganapathipriyadharsani@gmail.com