Hugging Face's logo

Spaces:
Agents-MCP-Hackathon
/
likable
Running

App Files Community
1
likable / README.md
HelmholtzWatson's picture
HelmholtzWatson
Update README.md
882c331 verified
preview code
|
raw
history blame contribute delete
5.57 kB
metadata
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 License: 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; 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

Likable Demo Video

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 installed on your system.
  • Git.

1. Clone the repository:

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.

cp .env.example .env

Now, open .env and add your API key:

# .env
API_KEY="your_secret_api_key_here"
MODEL_ID="anthropic/claude-sonnet-4-20250514"

3. Build and run the Docker container:

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 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

📜 License

This project is licensed under the Apache 2.0 License.