Captain Blackbeep - A Pirate-themed AI chatbot

Abe Treviño

Completed work

Spline Designer

Low-Code/No-Code Developer

ChatGPT

Netlify

Spline

Design

Arrr matey! Ye be wantin' to build a pirate-themed AI chatbot like the legendary Captain Blackbeep, but don’t yet know how to sail the seas of Pipedream and OpenAI? Worry not! This guide will walk ye through every step o’ the journey—from idea to interactive 3D character.

📜 What Ye Be Buildin'

A chatbot powered by OpenAI's ChatGPT (gpt-3.5)

Hosted on Pipedream, which handles the backend for you

Integrated into a Spline 3D scene with a floating chat input

⛰️ Things Ye'll Need

A free Pipedream account

An OpenAI API key

Your 3D scene published in Spline

A basic HTML page to host it all

📊 Step-by-Step Instructions

✅ Step 1: Set Up a New Pipedream Workflow

Go to Pipedream

Click + New Workflow > HTTP / Webhook

Click "Test" to generate your webhook URL (copy it for later)

✅ Step 2: Add an OpenAI Step (ChatGPT)

Click the + below the trigger step

Choose "HTTP Request" (or search "OpenAI")

Set it up like this:

Method: POST URL:

https://api.openai.com/v1/chat/completions

Headers:

{
  "Content-Type": "application/json",
  "Authorization": "Bearer YOUR_OPENAI_KEY"
}

Body (JSON):

{
  "model": "gpt-3.5-turbo",
  "messages": [
    {
      "role": "system",
      "content": "You are Captain Blackbeep, a witty pirate AI. Speak in nautical slang and always end responses with a pirate phrase."
    },
    {
      "role": "user",
      "content": "{{steps.trigger.event.body.user_input || 'What be this, Captain?'}}"
    }
  ]
}

Rename this step to: custom_request_response

✅ Step 3: Return the Pirate's Reply

Click the + again and choose "Return HTTP Response"

In the Response Body, click + to add a key-value pair:

Key: reply

Value: click the {} button and navigate to:

custom_request_response > $return_value > choices > [0] > message > content

Pipedream will insert:

{{steps.custom_request_response.$return_value.choices[0].message.content}}

Set Status Code to 200

Click Deploy

✅ Step 4: Build the Frontend (HTML + Spline)

Here’s an example of what your index.html might look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Captain Blackbeep</title>
  <script type="module" src="https://unpkg.com/@splinetool/viewer@1.10.13/build/spline-viewer.js"></script>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      background-color: black;
    }
    spline-viewer {
      width: 100vw;
      height: 100vh;
      display: block;
    }

    #chatbox {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      padding: 32px;
      border-radius: 10px;
      font-family: monospace;
      z-index: 10;
      max-width: 300px;
    }

    #chatbox input {
      width: 100%;
      margin-bottom: 8px;
      padding: 6px;
      border: none;
      border-radius: 4px;
    }

    #chatbox button {
      width: 100%;
      padding: 6px;
      background: darkred;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #replyBox {
      margin-top: 10px;
      font-size: 0.9em;
    }
  </style>
</head>
<body>
  <!-- ✅ Embed the Spline scene -->
  <script type="module" src="https://unpkg.com/@splinetool/viewer@1.10.13/build/spline-viewer.js"></script>
  <spline-viewer url="https://prod.spline.YOUR-SCENE-ID/scene.splinecode"></spline-viewer>

  <!-- ✅ Floating chatbox -->
  <div id="chatbox">
    <input type="text" id="userInput" placeholder="Ask the Captain..." />
    <button onclick="askPirate()">Speak to Blackbeep</button>
    <div id="replyBox"></div>
  </div>

  <script>
    const pipedreamEndpoint = "https://'YOUR-PIPEDREAM-ENDPOINT'.m.pipedream.net";

    async function askPirate() {
      const input = document.getElementById("userInput").value;
      if (!input) return;

      const replyBox = document.getElementById("replyBox");
      replyBox.innerText = "Captain be thinkin'...";

      try {
        const res = await fetch(pipedreamEndpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ user_input: input })
        });

        const data = await res.json();
        replyBox.innerText = data.reply || "Arrr, the Captain be speechless!";
      } catch (err) {
        replyBox.innerText = "Error contactin' the seas...";
        console.error(err);
      }
    }
  </script>
</body>
</html>

Replace YOUR-SCENE-ID and YOUR-PIPEDREAM-ENDPOINT with your respective URLs accordingly.

And that's it! Simply host the index.html file you just created on a hosting platform like Netlify for easy deployment.

🌊 Final Words From Blackbeep:

"Arrr, ye built a workin' AI pirate with nothin' but yer wits and a bit o' code. Let this be the start of yer digital fleet, matey! Be sure to trim yer sails and keep the spam off me deck!"

Like this project

Completed work

Posted Jun 23, 2025

Captain BlackBeep is a pirate-themed AI chatbot integrated with Spline and Pipedream, delivering witty, nautical replies via OpenAI’s GPT API.

Likes

Views

Timeline

Jun 20, 2025 - Jun 22, 2025