Jet Admin is an app builder that allows you to create Client Portals, Business Apps, and Internal Tools with your existing data, whether it's from databases, APIs, or Storages. You can build apps such as Onboarding apps, Admin Panels, Vendor portals, CRMs, and much more quickly and without code.
Building a Business App?
This 2-min video will explain what Jet Admin is and what you can build with it:
: Connect Databases, business apps (Airtable, Stripe, Zendesk), Data Warehouses, Internal and external REST or GraphQL APIs, and File Storage.
: Create a single source of truth (SSOT) that syncs to your multiple data sources (Stripe, Hubspot, Salesforce, ...).
Drag and drop UI components (Tables, Forms, Charts, Details Images) onto Layouts (Modals, Columns, Tavs) and connect them to your data sources.
Building a Portal?
This 5-min video will walk you through the process of building a client portal from scratch:
Ready to Get Started?
This Quickstart Guide will walk you through the necessary steps for building your first app in Jet:
: Design pixel-perfect components or use 50+ ready-to-use components from Marketplace.
: Create multi-sequence Automation with over 30+ automation blocks and trigger them by Webhook or Schedule jobs every minute, hour, day, or month.
In this section, you'll learn how to connect your Data to Jet Admin.
You can connect as many data sources as you need to create a centralized place for all your operations. You can integrate with anything using native integrations or custom APIs.
Use the submenu to navigate to a particular topic or start with the first one:
In this Crash Course section, we'll learn the fundamentals of the App builder.
App builder is a core part of Jet Admin. It allows you to assemble your UI, and layout as well as bind and transform data to create custom user flows for your app. All this is done through an intuitive Drag & Drop and Point & Click interface.
Go into the submenu to navigate to a particular topic or start with the first one:
In this Crash Course, we'll learn the fundamentals of Jet Admin so you can start building your app today.
We'll also dive deeper into advanced concepts to help you get the maximum juice for the squeeze.
Finally, we'll build some of the most popular kinds of apps together, guiding you step by step from the square one to production-ready.
Jet Database
Google Sheet
Custom API Action (Zapier)
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Firebase
Data Editor
Data Editor is a key part of the Jet Admin App Builder. Typically you end up in Data Editor right after you connect your data source(s).
In Data Editor you can audit, edit, and refine your data before using it in the App Builder.
Data Editor Interface
This short video will help you understand how to get around Data Editor and start working with your data more quickly.
Data Source Settings
Once you've connected your Data Source to Jet, you can specify its settings, specify the sync intervals, see audit logs, manage collections (tables), and more:
Prepare & Organize Data
Before you start working with your data, it makes sense to organize it so you can easily access the relevant parts.
This video covers the basics of sorting, filtering, working with columns, and more.
Edit Data
In this video, we'll learn how to edit your data in Data Editor:
Edit particular fields
Add and delete records
Upload and download data
Related Data
In this video, we'll learn about the related data – what this means and why relational databases are such a great concept. We'll also learn how to work with related data in Jet, how to set relations, and what to do with these related data sets later on.
Field Types
This video explains how to change field types so that you can make sure your data is rendered in the correct format.
Lookups & Rollups
In this video, we'll learn about the very powerful field types Rollups and Lookups. We'll also go over an example of how to use them to "look into" the related table and get the information you need from there.
Files & Storages
This is the overview video on how to work with files in Jet, whether that means connecting an Airtable with files attached to records, connecting a dedicated storage such as Firebase, or using another data source.
Data Blending Intro
In this video, we'll look behind the "no-code" curtain and explore how you can consolidate data from multiple data sources (Non-SQL included) using custom SQL queries.
Builder and User Modes
Any app you'll create with Jet will be built in the Builder mode so it's important to understand what it is and how it interacts with the user mode where your end users will be using the app
Pages and Overlays
Before diving into the features of the builder, it's important to understand the fundamental structural elements of any app you build with Jet: Pages and Overlays.
UI Builder
UI builder is a part of the App builder and allows you to assemble the UI components on the page using pre-made Drag & Drop UI components
Bind Data to UI
To build any app you'll need two things: your UI and the data. But how to link or connect the two in Jet Admin? Learn in this video
Bind Filter to Table
In this and the following videos, we'll cover how to bind data and components in various situations. In this video, in particular, we'll learn about the Filter-Table binding use-case: you have a filter component and you want all the inputs in it to be passed over into the Table and used to filter it.
Bind Form to Table
In this video, we'll learn about the Form-Table binding use-case:
You have a Form and you want this form to dynamically receive the values from a selected row (a record) of a Table into the fields of this form
Bind Related Tables
Slowly ramping up the complexity of the use-cases, now we'll look at the Table-Table binding:
You have two related tables and want, in the second Table, to dynamically show the records related to the selected (clicked) record in the first Table
Bind Input Field to Table
In this video, we'll learn about the Field-Table binding use-case: you have an input field component and you want a value from a specific column from in a selected row of a Table to be fetched into this field
Bind across Pages
In this video, we'll cover binding UI elements from separate pages:
You have a Table on Page 1 and an input field on Page 2 and you want, when you click on the specific row in the table to drill down into Page 2. Additionally, as you drill down, you want to "pass" a specific value from a selected record in the Table into the input field on Page 2
Bind from Page to Modal
In this video, we'll cover binding a UI element in the Modal to the UI component on the Page:
You have a Table on a Page and an input in a Modal and you want, when you click on the specific row in the table to open up the Modal. Additionally, as the Modal opens up, you want to "pass" a specific value from a selected record in the Table into the input field in the Modal
Calculcation & Formulas
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Team & Users Permissions
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Automations
Environments
Custom API Collection
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Nested Filters
Filters for related collections
Nested filters allow you to go through the layers of relations between collections and filter by ANY field from ANY collection (table), that's related to the original one.
Built-in Approval Flow
Create Multi-Step Forms
Component Designer
Custom CRM
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Internal Tool
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Customer portal
This video might be partially outdated due to product changes - we'll replace it with the fresh one soon. However, you still can use the concepts from it and apply them to the current version
Import Figma design to Jet
Supabase CRM
Xano Auth
A data resource is failing to sync
After editing in the structure of the database in the third-party integration source, such as Airtable, Firebase, Xano, Supabase, postgreSQL … etc, the sync with Jetadmin might fail sometimes.
To fix this you need to Recreate Scheme.
1- In Jetadmin, open the resource that is failing to sync;
2- Click on the 3 dots button on top-left near the resource name;
3- Choose ‘recreate scheme’ from the menu;
4- Click the ‘recreate structure’ red button;
5- Wait a few seconds till the data is being imported, then click the ‘Start working with …’ blue button.
Now your resource should be synced and working fine.
Why new SQL tables are not showing?
If you've added new SQL tables to your database, you will need to manually select new tables to load into JetAdmin.
Go to Data -> Your Resource Name -> Three dots -> Edit resource
Scroll down and click on "Choose Tables"
You will see a list of your tables there. You’ll need to click on checkboxes of tables that you want to add and then click on "Update resource".
Building an Internal Tool
Get your first internal app up and running in under 10 minutes
Custom CRM in 10 mins 🚀
To familiarize yourself with how Jet works, let's build a simple CRM that will allow us to View and Edit the Customers:
We'll go through the whole process of creation step by step. Let's start with our data:
App Customization
Branding, color, typographic and menu
This tutorial will show how to customize the app's primary colors, typography, and menus.
The menu is a great component when you would like to implement navigation between pages.
In this section you will learn how to prepare your data for creating a customer portal
You can build Portals with data from pretty much Any Data Source: Firebase, Sheets, Airtable, Stripe, REST API, and so on. We'll use Airtable in our example.
In our case, we will use two tables: Projects and Tasks. The projects table has the Link to Tasks column and the Tasks have the Project column in it.
Projects Table:
Tasks Table:
Next, we generate the app:
Join the Community
Join the community here →
The community is where you can meet, get help & support, share resources and discuss what you're working on. The community is filled with thousands of kind and friendly users – many of them experts – who are willing to help each other out.
We have only a few simple guidelines:
Be polite and kind to other members
Data is not loading
If your data is not loading, there might be many potential causes for this. This might as well render differently in the UI component: the infinite load, or the error.
In this article, we'll review the most common causes of this issue and help you identify and fix the problem.
Case 1 - VPN
A user supposedly hasn't changed anything but started to get this error:
Run Actions
Add actions that users can trigger
A helpful way to think about apps is through how users interact. Two elementary levels of interaction are viewing and editing data, which we built on the previous steps. But often, apps need to be able to perform custom actions with specific workflow.
Initiating a Form is a form of action. Actions such as Open Link and Show notification are native functionalities within Jet, triggering specific processes within your app.
In this tutorial, we'll set up a system to automatically send notifications to the user via email and Slack when a deal is marked as Closed Won.
Creating a Customer Portal
In this section you will learn how to create a customer portal
PM Portal in 5 mins 🚀
As an example, we'll build a Portal for a Consultancy agency's corporate clients where they can View their Projects, Edit the related Tasks, and Update their Profile:
Deep dives
In depth tutorials covering multiple topics
This part focuses on advanced Jet features such as custom HTTP, SQL queries, conditional visibility, and related fields (e.g. single relation). Let's start with the latter:
How to restrict input in a text field?
If you want to allow an input to only receive a certain number or text format, you can use regular expressions.
For example, let's say that you want your input to receive an ID number that is structured like this: “010.124.501-55”. If you don’t know how to write regular expressions, you can simply ask any AI bot to do this for you, for example:
After you get your regular expression, you can input it in the validation field of your component. Click on the component in builder -> Display tab -> Validate -> Use Regular expression
You can also mention your field format in the custom validation error field for easier understanding.
How to clone the whole app?
If you want to duplicate your app, you can save your progress as a backup to a file, create a new app, and restore your app from a backup. Please be aware that created actions won’t be copied, you will need to add them manually.
Go to MyApp in upper right corner -> Environment -> Settings -> Download backup
After that, create a new app and go to the Environment -> Settings to restore your backup.
Publish your App
After you've made the changes to your app, you can preview it to test and, if everything's right, publish it. To preview your app, click on the Preview button at the top.
Great! Now that we're done with the Basics, we can get to the advanced functionality of Jet Admin:
Firebase Auth
Supabase Auth
Build Apps Together
In this section, we'll go over specific apps, building each use-case from scratch to the point when it's up and running.
Go to a specific one in the submenu or start from the first one:
Document
Create documents from your data right in Jet Admin
Generate documents for your Jet Admin applications with the Documint.
UI in seconds
Learn how to generate CRUD interface in seconds
Jet can automatically generate a user interface when creating a new page. There are several use cases that you can cover:
Record Review: allows you to view the details of a record selected from a list.
Record Update: update the data of a record chosen from the list.
Apply Frame to Image
Explore how to set up Frame for Image
To set up Frame for Image – add Border to the Rectangle:
Select Ellipse
Support multi-screens
Explore how to do your components responsive
Responsiveness and support of multi-screens refers to the ability of a design to adapt and display optimally across various devices and screen sizes. It ensures a seamless user experience by adjusting layout and content to accommodate different resolutions, promoting accessibility and usability.
To fit your component to different screen sizes, follow the steps:
Click to fix the width for the text component.
Figma design into a web app
From MVPs to web apps, Jet helps you to deliver pixel-perfect apps that users will love.
Designing your component
Discover how to custmize Cards in Gallery
To customize Cards in the Gallery, follow the steps:
Click on the Gallery
Click on the Property card button in the right panel
Use the search bar to see if your topic has been discussed before
When posting questions, try to be clear and concise and write descriptive titles. If you need help with many different things, try posting them as separate topics.
Where possible, provide links (e.g. to your app), screenshots or even videos that help explain the point you are trying to make
Please be aware that everything you post in the forums is public
If you have questions that others could benefit from – try to post publicly and not privately message other members. Some of our experts and staff get a lot of DMs – bear in mind that there are many other people in the forum that may be able to help you.
Learn how to join our Slack workspace and access your dedicated channel.
Our Slack channels are available for Pro and Enterprise plan users, including:
Internal Tool Pro
Internal Tool Enterprise
Customer Portal Pro
Customer Portal Enterprise
Joining our workspace gives you direct access to our team. You can ask any questions related to your app in your dedicated channel.
How to Join Slack
Step 1: Join the Workspace
Click the blue question mark button in the bottom-right corner.
Select Slack Channel from the support options.
Follow the instructions to join the workspace.
Step 2: Access Your Channel
Your Slack email may differ from your registered email; you can enter a different email if needed.
The default channel name is jetadmin_, but you can change it.
Once completed, you’ll be added to your specific Slack channel.
Need Help?
If you have any issues joining, reach out via live chat or email us at [email protected].
How Agents Work
Understand how Jetadmin Agents operate behind the scenes, breaking down the step-by-step reasoning cycle that drives their decision-making and actions.
The Agent Process
When an agent is triggered, it follows a structured reasoning cycle to complete its task:
1. Task Input
The agent receives clear instructions in plain language—for example, “Find all overdue invoices and email the client.”
2. Decision Making with LLM
The large language model determines the next step, which could be:
Responding directly to the task,
Asking for more information, or
Activating a connected tool such as a data source, workflow, email, or even another agent.
3. Tool Execution
The chosen tool performs its action, and the results are sent back to the LLM for further processing.
4. Agentic Loop
This cycle of decisions and tool executions repeats until:
The agent reaches its maximum allowed steps, or
The LLM concludes that the task is complete.
Each complete cycle—from input to reasoning to output—is called a run.
⚡ Key Point: The LLM’s role is limited to either calling tools repeatedly or providing the final response.
Solution: Disabling VPN solved the problem - this is the most common reason for such an error. After disabling it, reload the page.
Case 2 - SQL query filters
In this case, a user wanted to display a filtered collection from a custom SQL query but got the "Nothing found" message
Even though the query was correct, it didn't account for the fact that Jet handles filtering automatically, so you should not add the WHERE clause.
Solution: omit WHERE and only set up the inputs and reference them in the query.
Initiate the workflow when the Deal is updated, which occurs when the associated form is successfully submitted.
Add a conditional step in the workflow that checks whether the deal stage is set to Closed Won. For the conditional step, employ the 'Equals' operation using the FormulaEQ({deal_stage}, 'Closed Won') to verify if the deal stage matches the Closed Won status. The value for {deal_stage} is selected from Formula.
Send email. Add actions to send an email with the content formatted as: "Deal {0} is Closed Won". Here, {deal_name} should be dynamically inserted into the email content, and its value can be selected using a formula that references the {deal_name} field from the data source.
Show notifications. Use the same logic to implement notifications.
Next, let's set up the field type for the Priority field. We will configure it as a Select type with predefined options: High, Medium, and Low.
Click on Priority header in your table to access its settings
Choose Edit field to modify the field's properties.
Select the field type as Select. This allows you to create a dropdown menu with predefined options.
Click on Display to proceed with the visual setup.
Add predefined options for the 'Priority' field: High, Medium, and Low.
Use the Link to Record field type to establish a relationship between Deals and Companies. This will enable you to link these two tables, effectively associating specific deals with respective companies.
Click on Company id column in your table to access its settings.
Choose Edit field to modify the field's properties.
Select the field type as Link to record. This option allows you to create a link between the current record and another table.
Once you've established a Relation using the Link to Record field type, you can pull record contents from one linked record into another, and you can perform calculations on this Relation, enabling more complex data manipulations and analyses based on the interconnected data.
Next, we will focus on extracting and inserting the Company logo into the Deals table.
Click + New Column on the right-top
Select Lookup related field
Select Company_id > Logo
Troubleshooting Django integration
If you are having trouble connecting Django to JetAdmin, you will need to check a few things:
Make sure there are no network restrictions.
Check whether your Jet Bridge is the latest version.
Check your CORS policies in Django.
If your network with Django is okay, and you are using the latest Jet Bridge version but still getting errors like this:
That means that you need to check your CORS policies in Django.
By default, there is a parameter in Jet Bridge for Django that contains CORS in settings.py called "JET_CORS_HEADERS".
It is enabled by default and filled automatically, but if your Django already has an app called “corsheaders” then it turns off. You can configure your CORS settings in the "corsheaders" app instead.
Alternatively, you can try to force "JET_CORS_HEADERS" to be set to True, but it can lead to strange effects, so we would advise trying it only as a last resort.
Binding data
Discover how to pass and bind the data with elements
To pass and bind simple data with the elements, follow the steps:
Click on the Gallery
Click on the Property card
Click on the Change Data Binding
Pass the corresponding Data for each of the Custom Components.
Click Use Selected Binding for saving.
To pass and bind data with the elements using Functions, follow the steps:
Click on the Gallery
Click on the Property card
Click on the Change Data Binding
Generate the App
In this section you will learn how to generate the app for creating a customer portal
Connect your Data Source
After creating a project, you'll be prompted to start with the Blank app or your Data. Select your chosen Data Source, fill in the credentials, and finish the process.
Click on the Data Source icon
Click on the Add Resource icon
Choose Airtable
Choose the Page
You can navigate through pages and create new ones in the top left tab. Now, let's pick another page:
Click on the Pages icon
Choose and Navigate to the Page
When you connect a Database, Jet Admin automatically generates an app based on the pages you selected in the previous step
Now let's test how it works by
Clicking on the Table to select it
Clicking on a Row to drill down to the record view
Next, let's set up the Layout:
Pass values to Image
Explore how to data from Visual Builder to Component Designer
To pass data of type Image from Visual Builder to Component Designer, use the Parameters:
Click on Parameters in Toolbar
Click on Add Parameter in the Parameter sidebar
Click on Edit button to rename the Parameter
Change the type of the parameter to Image
Drop a test value for the Parameter
Save the test value
To show an image in the design, follow the steps:
Click on the shape you want to add an image to.
Go to the fills on the Right Sidebar.
Click on the Image button.
Set the Layout
In this section you will learn how to set the layout for creating a customer portal
Jet Admin provides a library of pre-built UI components, such as Table, Map, Gallery, or Charts that you can drag and drop to display your data. As well as the Layout components that are used to assemble other components on the page.
Set the Layout
Columns are used to set the horizontal component of the layout. You can add multiple columns and resize them.
To add columns, follow the steps:
From the Layout menu, drag and drop Columns
Drag and Drop the Tasks Table in the Right Column
Drag and Drop a Form in the Left Column
We also can change the position of the individual fields in the record view. For that, drill down into the record and drag and drop the fields you want to reassemble:
Now, let's add our Project table and link it to the Tasks table:
Pass values to Text Field
Discover how to pass values to Designer
To add text to your design, follow the steps:
From the menu on the top left, click on the Text button.
Locate the field in your design.
Add a test value to the field and save it.
To connect the text field to the parameter using the formula, follow the steps:
Click on the field you want to connect a parameter to.
Click on the Function button.
Click on the Function button inside the field to specify the parameter.
Single relations
Single relations help you fetch data from the related collections.
To illustrate how it works, let's imagine we have the Transactions table that doesn't contain a customer's email and the Users table that contains the customer information including the email:
And we want to display the email in the Transactions list:
First of all, we identify how our tables are related: for each user, there are several transactions that are related to the users list by the ID and Customer ID fields:
Now, let's create a new custom column in the Transactions table:
Then change the column type to Link to record
Now, we need to select where we'll get the user email from (a related Users table), what field in the Users table is used to set relations with the Transactions table (the ID field), and what field from the Users table we'd like to display (the Email field):
And the final step is to get our custom field value from the Transactions table field that sets relations to the Users table (the Customer ID field):
Now, let's make UI components dynamically visible based on a rule:
Link Related Tables
In this section you will learn how to link related tables for creating a customer portal
You can link different tables as long as there's a common field in both of them. In our case, we'll link by the Unit name field.
In Jet Admin you can link tables from different Bases
Display the Projects
Drag the Table component and change the mock data to your own. Select the data source you've connected and the page you want to display:
Drag and Drop the Table Component to the page
Choose the Resource and the Collection
Link the Tables
Each Unit has many Tasks and we want to see the list of Tasks for a given Unit. To create this flow, follow the steps:
Click on the Table
Click on the Filter icon
Choose Unit ID -> ID equals
Now, let's customize our Portal:
Conditional Visibility
In Jet Admin, you can make certain components visible or invisible depending on the values or combination of values from your data or user attributes.
Say, we want to show two different status change buttons depending on the status value of the selected row of the users table:
If standard permissions are not enough and you may want to restrict access on the level of individual UI components, use in the visibility logical expression
To achieve that, let's first drop two buttons: one that changes the status of a user to "active" and the other that changes it to "inactive":
Then, we proceed to the "Activate" button's settings to the "Visible" section:
Next, we type in the condition: IF the status value from the selected row equals "inactive", then return true, otherwise, return false. Returned true will make the component visible and false will make it invisible:
Here's the expression: =IF(EQ(elements.users["0"].selected_item.Status, "inactive"), 1, 0)
Then we do the same for the "Deactivate" button, grabbing the "active" value from the selected row:
And we get our buttons being dynamically hidden based on the status value from the selected row:
Agents
Learn how to use Jetadmin Agents to automate tasks using natural language and LLMs, no coding or complex logic required.
An agent can:
Handle or delegate tasks based on reasoning from LLM.
Be triggered through chat, workflows, or directly from other agents.
Continuously evaluate and improve its own process (the "agentic loop").
With Agents, you can embed AI-driven decision-making directly into your apps, workflows, and automations.
Accessing Agents
You can set up and access agents in several ways:
From Triggers: Choose Agent as an action when configuring triggers.
Search: Type “Agent Chat” in the component search box and drag it into your page.
Left Menu: In the left-hand menu, click the Agents icon and then select Add Agent.
When to Use Agents
Agents are useful when you need more than simple automation rules. They are best for:
Quickstart
👉Before we jump into the thick of it, there is one thing that needs to be clarified:
Internal Tools vs Customer Portals
Both Client Portals and the Internal Tools are the same in their essence - they are just web or mobile apps built on Jet Admin. However, they differ from the usage perspective: end-users of the Portal are external users, e.g. Vendors, Partners, Merchants, or Individuals, whereas end-users of the Internal App are internal users, i.e. your organization's employees. They also differ in .
Typical use-cases for the Client Portal and for the Internal Tool also differ, that's why we've created two separate quickstart journeys based on the common use-cases:
If you want to save time building your app, you can apply one of the templates that you can find on the dashboard. You can preview the templates .
For the template to become a functional app, It's crucial to correctly bind your own data and set relations between to UI components composing a template. Learn more about it in the section.
Running Agents
Learn how to trigger and run Agents in Jetadmin manually via the UI, through workflows, or by chaining agents together for seamless automation.
Agents don’t run on their own—they need to be triggered manually or programmatically using one of the following methods:
Agent Chat Component: Add this to your app’s UI to let users interact with the agent directly.
Ask Agent Action: Use this Action within workflows or automations to run the agent at the right moment.
Another Agent: You can chain agents together, allowing one agent to call another as part of its logic.
Note: To run an agent automatically—such as on a schedule or after receiving a webhook—you'll need to create an Automation that includes the Invoke Agent block.
Send Emails
Send emails from a Jet app
Jet Email allows you to send emails via Action or Workflow/Automations. All emails will be sent through [email protected](unless you have set up a custom From email address in App Settings).
Use the following guide to set up emails, and specify the next operation:
Choose operation -> App built-ins
Action -> Send email
3. Specify inputs:
to – receiver email (allows only email's format)
subject – text field to specify the email subject
text – text field without markups
The maximum limit number of emails to be sent is 10 emails per 1 minute.
Hide elements
Discover how to hide elements with Conditional Visibility
Hiding elements is useful for optimization, such as concealing large navigation menus on smaller screens. Conditional visibility improves user experience by showing only relevant content.
Hide elements in Component Designer using Conditional Visibility:
Click on the element you want to set conditional visibility to.
Go to the Right Sidebar.
Click on the Conditional Visibility button.
Scroll and choose the option that fits the best for your requirements.
Dynamically change elements in Component Designer using Conditional Fill:
Click on the element you want to set the conditional fill to.
Go to the Right Sidebar.
Go to the Fill section.
Airtable
In this article, we'll review the integration with Airtable, and its characteristics and will go through the steps necessary to connect it to Jet Admin
API keys are deprecated by the end of January 2024.
Build UI
Discover how to utilize components to build your app's user interface
Components are prebuilt UI elements your users engage in, such as Tables, Forms, Buttons. In this example, only a limited number of components are used; you can explore 50+ Components in the UI Component Library. Drag-and-drop components within LayoutColumns, Tabs, and Modals, facilitating the building of your app.
You'll be building an app that enables the creation and updating of Deals data. To enable this functionality, you'll add Table
Customize your Portal
In this section you will learn how to customize your customer portal
In Jet Admin, you can customize the appearance of your Portal for better usability. Let's start with the Units table.
Let's disable unnecessary columns and rearrange the order.
Click on the Units Table
Reading data from SQL
The SQL Query Builder lets you create, edit, and run queries easily. You can write SQL manually, insert tables and columns, or let AI generate queries and transformations for you.
Writing and Generating Queries
You can type SQL directly in the editor or click Ask AI to describe what you need in plain language. AI will generate the SQL for you—for example, “show tickets created in 2019 with low priority.”
Or consider using AI to refine or write your SQL query for enhanced accuracy and efficiency.
Connect your Data
Jet allows you to connect and sync with 50+ data sources: business apps (Airtable, Stripe, Zendesk), Data Warehouses, Internal and external REST or GraphQL APIs, and File Storage. Once a is set up, you can utilize your data to create apps.
This guide focuses on using as the data source. Jet Table offers a quick and secure method for storing and modifying data specifically for Jet applications. It integrates the robustness of a PostgreSQL database with the user-friendly aspect of a spreadsheet interface, enabling efficient data management.
To insert test data into the Jet Database, first download the following provided CSV files:
Pixel Perfect App
Design your first custom component from scratch using Component Designer
To familiarize yourself with how Customize with Designer works, let's build a simple design:
We'll go through the whole process of creation step-by-step.
1. Design your component
Data Privacy & Security
Where is my data stored, and is it secure?
Yes, your data is secure and is always stored by you, whether that be with your chosen data resources or on your own servers. We provide Jet Bridge that makes our architecture secure. Jet Bridge is a free and open-source app that generates an API and proxies the requests to databases and business apps. We don’t collect, copy, or host your private data on our side. Jet follows best practices to ensure that important data is only accessed by you and your users. Jet encrypts all data and credentials that go through our servers using an HTTPS connection.
Jet Admin offers you the ability to , which is a PostgreSQL database hosted by Jet. Jet Tables, like other top-tier PostgreSQL databases, uses best practices to keep your data secure. Using Jet Tables is the only case in which your data would be stored on Jet servers, but there is no difference between the way Jet Admin allows you to access data in Jet Tables and the way that Jet allows you to access your data in other PostgreSQL databases, so your data remains secure, regardless of which databases you choose to use. You can learn more about Jet Tables
Ask AI
Ask AI enables you to work with APIs, SQL, data transformations, and much more, all through simple natural language prompts.
The Ask AI feature converts plain text instructions into working API requests, SQL queries, transformation scripts, and a variety of other outputs. It saves time, reduces errors, and delivers clean, usable results, all without the need to remember complex syntax.
Ask AI for API
Ask AI simplifies working with APIs. You can type a request in plain English, provide a curl command, or link to Swagger documentation, and it will generate the correct API call.
What it can do:
Reading data from API
If you need to make your own API request, simply select "Make an HTTP request" as the operation. This allows you to connect to any external API and display the response data using available components, such as tables or charts. Just configure the request method, URL, headers, and any necessary parameters based on your API.
Make an API request using API Builder
1. Go to the Component Settings then Add Data Resource
The Agent Interface
Explore the key sections of the Jetadmin Agent configuration interface, where you define your agent’s purpose, inputs, behavior, and access to tools.
When configuring an agent, you’ll find these key sections:
Instruction
Define the main goal or purpose of the agent.
Adding Images
Explore how to customize background
To add shapes, follow the steps:
Click on the Shape icon in the Toolbar at the top-left.
Complex workflows where steps depend on reasoning or context.
Customer-facing chatbots that can pull data from multiple sources.
Task delegation when actions may involve multiple systems or tools.
Dynamic decisions that go beyond pre-defined logic.
If your task is straightforward and always follows the same pattern, a regular workflow or automation may be enough. If it requires flexibility and decision-making, an agent is the better choice.
Click on the More button to see more options.
Scroll and choose the option that fits the best for your requirements.
Airtable's API keys stopped working and you will have to migrate to personal access tokens. Personal access tokens allow you to more securely grant API access to Airtable data.
Connecting Airtable
You can connect to Airtable from the data tab on the left menu bar or from the data section within a UI component. You'll need to enter a valid personal access token, and choose a base.
When creating a new 'personal access token', please make sure you choose the 'data.records:write' scope if you need to view, add, edit, and delete records on Jetadmin's side.
Connect Airtable to Jetadmin
On Jetadmin's builder side, click 'Add Resource' from the data section on the left-side menu
Choose Airtable
Click on 'Sign In to Airtable' button
Click on 'Add a base'
Choose the needed base or workspace
Click 'Grant access'
Choose the base needed
Click the 'Choose tables' button
Select/unselect the needed tables and choose a view for each table
Click the 'Add Resource' button.
Choosing connection mode
After that, you need to choose how you'd like your Airtable to be integrated with Jet Admin. You can either connect directly or sync it with Jet's internal database to get extended functionality.
If you want to be able to combine your Airtable data with data from other data sources, such as Firebase, Google Sheets, or even REST API within the same tables, you should choose the "Sync" connection for Google Sheets. You can learn more about it here:
After having connected your Airtable, you'll be prompted to choose pages you want Jet Admin to generate an admin panel (CRUD pages) for.
Airtable Views
On Airtable side, you can create different views for each table. Each view allows you to filter and sort records. In Jetadmin you can choose to use only one view for each table when creating the resource. To view all records in each table, choose the main view 'All'.
The image below will show you the differences between the main view and the filtered views:
Switch Airtable's Views
To switch to other views for each table, follow the steps below:
Click 'Edit resource' from the resource's settings menu
Click on 'Choose tables'
Select the needed views for each table
Click 'Update resource'.
,
Forms
, and
Modals
. Learn more about
in our documentation. Additionally, if you want to implement this functionality swiftly (Create, Update, Delete flow), you can generate it in seconds using
.
1. Set the Layout
Columns are used to set the horizontal component of the layout. You can add multiple columns and resize them.
2. Display Deals
When you select the Table component, the right panel automatically updates to display the properties of the component. Components come with a wide range of properties that you can configure. Properties are accessible from other components and queries, allowing for a more integrated and dynamic user interface experience.
Click Data Source – Jet Tables and the Deals collection that you've created.
Modify the Logo column to have a circular frame and position it as the first column.
3. Bind your components
Component Binding allows the passing of values between components. In this case, we will bind the Table and Filter components, enabling users to filter Deals by criteria such as Name, Priority, and Amount.
4. Update Deal with a Form component
The final component to add is a Form component. This component will allow you to generate Forms automatically based on your Collections fields.
Every field in the Form is individually configurable: you can add or remove fields from the Form, alter the field type, rearrange the order of the fields, and change appearance.
To update a deal, the user must select the corresponding row in the Table. You can configure the first row to be selected by default in a Table. To do this, go to the Display tab in the Table properties and choose Select the first row by default.
In Airtable, field types are detected automatically, but for other data sources you might need to configure them by clicking on the column icon
Let's now set the number of displayed rows to 5, and make the first row selected by default. To do that, follow the steps:
Go to the Display Tab
Set 5 in the Rows Per Table section
Enable the Select First Row By Default option
You can change the field types to render different fields differently and customize their appearance. To do so,
Click on the Priority field
Choose Low Option
Click on the Color field
Choose the Color
In Jet Admin, you can configure and customize any component individually on any page. Let's make our record fields non-editable so that the users will be able to change them.
Click on the Unit ID field
From the menu on the right, change it to Editable
Click on the Assign To ID field
From the menu on the right, change it to View-Only
Applying similar edits to the Tasks table and we're done with the UI customization.
Now, let's invite external users and make them interact only with their data:
On the right-hand panel, you will see a list of all available tables and their columns. By clicking on any table or column, it is automatically inserted into your SQL editor. This eliminates the need to manually type table names or remember exact column names, reducing errors and making query construction much faster.
Inserting Custom Inputs
The Query Builder also allows you to add dynamic parameters using the Insert Input option below the editor. Inputs act as placeholders for values that can change, so you can reuse the same query multiple times with different filters. This is particularly handy when running similar queries across different date ranges or user IDs without rewriting SQL each time.
Prettify SQL
Click Prettify SQL to automatically format your query, making it more readable and easier to debug.
Transforming Query Results
After running a query, use the Transform feature to adjust results. Choose from dropdown options or write custom JavaScript. AI can also generate transformation code to rename fields, restructure data, or filter results.
Testing, Previewing, and Saving
Click Test Request to run your query and check the results in the Preview panel. Once everything looks correct, click Save to reuse the query later—ideal for recurring reports or analysis.
Best Practices
To get the most out of the SQL Query Builder, it’s a good idea to prettify queries regularly for readability, and make frequent use of AI assistance for complex SQL generation. Inputs should be used whenever possible to create dynamic, reusable queries. Transformations are a powerful way to adjust your results without altering the base SQL, and testing queries before saving ensures accuracy. Finally, previewing results after execution helps confirm that your query meets the intended goals.
Once you have downloaded the CSV files, follow the steps:
Log in to Jet Admin and create a new project. If you don't have an account, sign up for free.
Create a new project and add Jet Table as your data source, or if you have an existing project, integrate Jet Table by navigating to Data > Add Resource.
Click Import CSV
Select the Companies CSV you downloaded
Click Import file
Follow the same process to import Deals: Data > Jet Tables > Add or Import.
For changing the visibility of a component please follow the steps as shown below.
4. Responsiveness
To check how your design will respond to different screen sizes, please follow the steps shown below. Ensure that it maintains its integrity and functionality across various devices.
Host Jet Bridge on your servers. You can place it behind your VPN, in your own VPC. We won’t get access to your data, however, you will still receive interfaces updates normally.
If your infrastructure doesn't have access to the internet, you can use on-premise on your own servers and block all network connections. You can place it behind your VPN, in your own VPC.
Built-in Security-Grade Features
Incident Recovery
To prevent bad consequences for your business, Jet Admin automatically creates a backup of your interface, so you can always restore it in case of an incident. Simply push the “Recover” button at the top right corner of your screen and select what you would like to backup.
DMZ
Since Jet Admin doesn’t require access to your data, you are free to host your admin’s API under DMZ or VPN network. Once you do that, your admin panel will be separated from your public network, leaving no chance for malicious attacks or remote rooting. This might be on a checklist for some large healthcare and financial companies that can be held liable for clients’ personal information. In most cases though, it is not a necessity.
“Get Deals with status = 'Won'” → Collection API call
Always double-check sensitive API actions (like refunds or deletions) before running them. Ask AI generates requests automatically, but execution is final.
Ask AI for SQL
Instead of writing queries manually, you can describe what you need and Ask AI creates the SQL for you. If something doesn’t work, it fixes the query and improves readability of results.
What it can do:
Translate text prompts into SQL queries
Detect and fix SQL errors
Transform results for dashboards or reports
Example:
“Get all transactions/orders where the amount > 100” → SQL query"
If the generated query looks too broad, try refining your prompt with additional filters (e.g., date ranges or specific columns)
Ask AI for Transformations
Ask AI also supports transformations, making it easier to work with complex or nested data. You can quickly create or debug scripts without needing to code them from scratch.
What it can do:
Flatten nested JSON or API responses
Generate custom JavaScript transformations
Fix broken transformation logic
Example:
“Filter the API response to keep only these key fields: Service, Entity/Resource, Action Type, Endpoint URL, and Filters/Parameters.” → JavaScript transformation
To get the most out of Ask AI, keep these tips in mind:
Be specific in your prompts. The more details you give (fields, filters, conditions), the more accurate the output will be.
Always review before running. Check generated API calls, SQL queries, or scripts especially if they modify or delete data.
Test safely first. Run queries or actions on test data before applying them to production.
Iterate step by step. If the first result isn’t perfect, refine your prompt instead of starting over.
Use hints and context. Linking docs, curl commands, or schemas can help Ask AI generate better results.
Explore More Use Cases
The examples and tips above highlight some common ways to get started with Ask AI, but the feature’s potential goes far beyond these scenarios. Whether you want to generate custom scripts, automate complex data transformations, optimize queries, or integrate with diverse APIs, Ask AI can assist in a wide variety of tasks. Feel free to experiment and discover new ways Ask AI can simplify your workflows and solve unique challenges.
2. Select a resource then choose collection as Make an HTTP request
Pass API parameters
Now you are in API Query Builder. Specify endpoint and add any new parameter.
Use tokens on your API request
If you need to pass tokens or other important headers, simply navigate to the Headers section and add the required key-value pairs. For example: Authorization, Content-Type, or any custom token headers.
Transform your response
To transform the response, use the Transform feature to specify the result of your request:
Paginate by pages
If you need pagination, simply navigate to the Pagination section and choose your preferred type — such as Client-side or Server-side (Page, Offset, or Cursor Pagination).
For Client-side pagination, filters, sorting, and pagination are applied automatically — no additional configuration needed.
For Server-side pagination, select the appropriate type (Page, Offset, or Cursor) and configure the necessary parameters based on your API’s structure. You can also use a transformer to adjust the response format if needed.
Run your request
Simply click Test Request button to run your request
Example: “Act as a customer support assistant that answers product-related questions.”
Agent Inputs
Provide custom input fields that can be referenced inside instructions.
Useful for passing dynamic data into the agent’s reasoning.
Additional Settings
Steps Maximum: limit the number of reasoning loops (up to 30).
Temperature: adjust randomness (lower = more predictable, higher = more creative).
Tools Available to Agent
Choose which tools the agent can use (data sources, actions, other agents, etc.).
Add tool-specific instructions to guide behavior.
Control permissions (CRUD levels) for each tool.
Key Considerations for Agent Setup
Effective agents start with clear and detailed configuration. Providing precise instructions, well-defined inputs, and carefully selected settings and tools ensures your agent performs accurately and reliably.
Drag-and-drop Rectangle to the Canvas
Customize (resize, reshape, position,...) the Rectangle shape using the Right sidebar:
In this section you will learn how to link set Users and Permissions for creating a customer portal
The key functionality of any Portal is that any user or group of users see and interact only with their data. In this step, we'll invite our users and set permissions to turn our Airtable app into a secure portal.
Invite Users
Click Share and add the email of a user. Then we can invite this user to the existing team or create a New Team by clicking Add a new Team. In our example, we build a portal for corporate clients, so we'll create separate teams for every company we work with.
Click on the Share button
Paste the Email you want to send an invite to
Click on the Team Icon
In Jet Admin, Teams are the groups of users with the same permissions
Then send invites to the users.
Set the Data Separation
Team Properties and User Properties are used to set the data separation in Jet Admin. For each team or user, we add a Property that uniquely identifies a company or a client, such as domain or email. In our case, we use the company name:
Click on the Add Property
Choose the Name of the Property
Click on the Create button
To be able to separate data, we need to have the property value in our data
Next, we need to filter our Portal's data by the property. Select the component you want to separate data for, proceed to filters, and set them Client field to match Client property what we've created.
Choose the Table
Click on the Filter icon
Choose Client -> Client equals
Set Permissions
Additionally, we want our Coffee Beans employees to interact only with the portal page we've created. For this, go to the Teams and set page-level permissions to allow access to the Tasks , Tasks-edit and the Tasks-create pages:
Now, let's check how that works: the Beans Coffee employee that we've invited can see only their company's projects:
Generate Formulas and JavaScript with AI
Welcome to the new, AI-powered way to create formulas in Jet Admin! This feature allows you to build complex formulas simply by describing what you want to achieve.
The primary benefit of using the AI prompter is its speed and intuitive nature. You no longer need to memorize specific function names or syntax. Just type your goal, and the AI will generate the formula for you, streamlining your workflow and making data manipulation more accessible than ever.
How to Use AI Formulas: A Step-by-Step Guide
Creating a formula with AI is straightforward. The AI assistant translates your text prompt into a valid formula and places it in the formula editor for your review.
SELECT *
FROM Tickets
WHERE "Opened date" BETWEEN '2018-01-01' AND '2024-12-31';
Click on Add Column and select Add a Computed Column.
Give your new column a descriptive label.
Click on the Set up with Formula icon (fx) next to the value field.
In the formula editor, you will see a text box labeled Ask AI to write or update formula.
Type a clear description of the formula you need into the text box.
The AI will generate the corresponding formula and place it in the editor.
Review the generated formula. You can make edits directly in the editor if needed.
Click Accept to apply the formula to your column.
Examples of Common Use Cases
The AI prompter can handle the same tasks as the manual formula builder, from simple text manipulation to complex conditional logic. Below are some common examples adapted from our manual guide to showcase the new AI workflow.
Combining Text
This is useful when you have separate data fields, like first and last names, that you want to display together in a single column.
Goal: Combine the first_name and last_name columns into a single "Full Name" column, separated by a space.
Example Prompt: Combine the first_name and last_name columns with a space in between.
Create custom columns whose values change based on logical conditions in other columns. This is perfect for categorizing data, like scoring customer activity.
Goal: Create a "Score" column based on the value in an "Activities" column. If activities are less than 280, the score is '50 points'; if less than 400, it's '70 points'; otherwise, it's '100 points'.
Example Prompt: If the activities column is less than 280, return '50 points'. If it's less than 400, return '70 points'. Otherwise, return '100 points'.
To get the best results from the AI formula generator, keep these tips in mind:
Be specific and use exact column names. The AI works best when you reference columns by their actual names (e.g., first_name, total_cost).
Describe the final output. Instead of telling the AI which function to use, describe the result you want to see. For example, say "Combine first and last names" rather than "Use the CONCAT function".
All functions are available. The AI has access to the full library of General, Logical, Mathematical, and Date & Time functions. You can ask it to perform any task.