Gradio

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.