gradio

name	gradio
description	Build Gradio web UIs and demos in Python. Use when creating, modifying, debugging, or answering questions about Gradio and its capabilties, components, event listeners, or layouts.

Gradio

Gradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.

References

• references/examples.md - Illustrative examples showcasing the core Gradio API.
• references/api-signatures.md - API signatures of commonly used components.
• references/event-listeners.md - API signatures of events supported by each component.

Guides

Detailed guides on specific topics (read these when relevant):

• Quickstart
• The Interface Class
• Blocks and Event Listeners
• Controlling Layout
• More Blocks Features
• Custom CSS and JS
• Streaming Outputs
• Streaming Inputs
• Sharing Your App
• Custom HTML Components
• Workflows
• Getting Started with the Python Client
• Getting Started with the JS Client

Core Patterns

Interface (high-level): wraps a function with input/output components.

import gradio as gr

def greet(name):
    return f"Hello {name}!"

gr.Interface(fn=greet, inputs="text", outputs="text").launch()

Blocks (low-level): flexible layout with explicit event wiring.

import gradio as gr

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Greeting")
    btn = gr.Button("Greet")
    btn.click(fn=lambda n: f"Hello {n}!", inputs=name, outputs=output)

demo.launch()

ChatInterface: high-level wrapper for chatbot UIs.

import gradio as gr

def respond(message, history):
    return f"You said: {message}"

gr.ChatInterface(fn=respond).launch()

Workflow: builds a visual, node-based pipeline from Hugging Face Spaces, models, datasets, and Python functions. gr.Workflow is a standalone app, so do not create it inside a gr.Blocks context.

import gradio as gr

def clean(text: str) -> str:
    return text.strip().lower()

def tag(text: str) -> str:
    return f"[processed] {text}"

gr.Workflow(
    bind={"clean": clean, "tag": tag},
    edges=[("clean", "tag")],
).launch()

Custom HTML Components

If a task requires significant customization of an existing component or a component that doesn't exist in Gradio, you can create one with gr.HTML. It supports html_template (with ${} JS expressions and {{}} Handlebars syntax), css_template for scoped styles, and js_on_load for interactivity — where props.value updates the component value and trigger('event_name') fires Gradio events. For reuse, subclass gr.HTML and define api_info() for API/MCP support.

See the full guide as well as example in references/examples.md

Server Mode

Use gr.Server instead of gr.Blocks when the users requests any of the following:

• Completely custom UI (your own HTML, React, Svelte, etc.) powered by Gradio's backend.
• Full control of FastAPI server (custom GET/POST routes, middleware, dependency injection) alongside Gradio API endpoints

See the full guide and example in references/examples.md.

If the user's use case can be handled by Gradio's built-in components or customizable HTML components, prefer not to use gr.Server.