Appmixer is an embedded iPaaS (Integration Platform as a Service) platform designed for SaaS vendors. It enables them to launch native integrations and no-code automations within their products. Appmixer significantly accelerates the time required to deliver integrations to customers.

There are three main use cases for Appmixer.

Embedded iPaaS

Instantly deliver an integration marketplace within your SaaS product using Appmixer Studio and its no-code drag-and-drop designer. Pre-build integrations that enable your end-users to connect your product with other third-party apps and APIs. This feature allows for seamless integration and enhances user experience by facilitating easy connections with external applications.

Embedded Workflow Automation

Enhance your product with embedded workflow automation that offers no-code capabilities. This feature empowers your end-users to visually automate their workflows, customize your product, and connect to any third-party application, facilitating a more versatile and user-friendly experience.

Internal Process Automation (iPaaS)

Leverage the Appmixer no-code automation designer to streamline processes within your company, all while eliminating the need to write any code.

Being equipped to troubleshoot your customers' integrations is crucial, as there are myriad reasons why integrations might encounter issues. The most frequent problems stem from integration misconfigurations, your end-users revoking previously granted permissions, alterations in third-party apps leading to the use of outdated data, service outages, and various other factors. When your customers encounter difficulties, it's essential to have the necessary tools to investigate and understand the causes of these issues. This tutorial is designed to provide you with the knowledge and resources needed for effective troubleshooting.

Look up your users

To access information on your end-users, navigate to the "Admin" interface within the Appmixer Studio and proceed to the "Users" page. Please note, you must possess admin user privileges to access the "Admin" interface:

In the "Users" section, you'll find a comprehensive list of all users within the system. The interface allows you to search for users based on multiple criteria, with email being the most common search parameter. Upon locating a user, you can click on the Flows icon () to view all the flows associated with that user, including integration instances and automations.

Inspect Flows (integrations or automations)

After locating the flow you intend to troubleshoot, proceed to examine the flow's logs and configuration. Click on the "Logs" link to view the flow's logs, and utilize the "Flow" link to inspect the flow's configuration in the Appmixer Designer.

As an Appmixer admin user, you have the capability to directly make minor adjustments to a flow from within the designer. However, it's important to recognize the boundaries of such modifications. For instance, re-authenticating to the applications within the flow is not possible, as authentication was initially performed by the end-user. Additionally, altering the flow's structure is discouraged, as it may necessitate new inputs from the end-user. Focus on implementing small, necessary corrections, and guide the end-user to undertake more significant changes by re-configuring their integrations according to your instructions.

This tutorial is designed to walk you through the process of building your first automation. Whereas integrations consist of predefined workflows that end-users can easily activate via a web form, automations are a powerful tool for enhancing your internal business operations. They allow you to link applications and services used within your organization or to launch bespoke business logic that meets your unique requirements.

Automation Overview

In this tutorial, we'll construct an automation designed to gather customer feedback via Typeform, relay each piece of feedback as a Slack notification, and automatically generate a GitHub issue based on the customer's response to the question: "What improvements or additional features would you like to see in future updates?". Utilizing OpenAI's ChatGPT, the generated ticket will be structured as a comprehensive user story, encompassing title, role, goal, reason, acceptance criteria, and test case.

Let's delve into the specifics of the automation flow:

Here's the first piece of customer feedback collected through our Typeform:

As a consequence, we received a notification in Slack:

Furthermore, a new GitHub Issue was created containing this content:

A Step-by-step Guide

The upcoming sections will walk you through the steps required to build the aforementioned automation from start to finish.

Select a trigger

Every automation begins with a trigger, which initiates the automation flow. Typically, triggers can capture data from external sources—like a Webhook trigger or a Gmail - New Email trigger—or they can be based on time events, such as a Scheduler or Timer. This setup allows you to program your automations to run at predetermined times, for instance, "every day" or "each week on Monday at 2pm". A unique trigger type is the "On Start" trigger, which activates immediately when your automation flow is started. This is particularly useful for batch operations that you intend to run only once or for debugging purposes.

To start building an automation, go to the Automations page and select "Create Automation". This will lead you to the Automation Designer. The first item you'll encounter there is the Trigger Selector. Look up "Typeform" and choose the "New Entry" trigger.

In the Configuration Inspector on the right, authenticate with Typeform and select one of your forms:

