How To Use OpenAI/ChatGPT Inside Your Drupal Site

  • Last updated
  • 1 minute read

Goal

This tutorial will show you how to install, enable, and use the OpenAI Drupal module.

Prerequisites

  • A Drupal 10 site
  • Composer must be installed on your local machine.
  • An OpenAI account

Overview

If you read Dries' blog post, Artificial Intelligence, the future of Content Management and the Web, you will know that he references Drupal integrations for ChatGPT created by Kevin Quillen. In this tutorial, we are going to deep dive on two of the modules from Drupal integrations for ChatGPT. Let's walk through installing and configuring the core OpenAI module and the OpenAI CKEditor integration, to start using OpenAI inside of a Drupal application.

  1. Add OpenAI module

    To add OpenAI to a Drupal 10 application, we need to add the OpenAI module.

    Run the Composer command to add the OpenAI module to the codebase.

    
    composer require 'drupal/openai:^1.0@alpha'
    
  2. Enable OpenAI and OpenAI CKEditor

    To use the OpenAI module, we have to enable the core OpenAI module and one or more submodules.

    For this tutorial we are going to use the OpenAI CKEditor integration module so we need enable OpenAI and OpenAI CKEditor integration.

    Run the Drush command to enable OpenAI and OpenAI CKEditor integration modules.

    
    drush en openai openai_ckeditor -y
    
  3. Create OpenAI API key

    Before we can configure the OpenAI module, we need to create an OpenAI API key. 

    When logged into your OpenAI account, you can visit "View API Keys" to create a new API key.

    To create an API Key, click on "+ Create new secret key." 

    Create Open API key

    Once you have generated the API key, copy the key and save it. You will not be able to view the key again.

    OpenAI API key
  4. Add OpenAI settings

    We are now able to configure the OpenAI module. 

    Navigate to Configuration → OpenAI → Settings and paste in the API key and save configuration, you do not need to add an Organization name/ID for this tutorial.

  5. Add the CKEditor OpenAI Text Generator toolbar button

    Before we can use the OpenAI Text Generator toolbar button, we need to add it to our text editor.

    Navigate to Configuration → Content authoring → Text formats and editors and configure the text format where you want to use OpenAI Text Generator button. For this tutorial, we are going to add the OpenAI Text Generator button to the Basic HTML text format.

    Click "Configure" on Basic HTML and under Toolbar configuration, drag the OpenAI Text Generator button to the Active toolbar, and save configuration.

    Add OpenAI text generator toolbar button
  6. Using the OpenAI Text Generator button

    Now that we have the OpenAI Text Generator button added to our text editor, we can prompt it to generate text for us.

    Asking OpenAI a question

Adding the OpenAI and the OpenAI CKEditor modules is only the beginning of using OpenAI within a Drupal application. Now that you have configured the core module, you can begin experimenting with the other features that come with the module.