> ## Documentation Index
> Fetch the complete documentation index at: https://prismeai-docs-next.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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:

<CardGroup cols={2}>
  <Card title="Custom Components" icon="puzzle-piece">
    Components built with ReactJS to provide specialized UI or functionality
  </Card>

  <Card title="Imports" icon="plug">
    Connectors to external services like CRMs, APIs, or other software systems
  </Card>

  <Card title="Code to No-Code Interface" icon="code">
    Transform complex code into user-friendly no-code interfaces
  </Card>

  <Card title="Legacy to Modern API" icon="arrow-right-arrow-left">
    Convert legacy systems into modern APIs for better integration
  </Card>
</CardGroup>

## 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.

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

## 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:

<Steps>
  <Step title="Access Builder">
    Log in to Prisme.ai and navigate to the Builder product
  </Step>

  <Step title="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
  </Step>

  <Step title="Configure Basic Settings">
    Set up any additional workspace settings necessary for your app
  </Step>
</Steps>

## Step 2: Building the Core Automation

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

<Steps>
  <Step title="Create an Automation">
    Navigate to the Automations section and click "Create Automation"
  </Step>

  <Step title="Configure the Automation">
    * Name your automation (e.g., "SendEmail")
    * Set an appropriate slug (e.g., "send-email")
  </Step>

  <Step title="Define the Automation Logic">
    Click on "See Code" and paste the following YAML configuration:

    ```yaml theme={null}
    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 
    ```
  </Step>

  <Step title="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.
  </Step>

  <Step title="Save the Automation">
    Click "Save" to create your automation
  </Step>

  <Step title="Test the Automation">
    Run a test to ensure the automation works as expected with your API credentials
  </Step>
</Steps>

### 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

<Note>
  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.
</Note>

## Step 3: Configuring Advanced Settings

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

<Steps>
  <Step title="Create Configuration Schema">
    Navigate to the workspace settings and click on the "Configuration" tab
  </Step>

  <Step title="Define Configuration Fields">
    Add the following YAML to create a configuration field for API credentials:

    ```yaml theme={null}
    config:
      schema:
        base64_encoded_credentials:
          title: Base64 encoded credentials
          description: Base64 encoded credentials
          type: string
    ```
  </Step>

  <Step title="Update Automation to Use Configuration">
    Modify your automation to use the configured credentials instead of hardcoded values
  </Step>
</Steps>

## Step 4: Creating Documentation

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

<Steps>
  <Step title="Create a Documentation Page">
    Navigate to Pages and create a new page with the slug `_doc`
  </Step>

  <Step title="Configure Documentation Content">
    Click on "See Code" and paste the following YAML:

    ```yaml theme={null}
    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;
      }
    ```
  </Step>

  <Step title="Make Documentation Public">
    Ensure your app settings allow user access to documentation by enabling the public setting for the app
  </Step>
</Steps>

## Step 5: Versioning and Publishing

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

<Steps>
  <Step title="Version Your Workspace">
    Navigate to your workspace settings and click "Push" to create a new version
  </Step>

  <Step title="Publish to App Store">
    Click on "Publish" to make your app available in the Prisme.ai App Store
  </Step>

  <Step title="Configure Publication Settings">
    Set visibility, categorization, and other publication settings for your app
  </Step>

  <Step title="Complete Publication">
    Finalize the publication process
  </Step>
</Steps>

## Step 6: Installing and Using Your App

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

<Steps>
  <Step title="Access App Store">
    In any workspace, navigate to the Apps section and click the "+" button
  </Step>

  <Step title="Find and Install Your App">
    Search for your app by name and click "Install"
  </Step>

  <Step title="Configure App Settings">
    Enter any required configuration values (like the API credentials)
  </Step>

  <Step title="Use the App in Automations">
    Create or edit an automation, add a new instruction, and select your app's action (e.g., "SendEmail")
  </Step>

  <Step title="Configure Action Parameters">
    Fill in the required parameters defined in your app's arguments
  </Step>
</Steps>

## Monitoring and Maintenance

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

<Steps>
  <Step title="Track Activity">
    Use the Activity tab to monitor usage patterns and detect any issues
  </Step>

  <Step title="Gather Feedback">
    Collect feedback from users to identify enhancement opportunities
  </Step>

  <Step title="Release Updates">
    Make improvements, push new versions, and publish updates to the App Store
  </Step>
</Steps>

## Advanced App Development

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

<CardGroup cols={2}>
  <Card title="Custom React Components" icon="react">
    Build rich interactive UI components using ReactJS
  </Card>

  <Card title="Multi-Service Integration" icon="network-wired">
    Connect multiple external services in a single app
  </Card>

  <Card title="Advanced Authentication" icon="shield-check">
    Implement OAuth and other complex authentication flows
  </Card>

  <Card title="AI-Enhanced Processing" icon="robot">
    Combine your app with Knowledges for intelligent data processing
  </Card>
</CardGroup>

## 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

<CardGroup cols={2}>
  <Card title="Create a RAG Agent" icon="database" href="/resources/tutorials/no-code-rag-agent">
    Build an agent that uses AI to answer questions from your documents
  </Card>

  <Card title="Implement Webhook Integration" icon="webhook" href="/resources/tutorials/webhook-builder">
    Learn how to create advanced API and webhook integrations
  </Card>

  <Card title="Document Classification System" icon="file" href="/resources/tutorials/data-classification-agent">
    Build an AI system that automatically categorizes documents
  </Card>

  <Card title="Website to RAG Agent" icon="globe" href="/resources/tutorials/website-to-rag-agent">
    Convert a website into an interactive knowledge base
  </Card>
</CardGroup>