Building Custom Apps with Builder

Learn how to create, deploy, and publish custom applications on Prisme.ai

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 Components

Components built with ReactJS to provide specialized UI or functionality

Imports

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 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: [e-mail]
       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: [e-mail]
       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 Knowledges 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