All applications built in the Interplay React Builder are exportable as a JSON file. JSON files can then be imported into a new React Builder instance and worked on. Simply select the “Export” option in the top-right of the Navigation Bar....

1. Click the Library button on the top left to reveal the menu 2. Hover the mouse pointer over the Npm Packages option to reveal Install sub-menu 3. Search for Npm Package in the text field and choose the package you wish to install by click on the Install button next to the one you wish to install Note: In order to use the installed NPM package in ...

Step 1:  Drag and drop a modal dialog component. First go to the page sections tab and select the section which says “Interplay-Modal”. Then, select the modal and keep clicking “Select Parent” until the area you are highlighting covers the whole page and has an id. This id will be “modal_###” where the “###” represents a random three digit number. R...

Getting Started The Interplay React Builder has some core architecture philosophies. Primary components which contain or display other components are Page Sections and Columns. Think of Page Sections as rows or grid containers (Columns). All components have pre-designated children which they will accept. Page Sections only accept Columns and Columns...

In this video, Our Machine Learning Engineering Manager walks us through all the features inside interplay and explains how each features works when creating a project. Your browser does not support HTML5 video....

Description The Wink Hub allows your diverse collection of smart products to speak the same wireless language, so that you can easily control them—and customize their interactions—from the Wink app. Wink Hub has two modes the input msg.acton= will perform the action and require msg.vale as the value and msg.payload as the result Input action & v...

Description The Clarifai API offers image and video recognition as a service. Whether you have one image or billions, you are only steps away from using artificial intelligence to recognize your visual content. The API is built around a simple idea. You send inputs (an image or video) to the service and it returns predictions. The type of prediction...

1. Select the flow that you wish to export by drawing a rectangle over the flow. 2. Click ON button on the top right to reveal the menu 3. Hover the mouse pointer over Export option to reveal Export sub menu Note: Export option will be available only when a flow has been selected 4. Choose GitHub option 5. In in window that opens, you will be prompt...

The Interplay React Builder allows you to quickly build and deploy NextJS React Applications through a user-friendly, drag and drop UI.  Users can build a completely stateful React Application with data sources integrated into global and local state. Technology Stack React JS NextJS Tailwind CSS Ant Design...

