> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Build your first Gradio app in minutes with this step-by-step guide

# Quickstart

This guide will walk you through building your first Gradio app. You'll learn how to create a simple web interface for a Python function and share it with others.

<Note>
  **Prerequisite**: Gradio requires Python 3.10 or higher. Check your Python version with `python --version`.
</Note>

## Install Gradio

Install Gradio using pip:

```bash theme={null}
pip install --upgrade gradio
```

<Tip>
  It's best to install Gradio in a virtual environment. See the [Installation](/installation) guide for detailed instructions.
</Tip>

## Build your first demo

You can run Gradio in your favorite code editor, Jupyter notebook, Google Colab, or anywhere else you write Python. Let's write your first Gradio app.

<Steps>
  <Step title="Create a Python file">
    Create a new file called `app.py` and add the following code:

    ```python theme={null}
    import gradio as gr

    def greet(name, intensity):
        return "Hello, " + name + "!" * int(intensity)

    demo = gr.Interface(
        fn=greet,
        inputs=["text", "slider"],
        outputs=["text"],
    )

    demo.launch()
    ```

    <Tip>
      We shorten the imported name from `gradio` to `gr`. This is a widely adopted convention for better readability.
    </Tip>
  </Step>

  <Step title="Run your app">
    Run the app from your terminal:

    ```bash theme={null}
    python app.py
    ```

    The demo will open in a browser at [http://localhost:7860](http://localhost:7860). If you're running in a notebook, the demo will appear embedded within the notebook.
  </Step>

  <Step title="Try it out">
    Type your name in the textbox, drag the slider, and press the Submit button. You should see a friendly greeting in the output textbox.
  </Step>
</Steps>

## Understanding the Interface class

You created an instance of the `gr.Interface` class. The `Interface` class is designed to create demos for machine learning models which accept one or more inputs and return one or more outputs.

The `Interface` class has three core arguments:

* `fn`: the function to wrap a user interface (UI) around
* `inputs`: the Gradio component(s) to use for the input. The number of components should match the number of arguments in your function
* `outputs`: the Gradio component(s) to use for the output. The number of components should match the number of return values from your function

### The function argument

The `fn` argument is very flexible — you can pass any Python function that you want to wrap with a UI. The function could be anything from a music generator to a tax calculator to the prediction function of a pretrained machine learning model.

### Input and output components

Gradio includes more than 30 built-in components (such as `gr.Textbox()`, `gr.Image()`, and `gr.HTML()`) that are designed for machine learning applications.

<Tip>
  For the `inputs` and `outputs` arguments, you can pass in the name of these components as a string (`"textbox"`) or an instance of the class (`gr.Textbox()`).
</Tip>

If your function accepts multiple arguments, pass a list of input components to `inputs`, with each component corresponding to one of the function's arguments, in order. The same applies if your function returns multiple values — simply pass a list of components to `outputs`.

## Share your demo

Gradio lets you easily share your demo without hosting on a web server. Simply set `share=True` in `launch()`, and a publicly accessible URL will be created:

```python theme={null}
import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
    
demo.launch(share=True)  # Share your demo with just 1 extra parameter
```

When you run this code, a public URL will be generated in a matter of seconds:

```
👉  https://a23dsf231adb.gradio.live
```

Now, anyone around the world can try your Gradio demo from their browser, while the machine learning model and all computation continues to run locally on your computer.

## Hot reload mode

When developing locally, you can run your Gradio app in **hot reload mode**, which automatically reloads the app whenever you make changes to the file.

Instead of running `python app.py`, run:

```bash theme={null}
gradio app.py
```

Your app will automatically reload when you save changes to `app.py`.

<Tip>
  You can also enable **vibe mode** with the `--vibe` flag:

  ```bash theme={null}
  gradio --vibe app.py
  ```

  This provides an in-browser chat that can be used to write or edit your Gradio app using natural language.
</Tip>

## Next steps

Now that you've built your first Gradio app, you can:

<CardGroup cols={2}>
  <Card title="Learn about Blocks" icon="cubes">
    Build custom layouts and complex interactions with `gr.Blocks`
  </Card>

  <Card title="Create a chatbot" icon="comments">
    Use `gr.ChatInterface` to quickly build chatbot UIs
  </Card>

  <Card title="Explore components" icon="grid">
    Discover Gradio's 30+ built-in components for ML apps
  </Card>

  <Card title="Host on Spaces" icon="rocket">
    Deploy your app for free on Hugging Face Spaces
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.