A starter plugin for connecting WordPress to OpenAI's text generation GPT models.
![admin-page](https://private-user-images.githubusercontent.com/3076742/294388289-569f0d35-1469-4296-9fe0-86ccc744eca6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2NzQ0NzYsIm5iZiI6MTcyNDY3NDE3NiwicGF0aCI6Ii8zMDc2NzQyLzI5NDM4ODI4OS01NjlmMGQzNS0xNDY5LTQyOTYtOWZlMC04NmNjYzc0NGVjYTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjZUMTIwOTM2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzhkYzg3NGYyYjgzYzgzM2E0YzlmMWRiY2U4ZDFjYWU1Yjg0ODA4OWM3MjBjZDViZjg5OWIwYjdmOWM1YzRiOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.pp2XWgDRQ3FqjyVKwjgrneyiD6p1LlQXAQ42ZKPZalk)
![settings-page-v2](https://private-user-images.githubusercontent.com/3076742/294388370-25125e2b-f346-4b8c-b5cf-0708af6b91f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ2NzQ0NzYsIm5iZiI6MTcyNDY3NDE3NiwicGF0aCI6Ii8zMDc2NzQyLzI5NDM4ODM3MC0yNTEyNWUyYi1mMzQ2LTRiOGMtYjVjZi0wNzA4YWY2YjkxZjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgyNiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MjZUMTIwOTM2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MWFkODgzODQzNDE4YjVlMTY3ZWFhZmU1ZDg3YWYyOTliYzgxZjhhOGU4MzU1YmQzZjNiNzcxYTc2NDRhNWQ5ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.6_6lB5pFc84gRNywLX_phO3nxiDMAEjYdL9Q6jHw4QQ)
- OpenAI API Integration: Connect your WordPress site with OpenAI's text generation models.
- Custom REST API Endpoint: The plugin includes a custom REST API endpoint
/wpgpt/v1/completions
to interact with the OpenAI Chat Completions API. - Flexible Settings Page: Configure your OpenAI API key and select between two GPT models: GPT-3.5 Turbo and GPT-4. Additional models can be added to the
settings-page.php
file. - Interactive Admin Page: A React-based admin page where you can send requests to the custom endpoint and receive responses from the OpenAI API. The page is built using WP Scripts and WP Components, allowing for customization based on your requirements.
- Translation Ready: The plugin is prepared for translation, using the text domain "wpgpt" for all its strings.
- Download or clone the repository into your WordPress
plugins
directory. - Navigate to your WordPress admin dashboard and go to the Plugins section.
- Locate "WP GPT Starter Plugin" and activate it.
- Navigate to the plugin's settings page in the WordPress admin area.
- Enter your OpenAI API key in the provided field.
- Select the desired GPT model from the dropdown menu.
You can add more models by editing the settings-page.php
file.
To customize the AI prompt to better suit your specific use case, follow these steps:
-
Locate the AI Prompt: The AI prompt can be found in
includes/wpgpt-endpoint.php
, in theopenai_api
function. This function handles the OpenAI API request. -
Modify the System Message: To change the AI's system message, locate the following line:
["role" => "system", "content" => "You are a helpful assistant."]
This line sets up the initial context for the AI. You can modify the "content" part of this array to change the default behavior or context provided to the AI.
-
Modify the Prompt Message: The user's message is captured and sent to the API with this line:
["role" => "user", "content" => $userMessage]
$userMessage
is obtained from the request. You can prepend or append additional content to$userMessage
if you want to provide more context or instructions to the AI.
The admin page of this plugin is built using React and leverages WP Scripts for development and building processes.
- Ensure you have Node.js installed on your system.
- Navigate to the plugin's directory in your terminal.
- Run
npm install
to install the necessary dependencies.
- To build the project for production, run
npm run build
. - For development purposes, you can use
npm start
.
The plugin registers a custom REST API endpoint at wpgpt/v1/completions
. You can interact with this endpoint to send requests and receive responses from the OpenAI Chat Completions API. The endpoint can be accessed only by users with admin privileges.
- Send a POST request to
yourdomain.com/wp-json/wpgpt/v1/completions
with the necessary payload. - The payload for the request should be a JSON object containing a single key-value pair. The key is
prompt
, and its value should be the text prompt you want to process. - The payload and response format follow the OpenAI API structure.
The admin page is built with React and WP Components. You can customize this page by editing the React components located in the src/AdminPage.js
.
The WP GPT Starter Plugin implements comprehensive error handling:
-
Handling of WordPress HTTP API Errors: If the request to the OpenAI API fails at the WordPress level (e.g., network issues), the plugin captures and returns this as a
WP_Error
. -
JSON Parsing Error Checks: The plugin checks for and handles JSON parsing errors in the response from the OpenAI API, ensuring the response format is correct.
-
HTTP Status Code Monitoring: If the HTTP status code of the API response is not 200 (OK), the plugin processes and returns the error, including any error messages from the OpenAI API for clarity.
-
Error Logging: Errors are logged to the WordPress debug log if WP_DEBUG is enabled in your wp-config.php file.
You can customize error responses based on the HTTP status by modifying the wpgpt-endpoint.php
file. HTTP status codes are captured in the $http_status
variable.