Creating a WordPress Plugin That Seamlessly Integrates OpenAI, Notion, and Python Script Execution

Building a WordPress plugin that integrates OpenAI, Notion, and Python script execution, while also functioning as an interactive mind mapping tool, is a powerful project. Below, I’ll outline the steps in detail, followed by specific code examples for each component.

Overview of the Plugin

Core Features:
- An interactive mind map displayed on a WordPress page.
- Integration with the OpenAI API to generate ideas and expand mind map nodes.
- Integration with Notion API for syncing data to/from a Notion database.
- The ability to trigger Python scripts via REST API or local execution.

Plugin Structure:

/wp-content/plugins/mindmap-plugin/
├── mindmap-plugin.php (main plugin file)
├── js/
│   └── mindmap.js (for interactive visualization)
├── css/
│   └── style.css (styling for the mind map)
├── templates/
│   └── mindmap-page.php (template for displaying the mind map)
├── includes/
│   ├── openai-handler.php (OpenAI integration)
│   ├── notion-handler.php (Notion integration)
│   └── python-trigger.php (Python script execution)
└── readme.txt

Step 1: Setting Up the Plugin

Create the main plugin file mindmap-plugin.php:

<?php
/**
 * Plugin Name: MindMap Plugin
 * Description: A WordPress plugin for interactive mind mapping with OpenAI, Notion, and Python integration.
 * Version: 1.0
 * Author: Your Name
 */

// Prevent direct access.
if (!defined('ABSPATH')) {
    exit;
}

// Enqueue scripts and styles.
function mindmap_plugin_enqueue_assets() {
    wp_enqueue_script('mindmap-js', plugin_dir_url(__FILE__) . 'js/mindmap.js', ['jquery'], '1.0', true);
    wp_enqueue_style('mindmap-css', plugin_dir_url(__FILE__) . 'css/style.css');
}
add_action('wp_enqueue_scripts', 'mindmap_plugin_enqueue_assets');

// Shortcode to display the mind map.
function mindmap_plugin_display() {
    ob_start();
    include plugin_dir_path(__FILE__) . 'templates/mindmap-page.php';
    return ob_get_clean();
}
add_shortcode('mindmap', 'mindmap_plugin_display');

// Include feature handlers.
include_once plugin_dir_path(__FILE__) . 'includes/openai-handler.php';
include_once plugin_dir_path(__FILE__) . 'includes/notion-handler.php';
include_once plugin_dir_path(__FILE__) . 'includes/python-trigger.php';

Step 2: Interactive Mind Map Visualization

Create the JavaScript file `js/mindmap.js`:

Use a library like D3.js for the mind map:

document.addEventListener('DOMContentLoaded', function () {
    const data = {
        name: "Root",
        children: [
            { name: "Idea 1" },
            { name: "Idea 2" },
            { name: "Idea 3" }
        ]
    };

    const width = 800;
    const height = 600;

    const svg = d3.select("#mindmap")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    const root = d3.hierarchy(data);
    const treeLayout = d3.tree().size([width - 100, height - 100]);
    const treeData = treeLayout(root);

    const links = svg.selectAll(".link")
        .data(treeData.links())
        .enter()
        .append("line")
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y)
        .attr("stroke", "black");

    const nodes = svg.selectAll(".node")
        .data(treeData.descendants())
        .enter()
        .append("circle")
        .attr("cx", d => d.x)
        .attr("cy", d => d.y)
        .attr("r", 5)
        .attr("fill", "blue");

    nodes.append("title").text(d => d.data.name);
});

Create the HTML template `templates/mindmap-page.php`:

<div id="mindmap" style="width: 100%; height: 600px;"></div>

Add CSS `css/style.css`:

#mindmap {
    border: 1px solid #ccc;
    background-color: #f9f9f9;
}

Step 3: OpenAI Integration

Create `includes/openai-handler.php`:

<?php
function openai_generate_idea($prompt) {
    $api_key = 'YOUR_OPENAI_API_KEY';
    $url = 'https://api.openai.com/v1/completions';

    $data = [
        'model' => 'text-davinci-003',
        'prompt' => $prompt,
        'max_tokens' => 100,
    ];

    $response = wp_remote_post($url, [
        'headers' => [
            'Authorization' => 'Bearer ' . $api_key,
            'Content-Type' => 'application/json',
        ],
        'body' => json_encode($data),
    ]);

    if (is_wp_error($response)) {
        return 'Error: ' . $response->get_error_message();
    }

    $body = json_decode(wp_remote_retrieve_body($response), true);
    return $body['choices'][0]['text'] ?? 'No response';
}

Step 4: Notion Integration

Create `includes/notion-handler.php`:

<?php
function notion_add_entry($title, $content) {
    $notion_token = 'YOUR_NOTION_TOKEN';
    $database_id = 'YOUR_DATABASE_ID';
    $url = "https://api.notion.com/v1/pages";

    $data = [
        'parent' => ['database_id' => $database_id],
        'properties' => [
            'Title' => [
                'title' => [['text' => ['content' => $title]]]
            ]
        ],
        'content' => $content
    ];

    $response = wp_remote_post($url, [
        'headers' => [
            'Authorization' => 'Bearer ' . $notion_token,
            'Notion-Version' => '2022-06-28',
            'Content-Type' => 'application/json',
        ],
        'body' => json_encode($data),
    ]);

    return wp_remote_retrieve_body($response);
}

Step 5: Python Script Execution

Create `includes/python-trigger.php`:

<?php
function trigger_python_script() {
    $output = shell_exec('python3 /path/to/your/script.py');
    return $output;
}

Step 6: Example Workflow

Add ideas from OpenAI to your mind map:
- User clicks "Generate Idea" button.
- OpenAI generates an idea and updates the mind map.
Sync new nodes with Notion:
- Each new node is automatically added to your Notion database.
Trigger Python scripts for advanced processing:
- Execute scripts directly from WordPress when interacting with nodes.

Final Thoughts

This system ties together OpenAI, Notion, and Python seamlessly within WordPress. It requires moderate coding but delivers a powerful tool that matches your vision.