README.md

---
title: WebAgentTools
emoji: 🛠️
colorFrom: blue
colorTo: purple
sdk: gradio
sdk_version: "4.19.2"
app_file: app.py
pinned: false
---

# WebAgentTools

A web-based agent tools interface for interacting with various AI tools and services.

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

# LangGraph Agent with Tools

This project demonstrates a conversational AI agent built with LangGraph, featuring three integrated tools and a responsive web UI.

## Features

- 🤖 LangGraph-powered conversational agent
- 🔧 Three integrated tools:
  - Web search (simulated)
  - Mathematical calculator
  - Image prompt generator
- 💬 Real-time chat interface with WebSocket communication
- 🎨 Clean, responsive UI
- 🚀 Ready to deploy on Hugging Face Spaces

## How to Run Locally

1. Clone this repository
2. Install the dependencies:
   ```
   pip install -r requirements.txt
   ```
3. Create a `.env` file in the root directory with your OpenAI API key:
   ```
   OPENAI_API_KEY=your_api_key_here
   ```
4. Run the application:
   ```
   python app.py
   ```
5. Open your browser and navigate to `http://localhost:8000`

## Project Structure

```
.
├── app.py             # Main application file with FastAPI and LangGraph
├── index.html         # HTML frontend
├── static/            # Static assets
│   ├── styles.css     # CSS styling
│   └── script.js      # JavaScript for WebSocket and UI
├── requirements.txt   # Python dependencies
└── README.md          # Documentation
```

## Deploying to Hugging Face Spaces

1. Create a new Space on Hugging Face with the Spaces SDK
2. Choose the "Dockerfile" option for maximum flexibility
3. Push this code to your GitHub repository
4. Connect your Hugging Face Space to the GitHub repository
5. Add your OpenAI API key as a secret in the Space settings
6. Deploy!

## How to Use

1. Type a message in the input field and press Enter or click Send
2. Ask questions that might require:
   - Searching for information
   - Calculating mathematical expressions
   - Generating prompts for image creation
3. The agent will automatically select the appropriate tool based on your request

## Customization

- Add more tools by creating new tool functions in `app.py`
- Customize the UI by modifying `index.html` and `styles.css`
- Adjust the agent's behavior by editing the system prompt in `app.py`

## License

MIT