Shepherd Site AI Guide

Create a chatbot specifically for my Wordpress site, ShepherdDigest.com. The chatbot icon should be an image of a German Shepherd. The chatbot should analyze the complete contents of the website so that it can answer any question related to the website. The chatbot should also have an encyclopedic knowledge about shepherd breeds of dogs. The chatbot should provide an engaging experience for the visitor.

First, pre-entered info...

final-output2

subagents-extracted2

OVERVIEW OF SUBAGENTS: {Broad description of the agents required, and what each will do to generate the required component}

SUBAGENT 1: "WP PLUGIN BUILDER"  
──────────────────────────────────────────────────────  
GOAL: Generate the plugin.php file that registers and enqueues the chatbot assets, and integrates with WordPress.  
SKILL USED:  
• #223 – Powerful LLM Prompt-to-Text Response  
  INPUT: A prompt describing the required WordPress plugin header, version, scripts enqueueing, and any hooks or shortcodes needed so the chatbot widget can appear.  
  OUTPUT: The complete PHP code for plugin.php.

STEPS:  
1) Provide #223 with instructions on creating a valid WordPress plugin header (name, description, version, author).  
2) Instruct #223 to enqueue chatbot.js and chatbot.css, reference config.json, and render a chatbot container in the site's footer or via a shortcode.  
3) Receive plugin.php as text.

SUBAGENT FINAL OUTPUT: [plugin-php]

──────────────────────────────────────────────────────
SUBAGENT 2: "CHATBOT JS GENERATOR"  
──────────────────────────────────────────────────────
GOAL: Produce the chatbot.js file, which handles the chatbot's UI, user input, and AI query calls.  
SKILL USED:  
• #223 – Powerful LLM Prompt-to-Text Response  
  INPUT: A prompt describing essential JavaScript functionality (opening/closing the chat, capturing user queries, calling an AI endpoint or referencing local data, and displaying responses).  
  OUTPUT: The complete chatbot.js code.

STEPS:  
1) Provide #223 with instructions on implementing a minimal chat widget (HTML elements, open/close logic).  
2) Instruct #223 to include placeholders or sample calls to an AI endpoint (or local site data, from config.json).  
3) Receive chatbot.js as text.

SUBAGENT FINAL OUTPUT: [chatbot-js]

──────────────────────────────────────────────────────
SUBAGENT 3: "CHATBOT STYLIST"  
──────────────────────────────────────────────────────
GOAL: Create the chatbot's stylesheet (chatbot.css) for positioning, color, and responsiveness.  
SKILL USED:  
• #223 – Powerful LLM Prompt-to-Text Response  
  INPUT: A prompt describing desired chatbot CSS (icon position, chat window styles, responsive design).  
  OUTPUT: The complete chatbot.css code.

STEPS:  
1) Provide #223 with instructions on laying out the chat window, buttons, transitions, color schemes, fonts, etc.  
2) Instruct #223 to keep styles minimal and responsive.  
3) Receive chatbot.css as text.

SUBAGENT FINAL OUTPUT: [chatbot-css]

──────────────────────────────────────────────────────
SUBAGENT 4: "SHEPHERD ICON MAKER"  
──────────────────────────────────────────────────────
GOAL: Generate a German Shepherd icon for the chatbot button.  
SKILLS USED:  
• #182 – Create Dalle Image (Transparent Square)  
  INPUT: A text prompt such as "Icon of a friendly German Shepherd dog head, simple silhouette, transparent background."  
  OUTPUT: A 1024×1024 PNG image URL.

• #191 – Resize Image (optional)  
  INPUT: The 1024×1024 PNG URL plus target dimensions (e.g., 64×64).  
  OUTPUT: The resized PNG icon (shepherd-icon.png).

STEPS:  
1) Use #182 to create the initial transparent PNG.  
2) Optionally apply #191 if a smaller icon size is needed.

SUBAGENT FINAL OUTPUT: [shepherd-icon-file]

──────────────────────────────────────────────────────
SUBAGENT 5: "CONFIG DATA CURATOR"  
──────────────────────────────────────────────────────
GOAL: Build config.json containing references to site content and shepherd dog breed info.  
SKILLS USED:  
• #216 – Research Topic (Or Keyword) Deeply  
  INPUT: "ShepherdDigest.com content" or specific sections/breed names to gather data.  
  OUTPUT: A summary or set of facts about the site's content and shepherd breeds.

• #223 – Powerful LLM Prompt-to-Text Response  
  INPUT: A prompt instructing how to format the researched info into JSON (keys for site references, keys for breed facts, placeholders for any API keys).  
  OUTPUT: The final config.json text.

STEPS:  
1) Run #216 on "German Shepherd, Belgian Malinois, Australian Shepherd, etc." or references to ShepherdDigest.com to gather data.  
2) Feed the results to #223 with instructions to produce valid JSON (config.json) including site pages, breed trivia, and placeholders for an AI API key.

SUBAGENT FINAL OUTPUT: [config-json]

