---
title: Chat UI Helper
emoji: 💻
colorFrom: gray
colorTo: red
sdk: gradio
app_file: app.py
pinned: true
thumbnail: >-
  https://cdn-uploads.huggingface.co/production/uploads/65a0caa15dfd8b9b1f3aa3d3/8cruZmIioPrYoTN8o-wcE.png
short_description: Configure, download, and deploy a simple chat interface
license: gpl-3.0
sdk_version: 5.37.0
---

# Chat UI Helper

A Gradio-based tool for generating and configuring chat interfaces for HuggingFace Spaces. Create deployable packages with custom assistants and web scraping capabilities.

## Features

### Spaces Configuration
- **Custom Assistant Creation**: Define role, purpose, audience, and tasks
- **Template System**: Choose from research assistant template or build from scratch  
- **Tool Integration**: Optional dynamic URL fetching
- **Access Control**: Secure access code protection for educational use
- **Complete Deployment Package**: Generates app.py, requirements.txt, and config.json

### Chat Support
- **Expert Guidance**: Get personalized help with Gradio configurations
- **Context-Aware**: URL grounding for informed responses about HuggingFace Spaces
- **Deployment Assistance**: Troubleshooting and best practices

## Quick Start

### Running Locally
```bash
pip install -r requirements.txt
python app.py
```

### For Chat Support (Optional)
Set your OpenRouter API key as a secret:
- Go to Settings → Variables and secrets
- Add secret: `OPENROUTER_API_KEY`

## Generated Space Features

Each generated space includes:
- **OpenRouter API Integration**: Support for multiple LLM models
- **Web Scraping**: Simple HTTP requests with BeautifulSoup for URL content fetching
- **Access Control**: Environment-based student access codes
- **Modern UI**: Gradio 5.x ChatInterface with proper message formatting

## Architecture

- **Main Application**: `app.py` with three-tab interface
- **Web Scraping**: HTTP requests with BeautifulSoup for content extraction
- **Template Generation**: Complete HuggingFace Space creation

For detailed development guidance, see [CLAUDE.md](CLAUDE.md).