Vibe Coder

Vibe Coder Agent - Setup Guide

Welcome to the setup guide for integrating the Vibe Coder Agent. This document will walk you through obtaining your endpoint URL, using the provided code snippet, and handing off to an AI app builder.


Vibe Coder Instructions

1. Endpoint URL

Copy your workflow endpoint URL for API requests:

{YOUR_HOST}/executeWorkflow/{YOUR_FLOW_ID}/{YOUR_TRIGGER_ID}

Replace {YOUR_HOST}, {YOUR_FLOW_ID}, and {YOUR_TRIGGER_ID} with your actual values.

2. Code Snippet

Use the following JavaScript code to call your workflow endpoint.
Copy and paste the code into your app or website.

/**
 * Function to call workflow using fetch
 * @param {object} params - Input parameters for the workflow
 * @returns {Promise<object>} - The workflow result
 */
async function callEndpoint(params) {
  const url = '{YOUR_HOST}/executeWorkflow/{YOUR_FLOW_ID}/{YOUR_TRIGGER_ID}';
  const apiKey = 'YOUR_API_KEY'; // Replace with your actual API key
 
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        BUILDSHIP_API_KEY: apiKey,
      },
      body: JSON.stringify(params),
    });
    const result = await response.json();
    console.log('Success:', result);
    return result;
  } catch (error) {
    console.error('Error:', error);
  }
}
 
// Example usage
async function executeExample() {
  const params = {
    // Replace with your input parameters
    // param1: "",
    // param2: 0,
  };
 
  try {
    const result = await callEndpoint(params);
    console.log('Workflow result:', result);
    return result;
  } catch (error) {
    console.error('Failed to execute workflow:', error);
  }
}
 
executeExample();
💡

Make sure to replace the placeholders in the code with your actual values:

  • Replace the value for the url variable with your endpoint URL provided to you in your Tool Trigger Setup Preview
  • Replace YOUR_API_KEY with your actual API key
  • Fill in the params object with your specific input parameters

3. AI Handoff

You can use the following prompt with your preferred AI App Builder to auto-generate a frontend that connects to your BuildShip API endpoint.

Prompt Template

Create an intuitive & responsive webapp using the given endpoint and the example inputs
 
Rules:
- Use only the inputs given
- Include validation for required fields if needed
- Handle the output properly depending what it returns (string, number, etc) especially in case of returning lists or json outputs
 
async function callEndpoint(param1, param2) {
    const url = "{YOUR_HOST}/executeWorkflow/{YOUR_FLOW_ID}/{YOUR_TRIGGER_ID}";
    const apiKey = "YOUR_API_KEY"; // Replace with your actual API key
    const params = {
        param1: param1,
        param2: param2
    };
 
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'BUILDSHIP_API_KEY': apiKey
            },
            body: JSON.stringify(params)
        });
 
        const result = await response.json();
        console.log('Success:', result);
        return result;
    } catch (error) {
        console.error('Error:', error);
    }
}
 
Here are sample inputs:
{
    param1: string,
    param2: number
}
 
The output of this endpoint is:
{
    result: string
}

Instructions

  1. Copy the above prompt
  2. Paste it into your AI app builder
  3. The AI will generate a UI to collect the required inputs and handle the API response

Need Help?

  • 💬
    Join BuildShip Community

    An active and large community of no-code / low-code builders. Ask questions, share feedback, showcase your project and connect with other BuildShip enthusiasts.

  • 🙋
    Hire a BuildShip Expert

    Need personalized help to build your product fast? Browse and hire from a range of independent freelancers, agencies and builders - all well versed with BuildShip.

  • 🛟
    Send a Support Request

    Got a specific question on your workflows / project or want to report a bug? Send a us a request using the "Support" button directly from your BuildShip Dashboard.

  • ⭐️
    Feature Request

    Something missing in BuildShip for you? Share on the #FeatureRequest channel on Discord. Also browse and cast your votes on other feature requests.