---
title: ChatGPT Plugins UI With Langchain
emoji: 📊
colorFrom: yellow
colorTo: yellow
sdk: gradio
sdk_version: 3.36.0
app_file: app.py
pinned: false
license: mit
---

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

## Steps to add new Plugins to your Langchain-Gradio ChatGPT PLUGIN WebUI

1. **Acquire the API Endpoint**
    - You need an API which you can query, and for this example let's consider using a The Bored API.
    - **API Endpoint**: [https://www.boredapi.com/api/activity/?type=](https://www.boredapi.com/api/activity/?type=)

2. **Create a Function to Query the API**
    - You can access any Gradio demo as an API via the Gradio Python Client.
    ```python
    def bored_api(activity_type) -> str:
      '''
      Get a random activity to do based on the activity type. 
      '''
      activity_type_list = ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"]
      activity_type = activity_type.lower()
      if activity_type not in activity_type_list:
        activity_type = random.choice(activity_type_list)

      api_url = "https://www.boredapi.com/api/activity/?type=" + activity_type 
      response = requests.get(
          api_url 
          )
      return response.json()['activity']
    ```

3. **Add Function definitions**
    - Add the function definition to the `gpt_function_definitions.py` file (simply copy and paste). Don't forget to add function description in docstring. 
    - Add required imports
    ```python
    from gpt_function_definitions import generate_image, generate_caption, get_news, bored_api

    ```
    
4. **Add the function to the Tools list**
    - Add a description - describe what your function does. Models like GPT3.5/4 support Function Calling. The OpenAI Functions Agent from Langchain is designed to work with these functions and models. 
    - Name - add a name of your function, don't include spaces

    ```python
    tools = [
        #image generation 
        ...

        # Describe an image
        ...

        # Get lattest top news
        ...

        # Bored Api 
        Tool.from_function(
        func=bored_api,
        name="bored_api",
        description="Get a random activity to do based on the activity type"
        # coroutine= ... <- you can specify an async method if desired as well
        ),  
    ]
    ```

5. **Update the Chatbot Layout**
    - Go to the Blocks Chatbot layout and add a new checkbox for your plugin as:
    ```python
    bored = gr.Checkbox(label="🙄bored", value=False)
    ```
    - Add the new checkbox component (example - <i>bored</i>) to your submit and click events for your chatbot and to the predict function accordingly.
    - And also to the `plugins` list in `predict`
      ```python
      plugins = [stable_diff, image_cap, top_news, search, bored]
      ```

**Thats it! you have added your own brand new CHATGPT Plugin for yourself. Go PLAY!!**