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

1. 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.

2. 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

1. Add ideas from OpenAI to your mind map:

   • User clicks "Generate Idea" button.
   • OpenAI generates an idea and updates the mind map.

2. Sync new nodes with Notion:

   • Each new node is automatically added to your Notion database.

3. 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.