README.md

---
title: Likable
emoji: 💗
colorFrom: pink
colorTo: purple
pinned: true
sdk: docker
app_port: 7860
license: apache-2.0
short_description: It's almost lovable...
authors:
  - name: HelmholtzWason
    url: https://huggingface.co/HelmholtzWatson
  - name: zwischenraum
    url: https://huggingface.co/zwischenraum
tags:
  - agent-demo-track
---
# 💗 Likable: It's almost lovable...

[![Hugging Face Spaces](https://img.shields.io/badge/🤗%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/ZwischenholtzW/likable)
[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

**Build Gradio apps, using only a chat interface.**

We've built the app we wish we had at the start of the [Gradio Agents & MCP Hackathon 2025](https://huggingface.co/Agents-MCP-Hackathon); a Gradio app to build Gradio apps, almost like our favorite Swedish AI startup.

Just describe the application you want to build, and watch as the AI agent writes the code, handles dependencies, and spins up a live, interactive preview for you in real-time. It's the fastest way to go from idea to a working Gradio app.

---

## ⚠️ IMPORTANT
**Please note:** This public demo space is shared among all users - everyone sees the same app and shares the same API key. For this reason, we've disabled the settings tab and are using a free version of DeepSeek V3 from OpenRouter.

**For private use or if you encounter rate limits**, we recommend duplicating this space to your own account and configuring it with your personal API keys, by either using Space sectres or uncommenting line 742-784 and 806-817 in `src/app.py` to enable the settings tab.


## 🎥 Video Demo

<iframe width="560" height="315" src="https://www.youtube.com/embed/vVy8bv4R1HA?si=Ds6sRTDwNE7QRJFa" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

[![Likable Demo Video](https://img.youtube.com/vi/vVy8bv4R1HA/0.jpg)](https://youtu.be/vVy8bv4R1HA)

*https://youtu.be/vVy8bv4R1HA*


## ✨ Features

- **🤖 Conversational AI Development**: Simply chat with the agent to build, modify, and extend your Gradio applications.
- **⚡ Real-time Live Preview**: The agent automatically runs your application in a sandboxed environment, and you can interact with it instantly in the "Preview" tab.
- **📝 In-App Code Editor**: View, edit, and save the code generated by the agent directly within the "Code" tab.
- **🛠️ Autonomous Tool Use**: The agent can:
    - Create and edit Python files.
    - Install necessary Python packages using `pip`.
    - List and view files to understand the project context.
    - Test the generated code to ensure it runs without errors.
- **🔐 Secure API Key Management**: Easily configure API keys for various LLM providers through the "Settings" tab.
- **🔄 Multi-Provider Support**: Supports almost all sponsors of the hackathon and works with OpenAI, Anthropic, Mistral, and Huggingface.

---

## 🚀 Getting Started (Local Development)

Likable is designed to run in a Docker container, mirroring its Hugging Face Spaces environment.

**Prerequisites:**
- [Docker](https://www.docker.com/get-started) installed on your system.
- Git.

**1. Clone the repository:**
```bash
git clone https://huggingface.co/spaces/ZwischenholtzW/likable
cd likable
```

**2. Create your environment file:**
Create a `.env` file in the root of the project. This is where you'll put your API key.
```bash
cp .env.example .env
```
Now, open `.env` and add your API key:
```dotenv
# .env
API_KEY="your_secret_api_key_here"
MODEL_ID="anthropic/claude-sonnet-4-20250514"
```

**3. Build and run the Docker container:**
```bash
docker build -t likable-app .
docker run -p 7860:7860 --env-file .env likable-app
```

**4. Open the application:**
Navigate to [http://127.0.0.1:7860](http://127.0.0.1:7860) in your web browser.

---

## 🛠️ How It Works

Likable leverages `smolagents` for its AI agent. The workflow is as follows:

1.  **User Prompt**: You provide a task in the chat interface (e.g., "Create a simple calculator app").
2.  **Agent Execution**: The agent receives the prompt and uses its available tools (`create_new_file`, `python_editor`, `install_package`, `test_app_py`) to accomplish the task. All generated code is created inside a secure `sandbox` directory.
3.  **Code Generation**: The agent writes or modifies an `app.py` file within the sandbox. It is critically instructed to include the necessary boilerplate to make the app launchable.
4.  **Live Preview Subprocess**: The main application detects changes to `sandbox/app.py` and launches it in a separate, isolated subprocess.
5.  **Iframe Display**: The running Gradio app is served on an internal port and displayed to the user through an iframe in the "Preview" tab, with cache-busting to ensure the latest version is always shown.

This cycle repeats as you provide more instructions, allowing for iterative and interactive development.

---

## 💻 Technology Stack

- **Backend & UI**: [Gradio](https://www.gradio.app/)
- **AI Agent Framework**: [smol-agents](https://github.com/smol-ai/developer)
- **LLM Integration**: [LiteLLM](https://github.com/BerriAI/litellm)
- **Containerization**: [Docker](https://www.docker.com/)
- **Code Quality**: `ruff` and `pre-commit`

---

## 📜 License

This project is licensed under the [Apache 2.0 License](LICENSE).