──────────────────────────────────────────────────────
SUBAGENT 6: "PLUGIN PACKAGER" [REQUIRED]  
──────────────────────────────────────────────────────
GOAL: Package plugin.php, chatbot.js, chatbot.css, shepherd-icon.png, and config.json into a single .zip.  
NEEDED:  
• A skill or API to create a .zip archive from multiple files.  
• Not currently available in the provided skill list.

STEPS:  
1) Collect the final files from Subagents 1–5.  
2) Use the required packaging (to be added) to zip them into chatbot-plugin.zip for distribution.

SUBAGENT FINAL OUTPUT: [chatbot-plugin-zip]

subagentnumber

Then, agent response...

subagent1refined-new-json-core

G) TASKFLOW SUMMARY

Based on the subagent's structure and silos, here's the complete taskflow breakdown:

TASK 1:
- ID: #223
- Title task: Generate WordPress Plugin Header and Core Functions
- Description of the task: Creates a valid WordPress plugin.php file with proper header metadata, script/style enqueueing, and chatbot container implementation through either footer hook or shortcode
- Input(s) involved: 
  [plugin-name]
  [plugin-version]
  [plugin-author]
  [plugin-description]
  [js-file-path]
  [css-file-path]
  [config-json-path]
  [integration-method]
- Output token name: [plugin-php]

The taskflow for this subagent is relatively straightforward as it primarily relies on a single powerful LLM skill (#223) to generate the complete plugin.php file. The process involves:

1. Taking the metadata inputs and file references from SILO 1
2. Using Skill #223 in SILO 2 to generate the complete PHP code
3. Returning the final plugin.php content in SILO 3

The reason this subagent uses only one main skill (#223) is because WordPress plugin creation is a single, cohesive task that requires generating interrelated PHP code. Breaking it into multiple skills could lead to inconsistencies in variable naming, function declarations, and overall plugin structure.

Note: While this subagent's workflow seems simple with just one main skill, the complexity lies in the prompt engineering required to generate proper WordPress-compatible PHP code. The #223 skill must understand WordPress plugin architecture, proper enqueueing of assets, and best practices for integrating custom functionality into WordPress.

subagent1mermaid

<!DOCTYPE html>
<html>
<head>
  <title>Mermaid Diagram Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.4.3/mermaid.min.js"></script>
</head>
<body>
  <div class="mermaid">
graph TD
    A[Start WP Plugin Builder] --> B[SILO 1: Prepare Prompt]
    B --> C1[Gather Plugin Metadata]
    B --> C2[Collect File References]
    B --> C3[Define Integration Method]
    
    C1 --> |plugin name| D[Compile Prompt]
    C1 --> |version| D
    C1 --> |author| D
    C1 --> |description| D
    
    C2 --> |chatbot.js path| D
    C2 --> |chatbot.css path| D
    C2 --> |config.json path| D
    
    C3 --> |footer/shortcode| D
    
    D --> E[SILO 2: Generate plugin.php]
    E --> F[Call Skill #223]
    F --> G[Generate Plugin Header]
    F --> H[Create Asset Enqueue]
    F --> I[Add Container Logic]
    
    G --> J[SILO 3: Return Final File]
    H --> J
    I --> J
    
    J --> K[Output plugin.php]
    K --> L[End WP Plugin Builder]
  </div>

Mermaid Image - https://static.aiz.ac/1738037588-mermaid/mermaid1.png

prompts-required

subagent1-json-array

[
  {
    "taskID": 223,
    "semanticTitleOfTask": "Generate WordPress Plugin with Header, Enqueue Scripts, and Chatbot Container",
    "taskDescription": "This task uses a powerful language model to create a fully functional plugin.php file for a custom WordPress chatbot plugin, including a valid plugin header, secure file access check, script/style enqueues, and a container for the chatbot, either added to the footer or via shortcode.",
    "inputDescription": "This task requires the plugin name, version, author, and description to form the plugin header. It also needs file paths for the chatbot JavaScript and CSS, a path or reference to config.json, and a chosen method of integration (footer hook or shortcode).",
    "inputRequired": [
      "plugin-name",
      "plugin-version",
      "plugin-author",
      "plugin-description",
      "js-file-path",
      "css-file-path",
      "config-json-path",
      "integration-method"
    ],
    "outputDescription": "Produces a single text string containing the entire plugin.php code, ready to be saved in a WordPress plugin folder. This includes the plugin header, secure access check, functions to enqueue scripts and styles, and logic for displaying the chatbot container.",
    "outputName": "[plugin-php]",
    "promptInstruction": "You are a WordPress plugin developer expert. Create a complete plugin.php file for a chatbot plugin with the following requirements: Include a valid plugin header with name, version, author, and description. Prevent direct file access, check for WordPress environment, enqueue chatbot-js and chatbot-css, and reference config-json for chatbot data. Implement either an automatic footer hook or a [shepherd_chatbot] shortcode to display the chatbot container with an icon. Follow WordPress best practices, include comments, and handle uninstallation cleanup."
  }
]