This tutorial guides you through the process of creating, configuring, and publishing a custom application on Prisme.ai. You’ll learn how to extend the platform’s capabilities by building a reusable app that can be shared across workspaces and used by other team members.

​
Understanding Apps on Prisme.ai

Before diving into development, it’s important to understand what an “App” represents in the Prisme.ai ecosystem:

Custom Blocks

Components built with ReactJS to provide specialized UI or functionality

Integrations

Connectors to external services like CRMs, APIs, or other software systems

Code to No-Code Interface

Transform complex code into user-friendly no-code interfaces

Legacy to Modern API

Convert legacy systems into modern APIs for better integration

​
Benefits of Custom Apps

Creating custom apps on Prisme.ai offers several advantages:

  • Accelerated Roadmap Execution: Deploy new features and integrations quickly
  • Enhanced Quality and Security: Test and secure components in a controlled environment
  • Governance and Control: Restrict app development to authorized users
  • Increased Productivity: Automate routine tasks and integrate various data sources
  • Reusable Components: Build once, use everywhere across your organization

​
What You’ll Build

In this tutorial, you’ll create a Mailjet integration app that allows users to send emails directly from their automations. This practical example demonstrates the full app development lifecycle from creation to publication in the App Store.

While we’re using Mailjet as an example, the principles and steps apply to building any type of custom app on Prisme.ai.

​
Prerequisites

Before starting this tutorial, make sure you have:

  • An active Prisme.ai account with appropriate permissions
  • Basic knowledge of YAML for configuration
  • API credentials from the service you’re integrating (Mailjet in this example)

​
Step 1: Creating Your App Workspace

First, let’s create a dedicated workspace for your app:

1

Access AI Builder

Log in to Prisme.ai and navigate to the Builder product

2

Create a New Workspace

Click “Create Workspace” and configure it as follows:

  • Name: “Mailjet” (or the name of your integration)
  • Description: Brief explanation of what the app does
  • Icon: Choose an appropriate icon that represents the service
3

Configure Basic Settings

Set up any additional workspace settings necessary for your app

​
Step 2: Building the Core Automation

Now, let’s create the main functionality of your app:

1

Create an Automation

Navigate to the Automations section and click “Create Automation”

2

Configure the Automation

  • Name your automation (e.g., “SendEmail”)
  • Set an appropriate slug (e.g., “send-email”)
3

Define the Automation Logic

Click on “See Code” and paste the following YAML configuration:

slug: send-email
name: SendMail
do:
  - fetch:
      emitErrors: true
      outputMode: body
      headers:
        Content-Type: application/json
        Authorization: Basic [Base64 Encoded Credentials]
      query: {}
      url: https://api.mailjet.com/v3.1/send
      method: post
      body:
        Messages:
          - From:
              Email: '{{fromEmail}}'
              Name: '{{fromName}}'
            To:
              - Email: '{{toEmail}}'
                Name: '{{toName}}'
            Subject: '{{subject}}'
            TextPart: '{{body}}'
      output: response
arguments:
  fromEmail:
    type: string
    placeholder: john@example.com
    title: 
     fr: From Email
     en: From Email
    description: 
     en: From Email
     fr: From Email
  fromName:
    type: string
    placeholder: john
    title:
      en: From name
      fr: From Name
  toEmail:
    type: string
    placeholder: john@example.com
    title: 
     fr: To Email
     en: To Email
    description: 
     en: To Email
     fr: To Email
  toName:
    type: string
    placeholder: john
    title:
      en: To name
      fr: To Name
  subject:
    type: string
    placeholder: Your first Email
    title: 
     fr: Object
     en: Subject
    description: 
     en: Subject
     fr: Object
  body:
    type: string
    ui:widget: html
    title: 
     fr: Corps
     en: Body
    description:
      fr: Texte ou contenu enrichi au format HTML ou Markdown
      en: Text or rich text formated with HTML ou Markdown
4

Set Privacy Settings

To ensure confidentiality, set this automation to private by adding private: true to the YAML configuration. This prevents workspace consumers from directly accessing the automation.

5

Save the Automation

Click “Save” to create your automation

6

Test the Automation

Run a test to ensure the automation works as expected with your API credentials

​
Understanding the Automation Configuration

