AI SummaryA skill booster for building interactive web UIs and ML demos using Gradio in Python. Developers creating data applications, ML interfaces, and chatbots benefit from guided assistance with Gradio components and patterns.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "gradio" skill in my project. Please run this command in my terminal: # Install skill into the correct directory (2 files) mkdir -p .claude/skills/huggingface-gradio && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/huggingface-gradio/SKILL.md "https://raw.githubusercontent.com/huggingface/skills/main/skills/huggingface-gradio/SKILL.md" && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/huggingface-gradio/examples.md "https://raw.githubusercontent.com/huggingface/skills/main/skills/huggingface-gradio/examples.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
Gradio
Gradio is a Python library for building interactive web UIs and ML demos. This skill covers the core API, patterns, and examples.
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 • Getting Started with the Python Client • Getting Started with the JS Client
Core Patterns
Interface (high-level): wraps a function with input/output components. `python 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. `python 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. `python import gradio as gr def respond(message, history): return f"You said: {message}" gr.ChatInterface(fn=respond).launch() `
`Textbox(value: str | I18nData | Callable | None = None, type: Literal['text', 'password', 'email'] = "text", lines: int = 1, max_lines: int | None = None, placeholder: str | I18nData | None = None, label: str | I18nData | None = None, info: str | I18nData | None = None, every: Timer | float | None = None, inputs: Component | Sequence[Component] | set[Component] | None = None, show_label: bool | None = None, container: bool = True, scale: int | None = None, min_width: int = 160, interactive: bool | None = None, visible: bool | Literal['hidden'] = True, elem_id: str | None = None, autofocus: bool = False, autoscroll: bool = True, elem_classes: list[str] | str | None = None, render: bool = True, key: int | str | tuple[int | str, ...] | None = None, preserved_by_key: list[str] | str | None = "value", text_align: Literal['left', 'right'] | None = None, rtl: bool = False, buttons: list[Literal['copy'] | Button] | None = None, max_length: int | None = None, submit_btn: str | bool | None = False, stop_btn: str | bool | None = False, html_attributes: InputHTMLAttributes | None = None)`
Creates a textarea for user to enter string input or display string output..
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster