README.md

metadata

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