Add Actions

Click Add Step on the side of the New Entry trigger and find Slack. Pick the Send Channel Message action. Authenticate with your Slack account and select a Slack channel to direct your notifications:

Click the "+" button next to the Slack message field to include data placeholders for each Typeform question. These placeholders will be substituted with real data once the automation executes and retrieves customer feedback from Typeform:

Similarly, add the OpenAI - Send Prompt action. Configure the model, set the response type to json_object, and define the prompt as follows:

You can copy paste the prompt from here: From the below product feedback on improvements and additional features that was posted by a customer of our product Appmixer, create a user story for developers so that they have a concise description with a test case defining the feature. Format the user story as a JSON object with "title" and "content" properties. The "content" must contain a Github Markdown text with the following sections: "title", "role", "goal", "reason", "acceptance_criteria" and "test_case". Product feedback: <map your data variable from the form here>

The goal is to have ChatGPT generate a JSON comprising two fields: "title" and "content." This JSON will then be seamlessly integrated into the "Github.CreateIssue" action. The structure of our output JSON should resemble the following:

Create new variables and transform data with Modifiers

When your automation flow includes a component that outputs data you need to alter and then utilize the modified data across various configuration fields, employing the Control.SetVariable component proves beneficial. This component enables you to define custom variables, which can subsequently be referenced by name in other linked components. This approach is particularly advantageous when you aim to use transformed data in several locations, as it obviates the need to replicate the same modifications for a single variable across multiple fields.

