New Components - alttextlab (#17624)

* new component: alttextlab

* new component: alttextlab

* eslint updates

* version

* pnpm-lock.yaml

* app slug

* pnpm-lock.yaml

* pnpm-lock.yaml

---------

Co-authored-by: Michelle Bergeron <[email protected]>

Author: andreizanik

components/alttextlab/README.md

@@ -0,0 +1,16 @@
+# Overview
+
+AltTextLab's API provides powerful AI-generated alternative text for images - enhancing SEO, accessibility, and automation workflows. With Pipedream, you can create workflows that generate alt text for images automatically, connect it with your CMS or e-commerce platform. Pipedream’s serverless architecture lets you trigger these workflows on events, schedules, or incoming webhooks without maintaining your own infrastructure.
+# Example Use Cases
+
+- **Automated SEO Optimization for E-commerce**: Automatically generate alt text for new product images uploaded to a Shopify or WooCommerce store and save the metadata to your CMS or database.
+
+- **Content Publishing Pipelines**: When a new blog post with images is published in your CMS (e.g., Ghost, WordPress, Webflow), send the image URLs to AltTextLab, generate alt text, and attach it back to the post or send it via email for editorial review.
+
+- **Bulk Image Processing for Media Libraries**: Periodically scan a folder in Dropbox, S3, or Google Drive for new images and generate alt text descriptions for accessibility compliance and tagging.
+
+# Getting Started
+
+To get started, first log in to or create your [Pipedream account](https://pipedream.com) and start a new workflow.
+
+Go to [AltTextLab](https://www.alttextlab.com/) and create an account (or log in if you already have one). Then, in the Dashboard, navigate to the API Keys section, generate a new API key, and copy it — you’ll use this key to authenticate your requests.

components/alttextlab/actions/generate-alt-text/generate-alt-text.mjs

@@ -0,0 +1,87 @@
+import altTextLab from "../../alttextlab.app.mjs";
+import { AI_WRITING_STYLE } from "../../common/constants.mjs";
+
+export default {
+  key: "alttextlab-generate-alt-text",
+  name: "Generate Alt Text",
+  description: "Generates alt text for images using AI. [See the documentation](https://www.alttextlab.com/docs/api)",
+  version: "0.0.1",
+  type: "action",
+  props: {
+    altTextLab,
+    alert: {
+      type: "alert",
+      alertType: "info",
+      content: "Supported formats: PNG, JPG, WebP, AVIF, SVG",
+    },
+    imageUrl: {
+      type: "string",
+      label: "Image URL",
+      description: "Provide the direct URL to the image you want to generate alt text for. Make sure the link is publicly accessible (not behind a login or firewall).",
+    },
+    lang: {
+      type: "string",
+      label: "Language",
+      description: "Enter the language code for the alt text generation (e.g., \"en\" for English, \"fr\" for French). See the [full list of supported languages](https://www.alttextlab.com/docs/api#language)",
+      default: "en",
+    },
+    style: {
+      type: "string",
+      label: "AI writing styles",
+      options: AI_WRITING_STYLE,
+      description: "Alt-text writing styles define the tone, structure, and level of detail used to describe an image. [Learn more](https://www.alttextlab.com/docs/writing-style)",
+      default: "neutral",
+    },
+    keywords: {
+      type: "string[]",
+      label: "Keywords",
+      description: "Enter one or more keywords to alt text generation. Separate multiple keywords with commas. Example: cat, window, sunset.",
+      optional: true,
+    },
+    ecommerceProduct: {
+      type: "string",
+      label: "Ecommerce Product Name",
+      description: "The name of the product.",
+      optional: true,
+    },
+    ecommerceBrand: {
+      type: "string",
+      label: "Ecommerce Product Brand",
+      description: "The brand of the product.",
+      optional: true,
+    },
+    ecommerceColor: {
+      type: "string",
+      label: "Ecommerce Product Color",
+      description: "The color of the product.",
+      optional: true,
+    },
+    ecommerceMaterial: {
+      type: "string",
+      label: "Ecommerce Product Material",
+      description: "The material of the product.",
+      optional: true,
+    },
+  },
+  async run({ $ }) {
+    const response = await this.altTextLab.altTextGeneration({
+      $,
+      data: {
+        source: "pipedream",
+        imageUrl: this.imageUrl,
+        lang: this.lang,
+        style: this.style,
+        keywords: this.keywords,
+        ecommerce: {
+          product: this.ecommerceProduct,
+          brand: this.ecommerceBrand,
+          color: this.ecommerceColor,
+          material: this.ecommerceMaterial,
+        },
+      },
+    });
+
+    $.export("$summary", "Alt text has been generated");
+    return response;
+  },
+};

components/alttextlab/alttextlab.app.mjs

@@ -1,11 +1,34 @@
+import { axios } from "@pipedream/platform";
+
 export default {
   type: "app",
   app: "alttextlab",
   propDefinitions: {},
   methods: {
-    // this.$auth contains connected account data
-    authKeys() {
-      console.log(Object.keys(this.$auth));
+    _baseUrl() {
+      return "https://app.alttextlab.com/api/v1";
+    },
+    _headers(headers) {
+      return {
+        ...headers,
+        "x-api-key": `${this.$auth.api_key}`,
+      };
+    },
+    async _makeRequest({
+      $ = this, path, headers, ...otherOptions
+    }) {
+      return axios($, {
+        url: this._baseUrl() + path,
+        headers: this._headers(headers),
+        ...otherOptions,
+      });
+    },
+    async altTextGeneration(args) {
+      return this._makeRequest({
+        path: "/alt-text/generate",
+        method: "POST",
+        ...args,
+      });
     },
   },
-};
+};

components/alttextlab/common/constants.mjs

@@ -0,0 +1,18 @@
+export const AI_WRITING_STYLE = [
+  {
+    label: "Descriptive",
+    value: "descriptive",
+  },
+  {
+    label: "Neutral",
+    value: "neutral",
+  },
+  {
+    label: "Matter of fact",
+    value: "matter-of-fact",
+  },
+  {
+    label: "Minimal",
+    value: "minimal",
+  },
+];

components/alttextlab/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@pipedream/alttextlab",
-  "version": "0.0.1",
+  "name": "@pipedream/alttextify",
+  "version": "0.1.0",
   "description": "Pipedream AltTextLab Components",
   "main": "alttextlab.app.mjs",
   "keywords": [
@@ -11,5 +11,8 @@
   "author": "Pipedream <[email protected]> (https://pipedream.com/)",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@pipedream/platform": "^3.0.3"
   }
-}
+}

components/cloudbeds/cloudbeds.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/knocommerce/knocommerce.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};

components/upgrade_chat/upgrade_chat.app.mjs

@@ -8,4 +8,4 @@ export default {
       console.log(Object.keys(this.$auth));
     },
   },
-};
+};