The YAML configuration above defines a workflow that:

  1. Makes an HTTP POST request to the Mailjet API
  2. Uses basic authentication with encoded credentials
  3. Formats the request body according to Mailjet’s requirements
  4. Defines input arguments with user-friendly labels and placeholders
  5. Supports HTML content for the email body

The arguments section defines the inputs that will be exposed to users when they use your app in their own automations. Make sure these are clearly named and documented.

​
Step 3: Configuring Advanced Settings

Let’s add configuration capabilities to make your app more flexible:

1

Create Configuration Schema

Navigate to the workspace settings and click on the “Configuration” tab

2

Define Configuration Fields

Add the following YAML to create a configuration field for API credentials:

config:
  schema:
    base64_encoded_credentials:
      title: Base64 encoded credentials
      description: Base64 encoded credentials
      type: string
3

Update Automation to Use Configuration

Modify your automation to use the configured credentials instead of hardcoded values

​
Step 4: Creating Documentation

Good documentation is essential for any app. Let’s create a documentation page:

1

Create a Documentation Page

Navigate to Pages and create a new page with the slug _doc

2

Configure Documentation Content

Click on “See Code” and paste the following YAML:

slug: _doc
name:
  fr: Documentation
  en: Documentation
blocks:
  - slug: RichText
    content: |-
      <h1>Mailjet</h1> 
      <p>
        The complete solution to power your email
      </p><br />
  - slug: TabsView
    tabs:
      - type: event
        content:
          blocks:
            - slug: RichText
              content: |- 
                <hr />
                <p>Hello World</p>          
        text: Documentation
      - type: external
        text: Changelog
        content:
          blocks:
            - slug: RichText
              content: |-
                <hr />
                 <h2>3-8-2023.3</h2>  
                 <p> Latest stable release</p>
styles: |-
  .page-blocks {
    padding: 2rem;
  }
3

Make Documentation Public

Ensure your app settings allow user access to documentation by enabling the public setting for the app

​
Step 5: Versioning and Publishing

Now that your app is built and documented, let’s publish it to the App Store:

1

Version Your Workspace

Navigate to your workspace settings and click “Push” to create a new version

2

Publish to App Store

Click on “Publish” to make your app available in the Prisme.ai App Store

3

Configure Publication Settings

Set visibility, categorization, and other publication settings for your app

4

Complete Publication

Finalize the publication process

​
Step 6: Installing and Using Your App

Now let’s see how users can install and use your app:

1

Access App Store

In any workspace, navigate to the Apps section and click the ”+” button

2

Find and Install Your App

Search for your app by name and click “Install”

3

Configure App Settings

Enter any required configuration values (like the API credentials)

4

Use the App in Automations

Create or edit an automation, add a new instruction, and select your app’s action (e.g., “SendEmail”)

5

Configure Action Parameters

Fill in the required parameters defined in your app’s arguments

​
Monitoring and Maintenance

After publishing your app, it’s important to monitor its usage and make improvements:

1

Track Activity

Use the Activity tab to monitor usage patterns and detect any issues

2

Gather Feedback

Collect feedback from users to identify enhancement opportunities

3

Release Updates

Make improvements, push new versions, and publish updates to the App Store

​
Advanced App Development

As you become more familiar with app development on Prisme.ai, consider these advanced capabilities:

Custom React Components

Build rich interactive UI components using ReactJS

Multi-Service Integration

Connect multiple external services in a single app

Advanced Authentication

Implement OAuth and other complex authentication flows

AI-Enhanced Processing

Combine your app with AI Knowledge for intelligent data processing

​
Best Practices for App Development

To ensure your apps are high-quality and maintainable:

  • Comprehensive Testing: Test all aspects of your app thoroughly before publishing
  • Clear Documentation: Provide detailed instructions and examples
  • Version Control: Maintain consistent versioning practices
  • Security First: Handle credentials and sensitive data securely
  • User Experience: Focus on making your app intuitive and easy to use
  • Feedback Loop: Establish a mechanism for collecting and acting on user feedback

​
Next Steps

Create a RAG Agent

Build an agent that uses AI to answer questions from your documents

Implement Webhook Integration

Learn how to create advanced API and webhook integrations

Document Classification System

Build an AI system that automatically categorizes documents

Website to RAG Agent

Convert a website into an interactive knowledge base

Was this page helpful?

Raise issue