In our scenario, we intend to capture the output of the ChatGPT completion (ChatGPT's response) in a variable named result. This allows us to conveniently reuse this data for both the title and description fields when we're ready to create our GitHub issue.

Given our interest in only the first choice, and considering that the message content of this choice is a JSON string (as specified in our prompt to ChatGPT), we need to manipulate the Choices variable to extract our desired JSON. To transform data within Appmixer, simply click on a variable to access the Modifiers panel and then sequentially apply the necessary modifiers, akin to how formulas are utilized in an Excel sheet. In our case, we will employ the sequence of modifiers: First Item -> JSON Path -> Parse. This sequence will allow us to select the first item from the Choices list, extract the message.content from this item, and finally parse the message.content into a JSON object for later use. It is crucial to note that ChatGPT outputs a JSON string, not a JSON object, necessitating the Parse modifier to convert the text into structured data.

Finalize our Workflow Automation

The final step involves creating a GitHub Issue using the title and content (in Markdown) generated by our AI. Navigate through the interface to locate the GitHub connector, then drag and drop it onto the canvas. Select the "CreateIssue" action and assign response.title and response.content (the JSON fields generated by ChatGPT) to the corresponding fields within the "Github.CreateIssue" action. As an additional step, choose the "enhancement" label from the selection box to categorize our GitHub issues as enhancements.

Start and Monitor Your Automation

Your automation is now set up and ready to be launched. Begin by giving it a distinctive name; this can be done by double-clicking on the default "New flow" title and renaming it to something more descriptive, like "Track Customer Feature Requests". To activate your automation, click the "Start flow" button located in the top right corner. You'll notice the log panel opens at the bottom displaying the initial log entry: "Flow started". As customer feedback starts coming in through our Typeform web form, the log panel will populate with entries detailing the actions taken within the flow. These logs provide insights into each component's input, the data transmitted between components, and the output generated, offering a comprehensive view of the automation's operation:

Clicking any log entry will reveal a panel that offers additional details.

Additionally, you can visit the Insights page to access enhanced filtering options and gain improved visibility into your logs. For instance, if you're specifically interested in logs pertaining to the CreateIssue component, you can utilize the Flows selector in the left panel. This allows you to select and view logs exclusively for the component of interest.

This action will produce a filtered list of logs:

Additionally, the Time range picker allows you to choose any date interval you're interested in for viewing the logs.

Lastly, you can search for specific strings using the Search filter to find particular entries in the logs.

Appmixer offers a REST API that mirrors the functionalities accessible through its UI. This API enables advanced customizations, additional automations, and scripting capabilities for enhanced integration flexibility.

The base URL for the Appmixer REST API varies according to your specific Appmixer tenant. The URL format is as follows:

https://api.YOUR_TENANT.appmixer.cloud

The majority of the Appmixer API endpoints require authentication using an access token associated with an Appmixer user account. Certain endpoints may require that this user to has the admin scope; specific requirements are detailed at each endpoint's documentation. To obtain a user's access token, sign in using the user's credentials:

$ curl -XPOST "https://api.YOUR_TENANT.appmixer.cloud/user/auth" \
-H "Content-type: application/json" \
-d '{ "username": "[email protected]", "password": "abc321" }'

On success, Appmixer returns a JSON object structured as follows:

{
    "user": {
        "id": "5c88c7cc04a917256c726c3d",
        "username":"[email protected]",
        "email": "[email protected]"
    },
    "token":"eyJhbGciOiJIUzI1NiIsInR5cC..."
}

Use the token in the Authorization header to authenticate your user to the Appmixer API. For example:

Find the full documentation to the REST API .

App Events provide the simplest method for sending data to Appmixer. To utilize App Events, select the OnAppEvent trigger from the Utilities category of connectors:

Assign a meaningful name to your app event and consider providing sample data. Although including sample data is optional, it facilitates referencing the data from the app event in subsequent components.

Providing an Event Data Example populates all detected JSON fields as variables in subsequent connected components. This allows you to easily use and reference these data placeholders throughout your integration, ensuring that the necessary information is accessible and can be dynamically incorporated into various parts of your workflow. This practice enhances the configurability and functionality of your automations by clearly mapping out how data flows between components.

Triggering OnAppEvent using Appmixer SDK

Once your automation or integration templates are built, published, and users begin activating your integrations, you can trigger app events by using the appmixer.api.sendAppEvent(EVENT, DATA) function provided by the client-side Appmixer SDK. This function enables you to programmatically send events and associated data through your application, facilitating real-time interaction and response within your integrations.

This triggers all the integrations or automations associated with the user who is authenticated with the access token used in the SDK, specifically targeting those that begin with the OnAppEvent configured with the Event Name set to contact-created.

You can also trigger the event by using the built-in UI in Appmixer Studio:

1. Open the Integration Designer in Studio and create a new integration with an OnAppEvent trigger.

2. Instead of publishing, click Start Test to run a temporary test instance of your integration.

3. While the test is running, click Test → Send App Event in the top bar.

Triggering OnAppEvent using HTTP requests

Alternatively, you can trigger the OnAppEvent from either client-side or backend-side code by sending an HTTP POST request to the endpoint https://YOUR_APPMIXER_TENANT_API_URL/plugins/appmixer/utils/appevents/events/EVENT. When making this request, include the event data in the payload. This method allows you to directly interact with the Appmixer system via HTTP, providing flexibility to trigger events from various parts of your application infrastructure.

If you don't have the access token for a virtual user, you can obtain it by using their username and password to call the . This process involves submitting the necessary credentials to authenticate the user, after which the endpoint will provide an access token. This token can then be used to authorize subsequent actions or API calls under that user's identity.

The "Connectors" section of the interface shows all available connectors that you can manage, including options to install, update, or remove them. Connectors that are already installed will display an "Installed" badge at the top. Furthermore, you have the ability to search for connectors based on various criteria, such as their name or installation status, to easily find the ones you're interested in managing.

Connector Details

Clicking on any connector will redirect you to that connector's detailed page, where you can find more information and manage settings specific to that connector.

Set state property to { persistent: true } to tell the engine not to delete component state when flow is stopped. See context.state for more information.

When set to true, the component will not be visible to end users.

The author of the component. Example:

{
    "author": "David Durman <[email protected]>"
}

(optional)

The label of your component. If not label is specified, then last part of name will be used when component is dropped into Designer. If your component name is appmixer.twitter.statuses.CreateTweet then CreateTweet will be name of the component unless you specify label property. This allows you to use spaces as opposed to the name property.

{ "label": "Create Tweet" }

This tutorial will guide you through the process of creating, testing, and publishing your first integration. Specifically, you will learn how to:

• Build an integration template using the Appmixer no-code Studio.

• Parametrize your template by adding fields to gather information from your end-users through an easy-to-use web form (Wizard).

• Validate your integration's functionality through testing.

• Publish your integration to your end-users for immediate use.

• Explore a demo of how your integrated marketplace could be presented to your end-users.

Integration Overview

In our tutorial, we will demonstrate an integration that processes newly created contacts as external events. This simulates a real-world scenario where you would send these events via HTTP requests from your application code. The integration examines each contact for the presence of a hotLead parameter. If this parameter is set to true, the contact is then forwarded to Slack.

Create an Integration Template

On the Integrations page, click the "Create Integration" button located in the top right corner. Then, select the OnAppEvent trigger from the Trigger selector. Utilizing represents the simplest method for sending data to Appmixer.

Configure the OnAppEvent trigger by setting the Event name to contact-created.Use { "first": "John", "last": "Doe", "hotLead": true } as the Event Data Example. This data sample will enable us to reference the specific data fields later in the integration workflow.

Next, add the Condition component to your flow. Do this by clicking Add Step on the right side of the On App Event component. Then type in "condition" and select it.

Configure the Condition component to check whether the hotLead property from the OnAppEvent trigger is set to true. Use the "+" button next to any configuration field. This feature allows you to reference data from any component earlier in the integration flow (data variables), regardless of its depth in the workflow.

Next, click Add Step on the true output port of the Condition step. Then, find the Slack - Send Channel Message component:

Select Configuration Fields to Collect from your End-Users

Our integration template is nearly complete. The next step is to setup the Slack - Send Channel Message component. This component includes three configuration fields: Slack account, Slack channel, and Message. These fields should not be hardcoded by the template creator. Instead, they are intended to be customizable by the end-user. This means the end-user will authenticate with their own Slack account, choose their desired Slack channel, and tailor the message to be sent.

To allow end-users to configure fields, click on the magic wand button next to each field. This will add the fields to the Configuration Wizard (the final product of this setup) for end-user customization:

You can make it easier for your users by choosing default values for any field. To do this, simply enter a value into the field. For example, we'll set a default value for the "Slack message" field:

Additionally, you have the option to apply data transformations to any data variable. To do this, click on the desired variable, which will open the Modifiers panel. Here, you can define a sequence of modifiers that will be applied in the specified order once the integration is activated and the data becomes available. For our scenario, we aim to transform the last name of the incoming contact to uppercase.

Finally, edit the name of the integration:

Test your Integration

At this point, our integration is prepared for publishing. However, it is important to test it to see that it works as expected. Initially, we should examine the appearance of the final configuration web form (Wizard) as it will be presented to our end-users. Additionally, for improved clarity, we recommend renaming the default "Channel" and "Message" fields within the wizard to "Slack Channel" and "Slack Message," respectively. To do this, click on the "Edit Wizard" button located at the top of the interface. This will allow you to view a live preview of the wizard and make adjustments to the fields via the left navigation panel.

Next, proceed with a live test of the integration. Click the "Start Test" button at the top of the page to initiate the integration within your user context (as the template creator). This action will launch the Wizard in its defined state, allowing you to configure the necessary fields. Once the test integration is activated, you can put yourself in the shoes of your users and test it.

With our test currently running, you have the ability to manually initiate the OnAppEvent trigger. This is achieved by sending a custom App event to the active test integration. To do this, click the "Test" button located at the top of the interface, which will open the Test menu. From here, choose "Send App Event." For the Event name, enter "contact-created," and for the Event Data, use an example such as { "first": "John", "last": "Smith", "hotLead": true }. After submitting the event, monitor your Slack channel to verify that the contact information has been successfully posted.

Additionally, you can view the activity of your running test integration by navigating to "Test" and then selecting "Insights" from the menu:

Publish your Integration to your End-Users

Now that your integration is ready and has been thoroughly tested, you are all set to publish it for your end-users.

Please note, if Appmixer has not yet been , you can use two quick ways of seeing what the final experience looks like:

• Go to https://YOUR_TENANT.appmixer.cloud/integrations (replace YOUR_TENANT with the name of your trial account - the one you see in your browser) to quickly see a preview of what the published template can look like in an embedded integration marketplace.

• Alternatively, go to our demo web app, which also allows you to preview how your embedded integration marketplace will appear in your app once the actual embedding is completed.

Description of your component. The description is displayed in the Designer UI inspector panel like this:

The description should not be longer than a sentence or two. Example:

{
    "description": "This action gets the current weather conditions for a location."
}

You can natively embed Appmixer UI widgets into your application using the Appmixer UI JavaScript SDK. With just a few lines of code, you gain the ability to integrate not only the integration marketplace but also the fully-featured drag-and-drop automation designer. All widgets are customizable with your theme to align with your app's branding.

Install the Appmixer SDK

To incorporate the Appmixer SDK into your web page, follow these steps:

Appmixer includes a variety of ready-to-use connectors, with some being immediately operational while others necessitate user authentication with third-party systems (such as Slack, Gmail, Teams, and many others). This authentication process typically employs the OAuth 2 protocol.

Appmixer features an internal Authentication Hub, functioning as an authentication proxy, which simplifies the setup process by eliminating the need to register your own OAuth credentials with third-party services. This means all OAuth-based connectors offered by Appmixer are ready to use right out of the box. However, should you prefer to use your own OAuth credentials for enhanced customization or compliance reasons, you have the flexibility to do so. This can be done for all or selected connectors by specifying your OAuth credentials (clientId and clientSecret) as outlined below.

The Connector Configuration is available via the interface:

Returns a list of the public files

GET https://api.YOUR_TENANT.appmixer.cloud/public-files

The list returned does not contain the contents of the files.

Set webhook property to true if you want your component to be a "webhook" type. That means that context.getWebhookUrl() method becomes available to you inside your component virtual methods (such as receive()). You can use this URL to send HTTP requests to. See the section, especially the for details and example.

By default, you can send GET, POST, PUT, or DELETE HTTP requests to a component. With the property httpRequestMethods you can define, which HTTP methods are allowed. Additionally, you can add support for the OPTIONS method:

Knowledge base

Please visit the for end-user tutorials.

(required)

The name of your component. The name must have the following format: [vendor].[service].[module].[component]. Note that all the parts of the name must contain alphanumeric characters only. For example:

The vendor part of the component name is the ID of the author of the component set. service and module allows you to organize your components into categories. These categories not only help you keep your components in a tidy hierarchical structure but it also has a meaning in that you can share your authentication and quota definitions between modules and components (more on that later). component describes the actual component activity.

Refer to the getting started guide to get started quickly.

The icon representing the component in the UI. It must be in the Data URI image format as described here: . image/png or image/svg+xml image types are recommended. Example:

When set to true, the component will receive signals in regular intervals from the engine. The tick() Component Virtual method will be called in those intervals (see ). This is especially useful for trigger-type of components that need to poll a certain API for changes. The polling interval can be set by the COMPONENT_POLLING_INTERVAL environment variable (for custom on-prem installations only). The default is 60000 (ms), i.e. 1 minute.

If you successfully installed the Appmixer self-managed package, you should be able to open the Appmixer front-end application at . You should see the sign-in page:

Click on the "Sign up" button to create a new account:

The marker icon that can be added to the component in the UI to give some extra context. The most common use case is to display e.g. a "Beta" badge to tell the user that this component is in beta. The marker must be in the Data URI image format as described here: . image/png or image/svg+xml image types are recommended. The marker icon is displayed in the top right corner of the component shape. Example:

Appmixer Backoffice is an administration UI for Appmixer. Use it to install, update and configure connectors, have an oversight of all the flows and users in Appmixer and set system configuration.

The Appmixer Backoffice is accessible via the "Admin" menu item in the Appmixer Studio:

The component manifest provides information about a component (such as name, icon, author, description and input/outputs definition) in a JSON text file. The manifest file must be named component.json.

Example manifest file:

{
    "name": "appmixer.utils.controls.OnStart",
    "author": "Martin Krčmář <[email protected]>",
    "label": "On Flow Start",
    "description": "This trigger fires once and only once the flow starts.",
    "icon": "data:image/svg+xml;base64,PD94bWwgdmV...",
    "outPorts": [
        {
            "name": "out",
            "schema": {
                "properties": {
                    "started": {
                        "type": "string",
                        "format": "date-time"
                    }
                },
                "required": [ "started" ]
            },
            "options": [
                { "label": "Start time", "value": "started" }
            ]
        }
    ]
}

The authentication service and parameters. For example:

{
    "auth": {
        "service": "appmixer:google",
        "scope": [
            "https://mail.google.com/",
            "https://www.googleapis.com/auth/gmail.compose",
            "https://www.googleapis.com/auth/gmail.send"
        ]
    }
}

The auth.service identifies the authentication module that will be used to authenticate the user to the service that the component uses. It must have the following format: [vendor]:[service]. The Appmixer engine looks up the auth.js file under that vendor and service category. auth.scope provides additional parameters to the authentication module. See the Authentication section for more details.

When auth is defined, the component will have a section in the Designer UI inspector requiring the user to select from existing accounts or connect a new account. Only after an account is selected the user can continue configuring other properties of the component.

Configuration

Set up a new instance with config parameters and set/get methods:

config.el ...

config.storeId

Type: String | Default: []

ID of a store to open within the storage.

Instance

State

loader

Type: Boolean | Default: null

Toggle a custom loading state.

error

Type: String | Default: null

Toggle a custom error message.

Example

Configuration

Set up a new instance with config parameters and set/get methods:

config.el ...

Instance

State

loader

Type: Boolean | Default: null

Toggle a custom loading state.

error

Type: String | Default: null

Toggle a custom error message.

Events

close

Close the editor.

Example

Get all configuration entries

GET https://api.YOUR_TENANT.appmixer.cloud/config

Only returns the values that have been stored by the user through the API

Components are the building blocks of integrations and automations in Appmixer. Each component in a flow reacts on incoming messages, processes them and produces outgoing messages. User can wire components together to define complex workflows and integrations. Usually, components call external APIs but they can also do some internal processing, logic or scheduling.

Take the example above. There are three components in the flow. The first one (Timer) we call a trigger because it does not have any input ports and so the component generates outgoing messages based on its internal logic. In our case, the Timer component sends messages to its output port out in regular intervals that the user can specify in the UI. As soon as a message leaves an output port, it travels through all the connected links to input ports of other connected components. In our scenario, when a message leaves the out port of our Timer, it goes to the location input port of the GetCurrentWeather component. As soon as the GetCurrentWeather component receives a message on its input port, it starts processing it. In this case, it requests current weather information from the API. Once a response is received from the API, the component continues to send the result to its output port weather. Note that the location for which we're requesting the current weather can be specified by the user in the UI. The process then repeats for all the other connected components until no message is generated on an output port or there is no other component connected.

Configuration of the used for this component. Quotas allow you to throttle the firing of your component. This is especially useful and many times even necessary to make sure you don't go over the limits of the usage of the API that you call in your components. Quota managers are defined in the quota.js file of your service/module. Example:

Dynamic values

The {{}} can be used in any property within the quota definition. And values from two objects - the user's , and the account's

Configuration

Set up a new instance with config parameters and set/get methods:

Basic Usage

Load appmixer.js UMD module in your HTML file:

See the following repositories for more comprehensive demos on how Appmixer can be embedded in your apps , .

Configuration

Set up a new instance with config parameters and set/get methods:

Configuration

Set up a new instance with config parameters and set/get methods:

Components can use 3rd party libraries which are defined in the standard package.json file. An example:

The package.json file from the example above tells Appmixer to load the twilio library that the appmixer.twilio.sms.SendSMS component requires for its operation.

Fire patterns is an advanced configuration of a component that allows you to define when your component is ready to fire (ready to process input messages). Fire patterns can make the engine to hold input messages on components input ports until the pattern matches and then send the messages to the component in bulk. Fire patterns are defined as an array or a matrix. An example of fire patterns may look like this:

The fire pattern above is interpreted as follows: The component processes messages only if the first input port has zero or more messages waiting in the queue and at least one message waiting in the second input port queue. Another example can be a fire pattern:

In this case, the component only processes messages if there is at least one message on each of its two input ports. A good example for this pattern is the Sum component:

The Sum component expects messages on both of its input ports before it can produce a sum of its inputs.

Setting a custom API option

Custom API is represented as an object composed of asynchronous methods that you set on your Appmixer SDK instance using the api option:

The list of API methods can be found .

Configuration

Set up a new instance with config parameters and set/get methods:

Appmixer features an internal Authentication Hub, functioning as an authentication proxy, which simplifies the setup process by eliminating the need to register your own OAuth credentials with third-party services. This means all OAuth-based connectors offered by Appmixer are ready to use right out of the box. However, should you prefer to use your own OAuth credentials for enhanced customization or compliance reasons, you have the flexibility to do so. This can be done for all or selected connectors by specifying your OAuth credentials (clientId and clientSecret) as outlined in the section of this documentation.

The Authentication Hub is enabled for all hosted Appmixer tenants. In self-managed installations, the Authentication Hub has to be explicitly set.

Appmixer can be installed in an AWS account via our public Terraform module.

Prerequisities

What This AI Agent Does

In the following sections, you'll learn how to build a support AI agent that can access your data—specifically, support tickets and details about your development teams, including their roles and the contact information of the team lead.

This AI agent can analyze support tickets (e.g., identifying the biggest pain points your customers faced in the past month) and take action—such as suggesting product improvements based on the most common issues and sending those suggestions to the relevant team lead responsible for that part of your application.

Sounds useful? Let’s build it!

Step 1: Setting Up the AI Agent

To begin, we'll create a new workflow in Appmixer, our no-code AI agent builder.

‍

Choosing a Trigger

The first step is defining what will activate the agent. In this demo, we use a chat widget as the trigger, but you can also trigger the agent based on other events—for instance, new emails, new tasks, or scheduling the agent to run at a specific date and time.

Once the chat trigger is selected, Appmixer provides a chat URL and a chat script that allows you to integrate the chat widget into any web application.

‍

Adding the AI Agent

Now, let’s add the central component—the AI agent itself. Appmixer supports various large language models (LLMs), including OpenAI, Claude, Gemini, and more. For this demo, we'll use an OpenAI model.

We define the agent's instructions, specifying its role and scope. The key to building a reliable AI agent is providing detailed and structured instructions so that responses are consistent and accurate. Each message from the chat is processed based on these instructions, ensuring contextual understanding.

‍

Instructions: This field defines how the AI agent should behave each time it performs a task. It specifies the agent’s role, scope, and operational constraints, ensuring it follows predefined guidelines while executing its tasks.

👉 Copy and paste the instructions to build the same AI agent in Appmixer:

‍

In the Prompt field, we'll use the dynamic field from the Chat trigger. This will be the actual message that you or your users type in the chat.

‍

To maintain conversation continuity, we set the Thread ID field, which allows the agent to remember the context of ongoing interactions.

‍

Handling the Agent’s Responses

The agent has two output ports:

• Out: This sends the agent's answers to the chat widget (or any other tool, such as sending a message to Slack).

• Tools: This is where we connect the agent to our data and services, whether first-party or third-party.

To complete the chat functionality, we add a Chat Reply component, linking it to the thread ID and the agent’s response output.

‍

Step 2: Adding Skills to the AI Agent

While our agent can now respond to general questions, we want it to perform real tasks, such as analyzing data and sending emails.

Connecting to External Tools

Under the Tools port, we can add multiple integrations. Whenever the AI agent receives a request, it checks for relevant tools and uses them as needed.

In order to add tools to the AI agent, you need to get familiar with two terms:

Tool description: This serves as a guideline for the AI agent, explaining what a specific tool does. It is set at the Tool Start component level. For example, if a tool sends notifications to Slack, its description could be: "This tool sends notifications to Slack." The AI agent uses this information to determine when to utilize the tool to complete a task.

‍

And second, we use something called Parameters in the Tool Start component.

Parameters: Dynamic fields that we want the AI agent to figure out from the user prompt and then later use in the tools. For instance, if we want the agent to lookup products in our database, we need to set up Product Name on the Tool Start level, let the agent fill the value from the user prompt and then use it to do the lookup.

‍

Sending Emails

1. Add a Tool Start component and define it as “Send emails to the product team.”

2. Define parameters such as recipient, subject, and body, allowing the AI to dynamically generate content.

3. Use the Send Email step to structure and send the email.

👉 Copy and paste the tool description to build the same AI agent in Appmixer:

‍

‍

Analyzing Support Tickets

1. Add another Tool Start component and describe its function as retrieving support tickets.

2. Connect a Google Sheets Get Rows component to fetch past support tickets.

3. Configure the Tool Output to send ticket data to the agent, enabling it to analyze trends.

‍

👉 Copy and paste the tool description to build the same AI agent in Appmixer:

‍

📄 Copy our Google Sheet with 100 demo support tickets and connect it to Appmixer to build the same AI agent as above:

‍

Understanding Product Teams

1. Similar to the support tickets, add a Tool Start component for product teams.

2. Use another Google Sheets Get Rows component to retrieve team details.

3. Map the data so that the agent can provide insights into which team is responsible for which product features.

👉 Copy and paste the tool description to build the same AI agent in Appmixer

‍

📄 Clone our Google Sheet team details and connect it to Appmixer to build the same AI agent as above:

‍

Step 3: Testing and Deploying the AI Agent

Once all components are set up, it’s time to test our AI agent using the Chat URL.

For example, we can:

• Ask it about common issues in the mobile app from past support tickets.

• Request product improvement suggestions based on user feedback.

• Instruct it to send these suggestions to the mobile app team.

For deployment, we take the provided HTML embed script from the chat trigger setup and add it to our web application. This allows our AI agent to be accessible wherever it is needed, providing automated insights and executing tasks in real time.

Expanding Your AI Agent’s Capabilities

The modular nature of Appmixer's no-code builder allows for easy expansion.

For instance, you can:

• Integrate vector database for large-scale data retrieval.

• Connect additional execution tools like task assignment in Asana, ClickUp, or Jira.

• Create multi-agent workflows where each AI agent specializes in a different function, such as:

All integration templates and automations are internally represented as flows. A flow consists of an orchestrated pattern of business activity enabled by interconnecting components together that transform input data (coming from trigger-type of components), perform actions, store data and/or load data to external systems.

Appmixer provides an interpreter for running flows and UI to manage flows.

Flow Descriptor

Flows are represented as JSON objects in the Appmixer engine. The JSON object is called "flow descriptor" in the Appmixer jargon and for the example image above, it may look like this:

The flow descriptor contains information about the components in the flow and their types, how they are interconnected (source), their properties (config.properties) and data transformation for all input ports (config.transform).

Configuration

Set up a new appmixer instance with configuration parameters passed directly into the constructor or use the set/get methods:

baseUrl

Type: String | Default: null

Base URL of your Appmixer engine REST API.

accessToken

Type: String | Default: null

Access token of an authorized user.

debug

Type: Boolean | Default: false

Enable debugger for development purposes.

theme

Type: Object | Default: DefaultTheme

l10n

Type: Object | Default: DefaultL10N

Define custom localization texts.

lang

Type: String | Default: en

Specify a language code for the localization of components.

api

Type: Object | Default: {}

Set custom API methods.

Instance

appmixer.ui

Register and create UI Widgets.

appmixer.api

Use methods of built-in API Module.

appmixer.set

Set configuration property.

appmixer.get

Get configuration property.

appmixer.registerCustomComponentShape

Register a custom Designer component shape.

appmixer.registerInspectorField

Register a custom Designer inspector field.

Configuration

Set up a new instance with config parameters and set/get methods:

config.el ...

Instance

State

loader

Type: Boolean | Default: null

Toggle a custom loading state.

error

Type: String | Default: null

Toggle a custom error message.

Events

chart:clone

Clone chart.

chart:remove

Remove chart.

chart:open

Open chart in Chart Editor.

Example

When errors arise in running automations or integrations, Appmixer does not automatically send emails to your end-users. Instead, it offers complete customization of communication with your end-users, enabling you to send your own branded emails or other types of notifications. This approach allows you to maintain consistency in your communication strategy and ensure that all messages align with your brand identity.

Get Services Configuration

The majority of APIs define limits on the API usage. Components that call APIs need to make sure that these limits are respected, otherwise their API calls would start failing quickly. The quota.js module allows you to specify what those limits are on a per-service, per-module or even per-component basis. The Appmixer engine uses this module to make sure API calls are throttled so that the usage limits are respected.

The quota module must be named quota.js and must be stored under either the service, module or component directory (i.e. [vendor]/[service]/quota.js , [vendor/[service]/[module]/quota.jsor [vendor/[service]/[module]/[component]/quota.js.

An example of a quota module:

Configuration

Set up a new instance with config parameters and set/get methods:

Configuration

Widgets are included in appmixer.ui instances made with Appmixer constructor:

Setting Custom Strings

A strings object is represented as a JSON object that you set on your Appmixer SDK instance using the set('strings', myStrings) method:

Overview

Audit Logs provide a comprehensive record of all activities and changes within your Appmixer tenant. This feature enables administrators to track user actions, monitor system changes, and maintain security compliance by reviewing who did what and when.

Appmixer Self-Managed package is shipped as a zip archive and allows you to install the Appmixer platform on your own infrastructure or in a cloud-computing platform.

Prerequisites

• Kubernetes 1.29+ or OpenShift 4.16+

An optional object containing localization strings. For example:

For more information about component localization, refer to the Custom Component Strings section.