Description Shippo tracker will receive in msg.carrier and msg.tracking_number as the inputs and msg.payload  will output  the status on the package that the user would like to track. Input carrier (string)The package carriertracking_number (string)Tracking number for the package being delivered by that specified carrier Parameters Access Token(stri...

Create an Interplay Instance and Deploy Log into your Interplay account and create a new application and select “Create App” and choose a Domain Name   Select Application Type “Custom”   Select Data Center   Select Application Size (Nano is recommended for most apps)   Review information and hit submit to launch your instance   S elect Interplay Rea...

React components can have response data from API’s connected directly to local state for components or global state for the application. (Screenshots)...

Description Query Neo4j graph database Code For Above Flow  [{"id":"d11259f7.8acf48","type":"graphenedb","z":"ef28f2f9.711e5","dburl":"","username":"","password":"","query":"MATCH (n:Person) RETURN n LIMIT 25","x":230,"y":780,"wires":[["52d9a72a.903488"]]},{"id":"db569d34.69f07","type":"inject","z":"ef28f2f9.711e5","name":"test","topic":"123345","pa...

(Screenshot)...

Easily add custom JavaScript functions to your application code by writing them into the application.  These functions become available for use anywhere within the application, allowing you to attach them to components such as buttons. Writing Bare JavaScript Functions Step One: From the code panel, select the + button and select “Javascript Functio...

The Custom Components Feature allows users to create reusable, shareable react components. All custom components can be saved and accessed by different projects, based on permissions. View the Custom Components   Add a new Custom Component   Custom Component editor view   Drag your Custom Component into the Canvas   Custom Component available in Can...

Once a React Builder project is published, it it automatically added to its own GitHub repository. This React code can be cloned and worked on as with any other React Project....

All data returned from API responses can be used within the application with a web templating system similar to Mustache JS. (Screenshots)...

This page will show you how to use the selfie camera to create a color picker. Step 1:  Add a selfie camera and image component to the page, and write the code to display the selfie in the image component (for more information, check out the help section for how to use the selfie camera). Also drag an SVG icon and give it an id. Step 2:  Select the ...

This document has covered the example of using a database with the page builder. For this example demo, we will use this previously created contact form and SQLite database. You can see the video of database binding with the page builder at the bottom of this page or go through the below documentation. Step 1: In the SQLite database, first create a ...

Description Lookup and enrich individuals by sending any identifiers you may already have, such as an email address, Twitter handle or phone number. These identifiers will then be used to locate and return any additional information we may have, such as a person’s name and social handles. Code For Above Flow [{"id":"9d529ad8.e2d098","type":"fullcont...

Containers     Page Section Page Sections are a required component in order to construct and UI. Think of Page Sections as an HML <section/> tag. Utilizing Page Sections encourage better organized app layouts by encapsulating unique areas of an app.   Columns Columns make up the grid / column layout for your application. Containing content wit...

Steps: 1.  On the top of left-hand navigation conduct an open search for ‘Twitter’. There are two nodes available for Twitter. Twitter in and Twitter out. Twitter allows you to pull data from Twitter while Twitter out allows you to push tweets on to Twitter. Select Twitter in and drag and drop onto the white space. 2. Edit the Inject node by double-...

Applications are easily deployable from within Interplay and available to view from a development url. (Screenshot)   Multiple options can be selected.  ...

Docker is a set of platform as a service products that use OS-level virtualization to deliver software in packages called containers. Containers are isolated from one another and bundle their own software, libraries and configuration files; they can communicate with each other through well-defined channels. In this example, our Machine Learning Engi...

This flow will allow you to upload a path layout image and start and end coordinates. It will output the optimized path between given start and end points. optimized path can be visualized. Here we will find the optimized path of the layout image shown below. Step 1. Check for the layout image in appropriate storage path (/DATA/path_optimisation/) o...

Steps: 1.  Select an Inject node under the Input section and then drag and drop it onto the white space. An inject node is basically what you would type in the google search bar if this was a google application. 2. Edit the Inject node by double clicking on it. This will display attributes for that component. Enter the following: Payload – String To...

Interplay API setup creates a simple HTTP mount point that receives a query parameter and performs any operation.  In this example, the API receives a query parameter and then searches the index.  Steps: 1. Select ‘HTTP In‘ node under the Components section and then drag and drop it onto the white space. The HTTP node provides an input node for HTTP...

Innovation is the key to scalable, sustainable future of your business interplay helps you to get your innovation projects executed faster  To get started developing right away, go to https://interplay.iterate.ai and click login.  You will be brought to our Interplay Login page where you will just need to enter your credentials. If this is your firs...

Additionally, whenever a viewport setting is selected (Mobile, Tablet, Small Desktop, large Desktop, etc.), any styling or component settings completed within the “Inspect” tab, will be specific to the currently selected viewport. (Screenshot)...

POST is a request method supported by HTTP used by the internet. By design, the POST request method requests that a web server accepts the data enclosed in the body of the request message, most likely for storing it. It is often used when uploading a file or when submitting a completed web form. In this Example, We will learn how to change a GET req...

Git is a distributed version-control system for tracking changes in source code during software development. It is designed for coordinating work among programmers, but it can be used to track changes in any set of files. Its goals include speed, data integrity, and support for distributed, non-linear workflows.   A Git repository is the .git/ folde...

Description Videogram provides powerful and flexible technology for enabling discovery, driving engagement, analyzing audience behavior, maximizing revenue, and aggregating your video strategy across all screens, devices & online video networks in an extremely easy manner. Code For Above Flow [{"id":"873fa85b.3ab038","type":"videogram","z":"862a...

This flow will allow you to input a video file and detect fire in that video. A model will be selected for fire detection. It'll accept a video as the input. Fire will be detected in the input video. Predictions can be visualized. Here we will use “yolo-416-fire’’ model to detect fire in the input video. Step 1. Check for the sample fire videos in t...

To Create an Instance/Application: 1. log in to Interplay with your credentials. 2. Click on "Create New Group" (upper left corner) and name that group with a description.  2. Click on groups " whatever group name you gave" (upper left corner) and select "New Application" 3. Select the group and name the domain name (your name or give any name) for ...

Description The Webhose.io API provides access to structured web data feeds across vertical content domains. Our crawlers download the web, structure the data and index it into domain-specific repositories you can access on demand. This component allows the user to pass a string query containing the filters that define which posts will be returned. ...

The pre-built page section feature is a library of commonly used layouts within web applications. Although these sections are pre-built, they are fully customizable as with any other component, once dropped into the Canvas. (Screenshot)...

Welcome! We are excited that you want to learn Interplay. The Interplay middleware platform provides the simplest and quickest way to build complex applications. Interplay is a  drag-and-drop environment  where innovation apps can be rapidly developed and commercialized through modularized pre-built components -- then pushed into production environm...

Description This Twilio component allows a user with a valid Twilio number to send messages to the a specified phone number as input. Input Payload (string)The phone number to send the message to Topic (string)The message to send Parameters Account Sid(JSON)The users Sid for their twilio accountAuth Token(JSON)The users Auth Token for their twilio a...

By default, a Home page will be created for any new applications. Create a New Page Step One: To add a new page, find the dropdown in the navigation bar which lists the current page you are on, and select “Add New.”   Step Two: Give your new page a name   Step Three: React Builder defaults your view to the newly created page!   Removing a Page Remov...

Description Restb.ai provides its computer vision service via a RESTful API web service. The API is built upon a simple premise: you send image URLs to the service and it returns AI computed predictions. The type of prediction returned is based on the model specified for processing the image. Input payload (string) A url linking to the image to be a...

Description Asseblyai node allows the user to enter a url to an audio file and it return a transcript of the audio file Code For Above Flow [{"id":"d68824ac.68d028","type":"inject","z":"76d574c8.0ddb8c","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":60,"wires":[["f4b21310.a4a4...

The objective of creating this page is to give a demo/example of how to use a page builder to create a website. Here I have created a basic contact form using the page builder. Have a look below. Please read through this document for an overview of page builders before you begin reading. Example:  Contact form with thank-you page Here, we've created...

Description This node allows the user to return a list of jobs, apps, and to submit events to the specified index Input payload(string)The event to be submitted Parameters Type(string)The Type of transaction to be completedUser Name(string)User name associated with the splunk accountPassword(string)The password for the splunk accountScheme(string)ht...

Interplay React Builder allows users to connect data sources, functions and state directly to application components. Resource Types React Builder supports REST API endpoints as well as Interplay Node Functions   API Action Types Users can integrate API endpoints with action types: GET POST PATCH PUT DELETE   Headers   URL Parameters   Cookies   API...

Description This node allows the user to enter a string for 1 object to be searched for in a pre-existing index in the users Algolia account. Code For Above Flow [{"id":"12668e81.572ed1","type":"algoliasearch","z":"8cf3db3c.c92288","API_ID":"","API_Key":"","Index":"Product","name":"","x":250,"y":320,"wires":[["c05491e7.389e"]]},{"id":"f8a212e.606aef...

Description  Word2vec is a node used to create visualizations of a given Word2vec model that can be viewed via Tensorboard. This node can also be used to retrieve the Word2vec vector of a given word. Word2Vec Visualization  The node can act as a standalone node for visualization. !Note: make sure the interplay port 8066 is open for visualization to ...

Let's kick in create an HTTP endpoint that responds to GET requests with some static content, such as an HTML page or CSS stylesheet. Steps Use the  node to listen for requests, a node to include the static content, and an  node to reply to the request. Example We are going to use the below HTML code to show up on a page that we create using Interpl...

Nodes get created when a flow is deployed, they may send and receive some messages whilst the flow is running and they get deleted when the next flow is deployed. They consist of a pair of files: a JavaScript file that defines what the node does, an html file that defines the node’s properties, edit dialog and help text. A  package.json file is used...

Description Videogram provides powerful and flexible technology for enabling discovery, driving engagement, analyzing audience behaviour, maximizing revenue, and aggregating your video strategy across all screens, devices & online video networks in an extremely easy manner. Code For Above Flow [{"id":"d8570046.249e7","type":"videogramV2","z":"81...

This document describes the form validation process with the page builder on the server side. We've created a contact form initially and validated that. To learn more about creating a contact form, read this document. You can watch a video of the form validated on this page or go through the document. Step 1: The contact form is already created with...

To import an existing flow from Git hub on to Interplay make changes and send it back to your team to check if the work has been done correctly follow these steps. 1. Click on project settings on top left corner to open up projects. 2. Click on clone repository to pull the repository from git hub to Interplay. Type the git hub specific repository UR...

Description This node allows the user to enter a JSON formatted string for 1 object to be entered into a pre-existing index in the user’s Algolia account. Code For Above Flow [{"id":"9be9b6b2.7b23b8","type":"algoliaindex","z":"2371a025.57348","API_ID":"","API_Key":"","Index":"","name":"","x":250,"y":300,"wires":[["c4090305.3bc3a"]]},{"id":"e1407952....

Overview This tutorial makes a flow that starts to bring in data from external sources to do something useful locally. The flow will: Retrieve information from a website at a regular interval Convert that information into a useful form Display the result in the Debug sidebar 1. Add an Inject node In previous tutorials, the Inject node was used to tr...

Description Please enter Jasonette style JSON into the app for mobile design once saved msg.payload will display the URL that you need to export to mobile app Code For Above Flow [{"id":"c4d3fe.70620c","type":"jasonette-mobile-app","z":"cb7e7ae0.322888","name":"jasonette","func":"{\n  \"$jason\": {\n    \"head\": {\n      \"title\": \"footer input\"...

Object Properties First off, the Msg Object is a standard JavaScript Object that comes with existing properties. The Msg Object can be altered throughout a flow by adding or deleting the properties of the JavaScript Object. The value of a property can be any valid JavaScript type, such as: Boolean – true, false Number – eg 0, 123.4 String – “hello” ...

Description This node allows access to Yottaa User and Public API. In the following flow we show an example of making the API call to get the user’s sites. Code For Above Flow [{"id":"c0e88fff.73b0b","type":"Yottaa","z":"31563c97.599414","API_Key":"","userid":"","name":"","apitype":"getyoursites","monitorid":"","sampleid":"","siteid":"","profileid":...

What is Page Builder in the Interplay? Page Builder is a tool that provides you to create, edit and customize your website. It provides the advanced elements and components which help in building a website. Here listed some key features of the Page Builder: Theme and template support for your website Drag and Drop the elements and component  Preview...

Description Get all index content without any record limit. Can be used for backups. The browse method is an alternative to the Search index method. The search method cannot return more than 1,000 results. If you need to retrieve all the content of your index (for backup, SEO purposes or for running a script on it), you should use this method instea...

  This flow will allow you to input a video file and detect fire in that video. A model will be selected for fire detection. It'll accept a video as the input. Fire will be detected in the input video. Predictions can be visualized. Here we will use “yolo-416-fire’’ model to detect fire in the input video. Step 1 - Create the flow like in the below ...

Over 100 Nodes in Interplay ranging from Database Integration to Machine Learning, there is a Node for that big feature you are working on. But sometimes the Node you need doesn’t match your specifications exactly and you risk losing your feature… luckily you can upload your own personal nodes to Interplay and get that feature done! In this guide, w...

Generated React and Javascript code can be previewed for pages built within the Interplay React Builder....

Interplay React Builder has multiple viewport emulator settings to assist in building responsive web applications. Phone Viewport   Tablet Viewport   Desktop Viewport   Large Desktop Viewport...

Whilst running, a node is able to share status information with the editor UI. For example, the MQTT nodes can indicate if they are currently connected or not. To set its current status, a node uses the status function. For example, the following two calls are used by the MQTT node to set the statuses seen in the image above: this.status({fill:"red"...

Description AYLIEN Text Analysis API is a package of easy to use Natural Language Processing, Information Retrieval and Machine Learning tools that will help you extract meaning and insight from text and images.  The application id and application key  for Aylien could be found on a https://aylien.com/ after signing up. Code For Above Flow [{"id":"f...

This flow will allow you to upload an image dataset with labels as an input and train an image classifier model. Uploaded images will be preprocessed and can be  visualized. An Image Classification model will be trained and can be visualized. Predictions can be done and visualized for selected dataset with trained Image Classifiers. Here we will tra...

What type of nodes exists within Iterate's Interplay? There are hundreds of APIs that are easily accessible through Iterate Interplay. The types of nodes that exist within InterPlay   and that can be used to create a prototype are : Startup Services, Quick AI, Blockchain, Blockchain, Enterprise Services, Functions and etc. You can openly search for ...

Introduction Private large language models are specialized versions of natural language processing tools maintained within an organization. These private models offer customisation for specific tasks, enhanced security and compliance for sensitive data, and can be optimised for the organization's unique hardware and resources. Although they may invo...

The goal of the selfie camera component is to capture the picture with face detection with position and lighting.  Below is an example of how to use the Selfie camera component.  Step 1: Select a selfie camera component from the left panel and add it to the canvas. Step 2: After that, the front camera will open and the indicator will display the fac...

This document has listed some shortcuts and suggestions for a code editor which will help in the quick development of the site with the page builder. The below example will help you to understand how and where these suggestions will add. So go through the documentation or watch the video at the end. Step 1: You can modify or add the behavior of the ...

This article discusses how to make a “Create an Account” page and a “log in” page using Page Builder. Create an Account page Step 1: Select a “Create an Account” page section from the “Add Section” tab. Add a “Name” attribute to each input box, as you will need it to access the data.  Step 2: Click on the form, then select “Add Action” to create a n...

Description The current version of this component only allows the creation of Datasets by specifying the table schema in the msg.fields property. Code For Above Flow [{"id":"49b904c.6d9cdfc","type":"geckoboard","z":"eb81f250.bb565","name":"","tokens":"","x":430,"y":640,"wires":[["74020171.2bd4f"]]},{"id":"778934d8.61062c","type":"inject","z":"eb81f2...