DEV Community: Teja Kummarikuntla

💰I Built a Token Billing System for My AI Agent - Here's How It Works

Teja Kummarikuntla — Tue, 31 Mar 2026 15:39:56 +0000

I've been building an AI agent that routes requests across multiple LLM providers, OpenAI, Anthropic etc., based on the task. But pretty quickly, I hit a real problem: how do you charge for this fairly?

Flat subscriptions didn't make sense. Token costs vary by model, input vs output, and actual usage. A user generating a two-line summary isn't the same as someone churning out 3,000-word articles, yet flat pricing treats them the same.

I looked at a few options for usage-based billing. Stripe Billing has metered subscriptions but you have to build your own token tracking pipeline on top. Orb and Metronome are good, but they're separate vendors, you'd still need something to capture token data from your LLM calls and pipe it in. What I wanted was something at the gateway level, where the traffic already flows.

I ended up using Kong AI Gateway with Konnect Metering & Billing (built on OpenMeter). The gateway proxies every LLM request, so it already knows the token counts. The metering layer plugs directly into that. No separate vendor, no custom pipeline.

So instead of debating about pricing models, I set up the billing layer. A working system where every API request flows through a gateway, gets tracked, and is priced based on real usage:

🚧 Route requests through AI Gateway
🪙 Tokens get metered per consumer
💵 Pricing gets applied
🧾 Invoice generated

Here's the whole setup, step by step.

Set up the gateway
Step 1: Create a consumer
Step 2: Configure the AI Proxy
Step 3: Enable token metering
Step 4: Create a feature
Step 5: Create a plan with a rate card
Step 6: Create a subscription
Step 7: Validate the invoice
Step 8: Connect Stripe

The Setup

The billing pipeline has three layers:

Kong AI Gateway proxies the LLM requests. It sits between the app and the provider, handles auth, and this is the part that matters for billing, it logs token statistics for every request.

Konnect Metering & Billing (this is built on OpenMeter) takes those token events and aggregates them per consumer, per billing cycle. It supports defining features, pricing models, and plans on top of the raw usage data.

Stripe collects payment. The metering layer generates invoices that sync to Stripe.

Let me walk through each piece.

Prerequisites

You can do this entirely through the UI or via CLI. I'll cover both as we go.

A Kong Konnect account
An OpenAI API key (or any LLM provider key of your choice)

For CLI, you'll also need decK (v1.43+) installed and a PAT from Kong Konnect.

Set Up the Gateway

Once you log in, click on API Gateway and create one.

I'm using Serverless here. You can choose Self-managed too. Enter the gateway name as ai-service and click Create and configure. Once that's done, click Add a service and route and fill in:

Service Name: ai-service
Service URL: http://httpbin.konghq.com/anything
Route Name: ai-chat
Route Path: /chat

CLI

If you prefer the command line, generate your PAT and run:

export KONNECT_TOKEN='your_konnect_pat'
curl -Ls https://get.konghq.com/quickstart | bash -s -- \
  -k $KONNECT_TOKEN --deck-output

This gives you a running Kong Gateway connected to Konnect. It'll output some environment variables, export them as instructed. You'll also need:

export DECK_OPENAI_API_KEY='your_openai_api_key'

Then set up the service and route:

_format_version: "3.0"
services:
  - name: ai-service
    url: http://httpbin.konghq.com/anything
routes:
  - name: ai-chat
    paths:
      - "/chat"
    service:
      name: ai-service

Apply it with deck gateway apply. Now you have a route at /chat that we'll wire up to an LLM.

Step 1: Create a Consumer

You can't bill anyone if the gateway doesn't know who is making the request. Consumers are how Kong identifies API callers. Later, we'll map each consumer to a billing customer.

Add a consumer with a key-auth credential:

You can enter the Key value as acme-secret-key.

Now, you need to add the key-auth plugin to the service so the gateway actually requires authentication:

Click on Plugins in the left sidebar
Click on New Plugin
Select Key Authentication from the plugin list
Select Service as the scope or keep it as Global
Click Save

CLI

_format_version: "3.0"
consumers:
  - username: acme-corp
    keyauth_credentials:
      - key: acme-secret-key

Then enable the key-auth plugin on the service so the gateway actually requires authentication:

_format_version: "3.0"
plugins:
  - name: key-auth
    service: ai-service
    config:
      key_names:
        - apikey

Apply both with deck gateway apply.

Now every request to /chat must include an apikey header. The gateway identifies the caller as acme-corp, and that identity flows through to metering. Without this step, usage events have no subject. They're anonymous, and you can't attribute them to anyone.

Step 2: Configure the AI Proxy

Next, wire the route to an actual LLM. The AI Proxy plugin accepts requests in OpenAI's chat format and forwards them to the configured provider.

Navigate to Plugins
Click on New Plugin
Select AI Proxy from the plugin list

Following the below yaml for CLI and configure the plugin fields accordingly:

_format_version: "3.0"
plugins:
  - name: ai-proxy
    config:
      route_type: llm/v1/chat
      auth:
        header_name: Authorization
        header_value: Bearer ${{ env "DECK_OPENAI_API_KEY" }}
      model:
        provider: openai
        name: gpt-4o
      logging:
        log_payloads: true
        log_statistics: true

Two things to note here:

log_statistics: true is what makes billing possible. Without it, the gateway proxies requests but doesn't record token counts. When enabled, it captures prompt tokens, completion tokens, and total tokens on every response. This is the data that metering consumes downstream.

log_payloads: true logs the actual request/response content. This is optional and useful for debugging, but you'd probably turn it off in production for privacy reasons.

Apply with deck gateway apply and test:

curl -X POST "$KONNECT_PROXY_URL/chat" \
  -H "Content-Type: application/json" \
  -H "apikey: acme-secret-key" \
  --json '{
    "messages": [
      {"role": "system", "content": "You are a mathematician."},
      {"role": "user", "content": "What is 1+1?"}
    ]
  }'

You should get a response from GPT-4o. The gateway handled auth, forwarded the request, and logged the token statistics.

If you want to proxy multiple providers (say, OpenAI and Anthropic with automatic failover), you'd use [ai-proxy-advanced](https://developer.konghq.com/plugins/ai-proxy-advanced/) instead with a load balancing config. I stuck with a single provider here to keep the billing walkthrough focused.

Step 3: Enable Token Metering

Now we connect the gateway's token logs to the metering system.

In Konnect, go to Metering & Billing in the sidebar. You'll see an AI Gateway Tokens section. Click Enable Related API Gateways, select your control plane (the quickstart one), and confirm.

This activates a built-in meter called kong_konnect_llm_tokens. It uses SUM aggregation on the token count, grouped by:

$.model : which LLM handled the request
$.type : whether the tokens are input (request) or output (response)

The grouping matters because LLM providers charge differently for input vs. output tokens. Output tokens are typically 3-5x more expensive because input can be parallelized across GPUs while output generation is sequential, each token depends on all previous tokens. If your metering doesn't split these, your pricing will be wrong.

At this point, every authenticated request through the AI Gateway generates a usage event that gets aggregated by the meter. But usage alone doesn't generate invoices. You need to define what's billable and how it's priced.

Step 4: Create a Feature

A feature is the link between raw metered data and something that appears on an invoice. Without it, usage is tracked but never billed.

Go to Metering & Billing → Product Catalog → Features and create one:

Name: ai-token
Meter: AI Gateway Tokens
Group by filters:
- Provider = openai
- Type = request (this tracks input tokens; you'd create a separate feature for output tokens if you want to price them differently)

The filters narrow the meter to a specific slice of usage. In a real setup, you'd likely create multiple features, one per model, one per token direction, to apply different rates. For this walkthrough, I'm keeping it to one feature to show the flow.

Step 5: Create a Plan with a Rate Card

Plans bundle features with pricing. Go to Product Catalog → Plans and create one:

Name: Starter
Billing cadence: 1 month

Add a rate card:

Feature: ai-token
Pricing model: Usage Based
Price per unit: 1
Entitlement type: Boolean (grants access to the feature)

A note on what "price per unit" means here: 1 unit = 1 token, because the meter SUMs individual tokens. So entering 1 means $1.00 per token, which is way too expensive for real use. I'm using it here because the official tutorial does the same thing: a round number that makes invoice changes easy to spot during testing.

For production, you'd enter something like 0.000003 for GPT-4o input tokens ($3.00 per 1M tokens) or 0.00001 for GPT-4o output tokens ($10.00 per 1M tokens). There's no "per 1,000" toggle in the UI. You do the math yourself and enter the per-token price as a decimal.

Publish the plan. It's now available for subscriptions.

Step 6: Create a Customer and Start a Subscription

This is where the consumer from Step 1 connects to the billing system.

Go to Metering & Billing → Billing → Customers and create one:

Name: Acme Corp
Include usage from: select the acme-corp consumer

This mapping is what ties gateway traffic to a billable entity. The consumer handles identity at the gateway level; the customer handles identity at the billing level. They're separate concepts joined here.

Now create a subscription:

Go to the Acme Corp customer, then Subscriptions → Create a Subscription
Plan: Starter
Start the subscription

One important detail: metering only invoices events that occur after the subscription starts. If you sent test requests before creating the subscription, those tokens won't appear on any invoice. I spent some time confused by this before finding it in the docs.

Step 7: Validate the Invoice

Send a few requests through the gateway:

for i in {1..6}; do
  curl -s -X POST "$KONNECT_PROXY_URL/chat" \
    -H "Content-Type: application/json" \
    -H "apikey: acme-secret-key" \
    --json '{
      "messages": [
        {"role": "user", "content": "Explain what a Fourier transform does in two sentences."}
      ]
    }'
  echo ""
done

Wait a minute or two for the events to propagate, then go to Metering & Billing → Billing → Invoices. Click on Acme Corp, go to the Invoicing tab, and hit Preview Invoice.

You should see the ai-token feature listed with the aggregated token count and the calculated charge based on your rate card. That's the billing pipeline working end to end, from an API request to a line item on an invoice.

Connecting Stripe

Konnect syncs invoices to Stripe, which handles payment collection, receipts, and retry logic for failed payments. You connect your Stripe account in the Metering & Billing settings, and invoices flow through automatically at the end of each billing cycle.

The result for end users is a transparent invoice showing exactly what they consumed: token count, model, rate applied. Not a flat fee with no breakdown.

## Things I Ran Into

The consumer-customer mapping confused me at first. Kong Gateway has "consumers" (API identity). Metering & Billing has "customers" (billing identity). They're separate. You create both, then link them. If you skip the consumer or forget to link it, usage events come in but they're not attributed to anyone billable. Set this up before you start sending traffic.

Input vs. output pricing is a bigger deal than I expected. Output tokens from OpenAI's GPT-4o cost $10.00/1M vs. $2.50/1M for input. If you use a single flat rate for "tokens," you'll underprice output-heavy workloads significantly. Splitting features by token type (request vs. response) and pricing them separately is worth the extra configuration.

The order of operations matters. Specifically: create the consumer and link it to a customer before you start sending traffic you care about billing for. Events that arrive before a subscription exists don't retroactively appear on invoices.

Where I'd Take This Next

This walkthrough uses a single provider and a single feature. A production setup would look more like:

Multiple features: one per model per token direction (GPT-4o input, GPT-4o output, Claude input, Claude output)
Tiered pricing: lower per-token rates at higher usage thresholds to incentivize growth
Entitlements with metered limits: cap total tokens per month per plan tier, so you can offer Starter (500K tokens), Pro (5M tokens), Enterprise (unlimited)
AI Proxy Advanced: route across multiple providers with load balancing (lowest-latency, round-robin, or cost-based routing)

The docs for all of these are at developer.konghq.com/metering-and-billing and developer.konghq.com/ai-gateway.

If you're building an AI agent and thinking about how to charge for it, I'd be curious to hear your approach. Per-token, credits, flat rate? What's working, what's not? Drop your thoughts in the comments.

⚠️ AI Gateway Attack: LiteLLM is Compromised

Teja Kummarikuntla — Tue, 24 Mar 2026 21:37:08 +0000

On March 24, 2026, attackers published backdoored versions of LiteLLM to PyPI. The malware harvested cloud credentials, SSH keys, Kubernetes tokens, and pretty much everything else it could find on the host. This is the full breakdown of how it happened, step by step.

The Scale of Impact

LiteLLM gets roughly 3.4 million downloads per day. The compromised versions (1.82.7 and 1.82.8) were live on PyPI before being detected.

Any organization that:

Installed litellm for the first time during the window
Updated litellm to the latest version during the window
Had a CI/CD pipeline that pulled litellm without pinning to a specific version

...should assume that every credential accessible from that environment has been stolen.

The remediation guidance is severe: rotate every secret that was present on any machine where the compromised version was installed. SSH keys, cloud credentials, database passwords, API keys, Kubernetes tokens. All of it.

What is LiteLLM?

LiteLLM is an open-source Python library that acts as a unified proxy for large language models. It lets developers write one API call and route it to OpenAI, Anthropic, Google, Mistral, Cohere, or any other LLM provider without rewriting code for each provider's SDK.

It's massively popular. Around 95 million monthly downloads on PyPI. Thousands of companies use it as the backbone of their AI stack because it makes switching between LLM providers trivially easy.

You install it with pip install litellm, import it in your Python code, and it handles the rest. That "installed directly into your application runtime" part is important. Keep it in mind.

Who is TeamPCP?

TeamPCP is the threat actor behind this attack. They're also responsible for compromising Aqua Security's Trivy vulnerability scanner on March 19, 2026 and Checkmarx's KICS GitHub Action on March 23. The LiteLLM attack on March 24 was the third stage of a broader campaign.

The Attack Chain, Step by Step

This wasn't someone finding a bug in LiteLLM's code. It was a multi-stage supply chain attack that moved laterally across three different open-source projects before reaching LiteLLM's users.

Stage 1: Compromising Trivy (March 19)

Trivy is a popular open-source vulnerability scanner made by Aqua Security. Millions of developers and CI/CD pipelines use it to scan container images, code repos, and infrastructure for security issues.

How it was compromised:

TeamPCP found a misconfigured GitHub Actions workflow in Trivy's repository. Specifically, a pull_request_target trigger.

Here's why that matters. In GitHub Actions, there are two ways to run workflows on pull requests:

pull_request runs the workflow using the code from the pull request itself, but with limited permissions. Safe.
pull_request_target runs the workflow using the code from the base branch (the main repo), but it gets triggered by an external pull request. The dangerous part is that it gives the workflow access to the repository's secrets (tokens, credentials, etc.) because it's running "trusted" base branch code.

The problem is that if the workflow does anything with the PR's code (checks it out, runs it, uses it as input), an attacker can submit a malicious PR that tricks the workflow into executing attacker-controlled code with full access to the repo's secrets.

TeamPCP used an account called "MegaGame10418" to exploit this. They submitted a pull request that triggered the vulnerable workflow, which gave them access to Aqua Security's aqua-bot credentials. These were privileged credentials that could push code to Trivy's repositories.

What they did with access:

With the stolen credentials, TeamPCP force-pushed malicious commits to 75 out of 77 git tags in two Trivy GitHub repositories. This means when anyone pulled Trivy at almost any version tag, they got the poisoned version.

They also published a malicious Trivy binary as version v0.69.4.

The malicious Trivy contained Python infostealers designed to harvest environment variables, SSH keys, and cloud tokens from CI runners and local systems.

Aqua Security's incomplete response:

Aqua Security detected the breach and disclosed it. They rotated credentials. But the rotation was incomplete. Some access paths remained open, which allowed TeamPCP to continue their campaign.

Stage 2: Pivoting to LiteLLM (March 24)

Here's where it gets really interesting.

LiteLLM's CI/CD pipeline used Trivy as part of its build process. This is normal. Lots of projects run security scanners in their pipelines. The problem was how LiteLLM referenced Trivy.

LiteLLM did not pin Trivy to a specific, verified version.

When LiteLLM's GitHub Actions workflow kicked off a build, it pulled whatever version of Trivy the tag pointed to. Since TeamPCP had rewritten Trivy's tags to point to malicious code, LiteLLM's pipeline pulled the compromised Trivy and ran it.

What the compromised Trivy did inside LiteLLM's build:

It extracted LiteLLM's PYPI_PUBLISH token from the GitHub Actions environment variables. This is the token that authorizes publishing new package versions to PyPI (the Python Package Index, where everyone downloads Python packages from).

With this token, TeamPCP could publish any code they wanted to PyPI under the legitimate LiteLLM package name.

Stage 3: Publishing Poisoned LiteLLM Packages

Using the stolen PYPI_PUBLISH token, TeamPCP published two backdoored versions of LiteLLM to PyPI:

Version 1.82.7 had the malicious payload embedded directly in litellm/proxy/proxy_server.py. This is a core module that gets imported when you use LiteLLM's proxy functionality. The payload was base64-encoded to make it harder to spot in a casual code review.

Version 1.82.8 escalated the approach. Instead of hiding code in a Python module, they included a file called litellm_init.pth at the root of the package.

The .pth Mechanism (This Is the Clever Part)

Python has a feature where files ending in .pth that are placed in the site-packages directory get processed automatically by site.py during interpreter startup.

Normally, .pth files are used for path configuration. They tell Python where to find additional packages. But if a .pth file contains a line starting with import, Python will execute that import statement automatically.

This means the malicious code in litellm_init.pth ran every single time the Python interpreter started. Not when you imported litellm. Not when you used litellm. Just by having litellm installed in your environment.

Think about what that means:

Running python manage.py runserver for your Django app? The malware runs.
Running a Jupyter notebook? The malware runs.
Running any Python script, even one completely unrelated to LLM work? The malware runs.
A CI/CD pipeline step that uses Python for anything? The malware runs.

The .pth launcher in version 1.82.8 spawned a detached child process via subprocess, so the payload ran silently in the background without the user noticing any delay or output.

Stage 4: What the Malware Actually Does

The payload operates in three stages:

Credential Harvesting

The script systematically sweeps the host for sensitive data:

Environment variables: All of them. This catches anything stored as env vars, which is how most applications store API keys (OPENAI_API_KEY, AWS_SECRET_ACCESS_KEY, DATABASE_URL, etc.)
SSH keys: Private keys from ~/.ssh/, authorized_keys files
Cloud provider credentials:
- AWS: access keys, session tokens, credential files
- GCP: application default credentials, service account keys
- Azure: tokens, credential files
Kubernetes configs: kubeconfig files, service account tokens mounted in pods
Docker authentication: Docker registry credentials
Shell history files: bash_history, zsh_history (which often contain accidentally pasted credentials)
Cryptocurrency wallet directories
Database credentials and connection strings
CI/CD configuration files that often contain tokens and secrets
.env files wherever they exist
System information: hostname, username, network configuration

If a Kubernetes service account token exists in the environment, the harvester goes further. It enumerates cluster nodes and deploys privileged pods to each one, effectively spreading to the entire Kubernetes cluster.

Encrypted Exfiltration

The collected data goes through this process:

Written to a temporary file
A random AES-256 session key is generated
All data is encrypted using AES-256-CBC with the session key
The session key itself is encrypted with a hardcoded 4096-bit RSA public key (so only the attacker with the private key can decrypt it)
Both the encrypted data and encrypted session key are packaged into a tar.gz archive called tpcp.tar.gz
The archive is uploaded via HTTPS POST to https://models.litellm.cloud/

That domain, models.litellm.cloud, is attacker-controlled but designed to look like legitimate LiteLLM infrastructure. If someone was monitoring network traffic, this request might not immediately raise alarms.

The double encryption (AES for data, RSA for the AES key) means even if someone intercepts the exfiltrated data, they can't decrypt it without the attacker's private RSA key.

Persistence and Remote Access

After exfiltrating credentials, the malware installs persistence:

A systemd user service called sysmon.service is created (named to look like a legitimate system monitoring service)
This service polls checkmarx.zone/raw every 50 minutes for additional payloads to execute
This gives the attacker ongoing remote command execution on the compromised host
The backdoor includes a kill switch: if the polled URL returns content containing "youtube.com", the backdoor aborts (likely a safety mechanism for the attacker during testing)

If Kubernetes access is available, the malware deploys privileged pods across cluster nodes, giving the attacker persistent access to the entire cluster infrastructure even if the original compromised pod is removed.

Timeline

Date	Event
Late Feb - March 1	Initial exploitation of Trivy workflows, bot steals `aqua-bot` credentials
March 19	TeamPCP force-pushes malicious code to 75+ Trivy git tags, publishes malicious Trivy v0.69.4
March 19-22	Aqua Security discloses, rotates credentials (incompletely)
March 23	TeamPCP compromises Checkmarx's KICS GitHub Action using similar technique
March 24	Compromised Trivy runs in LiteLLM's CI/CD, steals PYPI_PUBLISH token
March 24	LiteLLM versions 1.82.7 and 1.82.8 published to PyPI with malware
March 24	Community detects malicious .pth file, GitHub Issue #24512 filed
March 24-25	Remediation guidance published: rotate all credentials

Takeaways

The root cause was not a code vulnerability. It was a CI/CD supply chain attack that moved across projects.
The entry point into LiteLLM was an unpinned dependency (Trivy) in the build pipeline, combined with a publishing token that was accessible to the build step.
The .pth mechanism meant the malware ran on every Python startup, not just when litellm was imported. This is a broader execution scope than most supply chain attacks achieve.
The malware harvested everything, not just LLM API keys. It got cloud credentials, SSH keys, K8s tokens, database passwords. This happened because LiteLLM runs inside the application's Python process and inherits all of that process's access.
Architectural isolation matters. If your LLM credentials live in a separate gateway process with its own container and its own secrets, a compromised application dependency can't reach them. The blast radius stays contained.
Even with isolation, supply chain attacks can still hit your gateway. But the damage is scoped to what that gateway has access to, not everything in your entire environment.

Understanding Secure Communication: Encryption, Hashing, and Certificates

Teja Kummarikuntla — Mon, 07 Apr 2025 17:47:02 +0000

If you're diving into secure communications, you've likely heard terms like encryption, hashing, digital signatures, and certificates. These concepts are essential foundations of secure digital communication. In this blog, we'll clearly define each one, explain how they combine to provide robust security, and walk step-by-step through an example scenario.

Sender (You)                                          Receiver (Your Friend)
------------                                          -----------------------
Generate keys & Certificate      ↔️ CA ↔️             Generate keys & Certificate
      │                                                       │
      │────── Your Public Key (Certificate) ────────────────▶ │
      │ ◀─────────── Receiver's Public Key (Certificate)──────│
      │                                                       │
Create Message: "You are in danger"                           │
      │                                                       │
Hash Message                                                  │
      │                                                       │
Sign Hash (Your Private Key)                                  │
      │                                                       │
Encrypt Message (Receiver's Public Key from Cert)             │
      │                                                       │
Send Encrypted Message, Signature, Your Certificate ─────────▶│
                                                              │
                                                 Verify Sender's Certificate (CA Public Key)
                                                              │
                                                 Decrypt Message (Receiver's Private Key)
                                                              │
                                                 Decrypt Signature (Sender's Public Key from Cert)
                                                              │
                                                 Hash Decrypted Message
                                                              │
                                                 Compare Hashes (Integrity & Authenticity Confirmed)

Let's begin by understanding the concepts.

1. Encryption

Encryption transforms readable data ("plaintext") into unreadable data ("ciphertext"). It ensures confidentiality: only authorized individuals with the correct key can decrypt and read the message.

Symmetric Encryption: Uses the same key for encrypting and decrypting.
- Example: AES (Advanced Encryption Standard)
Asymmetric Encryption (Public-key cryptography): Uses two different but mathematically related keys:
- Public Key: Freely shared, used to encrypt messages.
- Private Key: Kept secret, used to decrypt messages.
- Examples: RSA, ECC (Elliptic Curve Cryptography)

2. Hashing

Hashing takes data of any length and produces a fixed-length "fingerprint" called a hash.

Hashes are deterministic: same input produces the same hash.
Hashes are irreversible: you can't derive original data from its hash.
Used primarily for verifying data integrity.
Examples: SHA-256, SHA-3.

3. Digital Signatures

A digital signature ensures the authenticity and integrity of digital documents or messages.

Sender computes a hash of the message.
Sender encrypts this hash using their private key (signing process).
Receiver decrypts the signature using the sender's public key to verify authenticity and integrity.

A digital signature confirms:

Authenticity (proof of sender identity)
Integrity (message wasn't altered in transit)

4. Digital Certificates & Certificate Authorities (CA)

A digital certificate is a document that securely associates a public key with an identity (person, website, organization).

Issued and digitally signed by a trusted entity called Certificate Authority (CA).
Ensures that public keys belong to their stated owners.

Certificates include:

Identity (name, domain, company)
Public key of certificate holder
Issuer details (CA)
Digital signature from CA to verify authenticity

Communication Scenario with Certificates

Let's clearly outline the steps involved in securely exchanging messages using all these concepts. Consider two individuals—Sender (You) and Receiver (Your Friend)—who want confidential, authentic, and integral communication.

Step 1: Generate Key Pairs and Certificates (One-time Setup)

Each party performs these actions once.

Generate key pairs (private and public):

  openssl genrsa -out private_key.pem 2048
  openssl rsa -in private_key.pem -pubout -out public_key.pem

Request and obtain digital certificates from a CA:
- Create a Certificate Signing Request (CSR):
```
openssl req -new -key private_key.pem -out request.csr
```
- Submit CSR to CA (Let's Encrypt, DigiCert, or Internal CA).
- CA verifies your identity and issues signed certificates.

Step 2: Sending an Encrypted and Signed Message

Sender wants to send the message: "You are in danger"

Hash the message (SHA-256):

   SHA256("You are in danger")

Sign the hash with sender's private key (Digital Signature):

   Signature = Encrypt(Hash, Sender_Private_Key)

Encrypt message with receiver's public key (from receiver's certificate):

   Encrypted_Message = Encrypt("You are in danger", Receiver_Public_Key)

Sender transmits:

Encrypted message
Digital signature
Sender’s certificate (contains public key and identity signed by CA)

Step 3: Receiving and Verifying the Message

Receiver does:

Verify sender's certificate using CA’s public key:

Confirms authenticity of sender's public key.

Decrypt the message using receiver's private key:

   Message = Decrypt(Encrypted_Message, Receiver_Private_Key)

Decrypt sender's signature using sender's public key (extracted from sender's verified certificate):

   Sender_Hash = Decrypt(Signature, Sender_Public_Key)

Hash the decrypted message again:

   Receiver_Hash = SHA256(Message)

Compare the hashes:

Matching hashes confirm the message is authentic and unaltered.

Resources

Use digital certificates and CA to establish secure trust in public keys.
Never share your private keys: they're the foundation of your identity and security.
Leverage existing trusted Certificate Authorities (Let’s Encrypt, DigiCert) or internal CAs for internal setups.
Encryption and digital signatures complement each other—encryption provides confidentiality, while signatures ensure authenticity and integrity.

🦄 How ToolJet Gained 20,000 GitHub Stars and 400 Contributors

Teja Kummarikuntla — Mon, 21 Aug 2023 12:48:16 +0000

Overview

Open source projects aim to gain momentum by attracting an ample user base and contributors, establishing a thriving and self-sustaining venture that resonates with the intended audience. However, the crux of the matter is discovering effective strategies to captivate users and developers for project reach and engagement.

ToolJet stands as an exemplary open-source low-code platform that empowers both developers and business users to swiftly craft applications by establishing direct connections with diverse databases and services. Our journey has led us to a significant milestone of 20,000 GitHub stars, accompanied by a vibrant community of 400 contributors. This achievement not only reflects numerical growth but also underscores our evolution into a thriving ecosystem of engaged users and contributors. In the spirit of fostering collaboration and learning, we're eager to share some of the strategic initiatives that have propelled our progress. It is our hope that these insights may provide valuable guidance to fellow open-source projects seeking to flourish in a similar manner.

1. Awareness Building

Cultivating awareness and garnering a dedicated user base is essential for sustained growth and development. A powerful strategy to achieve this is by actively engaging with platforms that cater to tech-savvy enthusiasts, such as Reddit's /r/selfhosted. This subreddit serves as a vibrant hub for discussions and recommendations surrounding self-hosted software and projects. By participating in relevant discussions, sharing valuable insights, and showcasing the unique features and benefits of your open-source project, you can tap into a community of individuals who are already enthusiastic about self-hosting solutions. This interaction not only brings your project to their attention but also establishes a direct line of communication, allowing you to receive feedback, address concerns, and foster genuine connections with potential users and contributors. In doing so, you not only increase the visibility of your open-source project but also lay the foundation for a loyal and engaged user base that can greatly contribute to the project's success over time.

Here’s how the subreddit /selfhosted helped us to boost the ToolJet 2.0 launch that brought awareness about the prominent features.

2. Strategic Launches

By strategically timing and presenting significant updates on platforms like Product Hunt, open-source projects can tap into a community of tech enthusiasts, innovators, and potential collaborators. In this case, Product Hunt's engaged audience, always on the lookout for novel solutions, offers a unique opportunity to showcase new features and improvements. This exposure not only generates interest and feedback but also creates a sense of excitement around the project's progress.

Our debut on Product Hunt propelled ToolJet to the top spot as the Product of the Day🔥 and an impressive 3rd position in the coveted Product of the Week rankings

3. Content Enablement

Leveraging current trends on platforms like DEV can maximise product visibility. By constant content production and aligning them with trending topics, you can effectively capture the attention of a wide audience. This strategy was supportive for us in the past, with our previous DEV blogs reaching thousands of viewers. For instance, our articles on building internal tools with ChatGPT's integration garnered substantial engagement, demonstrating the power of leveraging trending discussions to enhance content visibility and engagement.

Building an intelligent CRM using ChatGPT, PostgreSQL, and ToolJet

Shubhendra Singh Chauhan for ToolJet ・ May 22 '23

#webdev #javascript #chatgpt #lowcode

Creating a SQL generator app with ChatGPT, PostgreSQL, and ToolJet

Teja Kummarikuntla for ToolJet ・ Mar 21 '23

#sql #tooljet #javascript #chatgpt

4. Collaborative Outreach

Engaging in collaborative outreach allows open-source projects to establish symbiotic partnerships with like-minded companies, nurturing mutual growth and innovation. Identifying win-win opportunities becomes pivotal in this endeavor, ensuring that both parties gain value from the collaboration. Equally crucial is setting clear, prioritized outcomes to steer efforts effectively. Measuring results and gleaning insights from these collaborations then forms the foundation for future engagements. Notable instances of such collaborations for ToolJet, include with industry leaders like MongoDB, Stripe, GitHub, MariaDB, and more, where joint efforts have led to address the relevant audience effectively.

5. Nurturing Contributor Community

Cultivating an engaged project repository is crucial for nurturing community growth and maintaining a responsive development environment. Simultaneously, our active approach to encouraging contributor engagement is highlighted by our strategic emphasis on showcasing ToolJet’s expanding contributor base. This is achieved by creating and managing accessible good first issues, which offer contributors opportunities to address specific product concerns. Through this approach, we not only strengthen our community but also enhance the project’s overall quality by collaboratively addressing pertinent issues.

6. Community Engagement

Active engagement with users plays a pivotal role in nurturing meaningful interactions within a project's user base. Recognizing the significance of direct communication, ToolJet regularly hosts community calls in the last week of every month. These sessions provide an opportunity not only to share updates on releases and demonstrate features but also to educate users about specific usage aspects and best practices. These collaborative interactions encourage open discussions and valuable feedback from the community. The insights garnered from these conversations serve as a valuable resource for internal decisions, enabling them to refine and enhance their products based on community expectations and requirements.

7. Evangelizing on the ground

Elevating awareness of the open-source product through active engagement in relevant conferences and meet-ups stands as a potent strategy. These gatherings offer an optimal platform to spotlight the product's value, advantages, and distinctive attributes directly to a receptive audience. Notably, ToolJet has consistently participated in open source conferences like IndiaFOSS and FOSS Hack hackathons, leveraging the conversations, informative exchanges, and the cultivation of connections. These events effectively disseminate product information within a community that shares common interests and requirements. This proactive approach not only builds brand recognition but also positions the open-source product as a pertinent and influential solution within its niche.

Conclusion

As we reflect on this milestone, it's essential to recognize that each platform offers a unique landscape and experimentation is key. What worked for us might require adaptation for others. The journey is one of perpetual learning, where embracing new approaches, seeking valuable feedback, and nurturing authentic connections contribute to a thriving open-source ecosystem. So, while our story may inspire, it's your experimentation and commitment that will shape your own success story, leading to impactful stars, contributors, and accomplishments. We sincerely hope that these insights find their way into your project's growth journey. Thank you for taking the time to read through and explore our journey.

Feeling intrigued by our journey? Take a closer look at ToolJet on GitHub and consider giving it a star⭐️ if it captures your interest. Dive into the project's potential by exploring the good first issues and up for grabs – your contribution could be the next step towards shaping our collective endeavor.

Build an AWS S3 Browser with ToolJet

Teja Kummarikuntla — Thu, 03 Aug 2023 10:05:53 +0000

Amazon S3 (Simple Storage Service) has emerged as a popular choice due to its reliability, scalability, and cost-effectiveness. S3 service provides developers with a flexible object storage service, making it a great option for storing and retrieving any amount of data at any time.

However, interacting with Amazon S3 programmatically can sometimes be a daunting task. In this tutorial, we will introduce you to an efficient approach that simplifies the process of building a powerful AWS S3 Browser App without the need for extensive development work.

What is ToolJet?

ToolJet is an open-source low-code framework that enables us to build full-stack web applications within a few minutes. With ToolJet, you can create standalone fully-functional full-stack applications or embed applications into other websites.

ToolJet allows you to build applications that use relational and non-relational databases, REST APIs, OpenAI technologies, and cloud storage like Google Cloud Storage, AWS S3, and Minio. It is an excellent development tool helping individuals, developers, and businesses create and ship products faster.

Before we continue
I would be super happy if you could give us a star! And let me also know in the comments section. ❤️

https://github.com/ToolJet/ToolJet

Overview

To develop this application, we will utilize ToolJet along with its S3 integration, enabling us to perform various operations. These operations include fetching a list of all available buckets, retrieving data from selected buckets, and uploading data into the chosen buckets.

Before diving into the technical aspects, let's take a look at the application's interface and its overall functionality. The application features two tabs. The first tab is called "Browser," which allows users to browse through the existing buckets and explore the data contained within them.

Browser

Uploader

In the second tab, users can upload data into a selected bucket. This feature allows them to choose a specific bucket and then upload their desired data into it.

To understand how this application is built, the user interface (UI) and its functional behavior are developed using ToolJet's UI components and their properties. On the other hand, the operations related to Amazon S3 are facilitated through the AWS S3 integration provided by ToolJet. This integration allows the application to interact with Amazon S3 and perform specific actions. For this tutorial, three specific S3 operations

"List Bucket": This operation enables the application to retrieve a list of all available buckets in the Amazon S3 account.
"List Objects in Bucket": With this operation, the app can fetch the data inside a selected bucket, displaying its contents to the user in the "Browser" tab.
"Upload Object": The "Upload Object" operation allows users to select a bucket and then upload their chosen data into that bucket using the functionality available in the second tab of the application.

For the purpose of this tutorial, we have limited the operations to only three; however, it's worth mentioning that the AWS S3 integration offers a wide range of other operations as well. You can explore these additional operations and incorporate them into the application to build any required features beyond the tutorial's scope.

Create a ToolJet Application
To kickstart, let's guide you through creating a new ToolJet application. Whether you are using the cloud-based version of ToolJet or the self-hosted version, the steps are straightforward.

Sign up or Sign in: Visit tooljet.com and sign up for a free account if you don't have one. If you already have an account, sign in.
Dashboard: After signing in, you will be taken to the ToolJet dashboard. Here, you will find an overview of your existing applications and access to other functionalities.
Create a New App: To create a new application, click on the "Create New App" button, which will take you to the 'Application Builder'.
Name the application: You can name the application of your choice from the top left corner of the application builder; we can call it "Inventory and Orders Manager."

Connect to AWS S3

To perform all the operations from ToolJet to S3, the first step is to configure and establish the connection with the data source. Here's how you can do it:

Return to the ToolJet Dashboard.
From the left sidebar, navigate to "Global Datasources."
Click on "Add new Datasource."
In the gallery of data sources, search for "AWS S3" and select it.
Fill in the required details and test the connection before saving it.

Aspects of the Application Builder

Let's explore the major areas of the Application Builder that will ease your development process with ToolJet.

1. Canvas: Canvas is your playground for building your application's user interface (UI). Here, you can visually design and arrange the components of your application's interface. Drag and drop components onto Canvas to create a seamless and user-friendly UI for your apps.
2. Components Manager: Located on the right side of the Application Builder, the Components Manager provides you with a comprehensive list of components you can utilize in your application. These pre-built components serve various purposes, such as buttons, forms, tables, etc. With a wide range of components, you can quickly assemble a powerful and visually appealing UI for your app.
3. Query Panel: The expandable Query Panel is at the bottom of the Application Builder. This panel plays a crucial role in connecting your application to data sources. It allows you to list and access the connected data sources, seamlessly integrating your Google Sheets data and other data sources. By selecting a data source from the Query Panel, you can create queries to perform specific operations and retrieve data dynamically.
4. Left sidebar: The Left Sidebar provides convenient access to features such as creating and managing pages, inspecting components, and the debugger for efficient development and debugging of applications.

Now that you are familiar with the Application Builder, let's dive deeper into each area and explore how you can leverage its features to build the application from scratch.

Build the Application.

Now that we have explored the ToolJet Application Builder, it's time to dive into building the application step by step. As you know, this app consists of two tabs, so let's begin the development process by creating the "Browser" tab first. We'll focus on implementing the functionality that allows users to browse through the existing buckets and explore the data inside them. Let's get started!

As a first step, let's set up the navbar for the application. To do this, we'll be using the "container" component, which will serve as the navbar. You can find the "container" component in the components list, and then simply drag and drop it onto the canvas. Once placed, arrange it at the top of the page to ensure it functions as a proper navbar.

Next, let's customize the appearance of the navbar. You can choose any color you prefer, or you can use the hash code #2C3748 to match the color shown in the image. To set the color, click on the container component and navigate to the "Styles" tab in the components manager on the right side. Then, update the value of the "Background Color" field to your desired color.

Now, let's add a title to the navbar. Search for the "text" component in the components list and add it on top of the current container. To update the default text of the component, go to its properties and modify the value of the "Text" field to "AWS S3 File Browser" or any other title you prefer.

Similarly, for the logout icon on the right side of the navbar, you can use the "icon" component with "IconLogout" as the value for the "Icon" field in the component properties.

Now that the UI for the Navbar is complete, there is one more functional aspect to address: making the logout icon operational. To achieve this, follow these steps:

Click on the logout icon component to select it.
In the component properties, locate the "Events" section and expand it.
Click on the "+ Add handler" button to add a new event handler.
Set the following values for the event handler:
Event: "On click"
Action: "Logout"

By setting up the event handler in this way, when a user clicks on the logout icon, the currently logged-in user will be signed out and need to log in again to access the application.

With this implementation, the logout functionality will be fully operational, and users can securely log out from the application.

To accommodate both the 'Browser' and 'Uploader' sections of the application, we will utilize a Tabs component. Let's add the Tabs component to the canvas and center it.

Click on the Tabs component and access its properties.
Update the 'tabs' field value to the following:

{[
  { title: 'Browser', id: '0' },
  { title: 'Uploader', id: '1' }
]}

This configuration will ensure that the Tabs component displays the two required tabs, one for the 'Browser' section and the other for the 'Uploader' section. Additionally, you can remove any default components within the Tabs component to create a clean slate and set the "Highlight Colour" from Styles to #ec912dff for further customization.

Building the Browser Tab

In the 'Browser' tab, we will be working with two tables. The first table will list all available buckets, and the second table will display all the objects within a selected bucket.

Let's start by adding two tables, table1 and table2, to the tab component. Adjust the leftmost table (table1) to display only one column by configuring its properties accordingly. Then, arrange the other table (table2) to the right of table1.

For table1, we will customize it by turning off all options in the properties except for the 'Show search box' field. Additionally, set the table's border radius to '5' from the 'Styles' tab of the components manager.

Similarly, for table2, we can turn off all options, while keeping the 'Show search box' enabled to help with data search once the table is loaded.

Above table2, let's add an "Input" component along with two buttons. One button will be used for searching, and the other button, placed to the right, will be labeled "Uploader."

By implementing these steps, the 'Browser' tab will be visually organized, with table1 displaying the available buckets, table2 showing the objects within the selected bucket, and the corresponding search and uploader functionalities appropriately positioned above the second table.

Creating the S3 queries

Now, let's add functionality to the UI by creating our first query, which will enable us to fetch all the buckets from the S3 data source.

To get started, open the query panel by pulling it up from the bottom of the screen. Next, click on the '+ Add' button, or you can directly choose the previously connected S3 data source from the available options.

Once you select the data source, a new window will appear in the query panel. Here, you can give the query a name, such as 'getBuckets,' and choose the operation 'List buckets.' Then, click on the 'Preview' button to test a sample request and hit "Create" to save it.

Note: By enabling "Run this query on application load," your queries will automatically execute as the app loads. This means that the necessary data will be fetched and displayed without any additional user input. It helps ensure that the app starts with the most up-to-date information.

With this query in place, we will be able to fetch a list of all the buckets, which is needed to populate table1 in the 'Browser' tab.

To connect the query with the table1 component, follow these simple steps:

Click on the table1 component to select it, and then navigate to its properties.
In the properties section, find the "Table data" field and replace its current value with {{queries.getBuckets.data.Buckets}} . This will establish the connection between the query and the component, resulting in the table being populated with the data retrieved from the 'getBuckets' query.
If necessary, you can further customize the table by removing any unnecessary columns, leaving only the "Buckets" column to display the names of the available buckets.

With these adjustments, table1 will dynamically display the list of available buckets, we can similarly do the same for table2 when the query for fetching objects of the selected bucket is ready.

To bring all the objects from a selected bucket in table1 to table2, follow these steps:

Create a new query named "getObjects" and select the operation "List objects in a bucket". It's essential to dynamically fill the value of the field "Bucket" by selecting a row in table1. To do this, insert {{components.table1.selectedRow.Name}} . Additionally, set the maxkeys value to 1000.
After creating the query, click on a row in table1 and click "preview" to test the query. Save it by clicking on the "Create" button.
Now, just like we connected the "getBuckets" query to table1, let's connect the "getObjects" query to table2. Update the "Table data" property of table2 to {{queries.getObjects.data.Contents}} .

As part of the desired functionality, we want to update table2 every time a new row is clicked in table1. To achieve this, go to the properties of table1 and add an event handler with the following settings:

Event: Row clicked
Action: Run query
Query: getObjects

With these changes, the "getObjects" query will now be executed and populate table2 every time a new row is selected in table1.

With these steps, both tables in the "Browser" tab are now fully functional. Users can make use of the components' search feature to easily find specific items. Additionally, there are opportunities to implement custom search functionality for the TextInput field above table2, providing even more search capabilities.

Regarding the "Upload files" button, its purpose is to take users to the "Uploader" tab when clicked. To achieve this, you can add an event handler to the button from its properties:

Event: On Click
Action: Control component
Component: tabs1
Action: Set current tab
ID: 1

By implementing this event handler, the "Upload files" button will successfully navigate users to the "Uploader" tab, where we will explore how to upload files to a selected bucket.

Building the Uploader Tab

In the 'Uploader' tab, we need to include multiple fields that will take inputs such as the bucket name, file name, and the file to be uploaded. To build the UI, we can use the components shown in the image, and since the 'Browser' tab is already set up, arranging these components will be straightforward.

For the Dropdown component, we want to list all the bucket names as options. To achieve this, we can set the option values and option labels to {{queries.getBuckets.data.Buckets.map(item => item.Name)}} . This will dynamically populate the dropdown options with all the bucket names retrieved from the 'getBuckets' query. Additionally, we can set the Default option to {{components.table1.selectedRow.Name}} , which will set the dropdown's default value to the selected row of table1 in the 'Browser' tab.

Creating the S3 queries

To enable file uploading to the selected S3 bucket, we will create a new query called 'uploadObject' by following these steps:

Click on '+ Add' in the query panel and select the S3 data source. Name the query 'uploadObject' and choose the 'Upload object' operation. This will open a window requesting details of the file to be uploaded.

Dynamically fill the query fields as follows:

Bucket: {{components.table2.selectedRow.Name}}
Key: {{components.textinput2.value}}
Content Type: {{components.filepicker1.file[0].type}}
Upload Data: {{components.filepicker1.file[0].dataURL}}

Please note that the IDs of the components in the interpolation text may differ based on your component naming.

To test the query, you can add some dummy data to the fields, click 'Preview,' and then 'Create' to save the query.
To trigger this query on the 'Upload' button click, you can add an event handler that runs the 'uploadObject' query upon clicking the button.

With these steps, you have successfully built an application that allows you to browse through S3 buckets and perform file uploads. While the tutorial's scope is limited to these features, the S3 integration offers a wide range of operations that you can utilize to extend the application's functionality according to specific requirements.

What's next

To continue your journey and explore more possibilities with ToolJet, we encourage you to visit and try out our further tutorials here at blog.tooljet.com. Our blog is filled with tutorials, guides, and helpful resources that can further enhance your knowledge and help you unlock the full potential of ToolJet.

In addition to the blog, we also recommend referring to our comprehensive documentation available at docs.tooljet.com. The documentation covers a wide range of topics, including detailed explanations of components, advanced query techniques etc.

Furthermore, we invite you to join our vibrant community on our Slack workspace. By joining our community, you can connect with other active ToolJet users, share your experiences, and seek assistance when needed.

Once again, congratulations on your achievements so far! We sincerely thank you for reading this tutorial and choosing ToolJet for your application development needs. We hope this tutorial has provided you with valuable insights and empowered you to build powerful web applications with ease.

We look forward to seeing what you create next with ToolJet. Happy building!

Build an Inventory and Order Management App with Google Sheets and ToolJet

Teja Kummarikuntla — Mon, 24 Jul 2023 12:57:34 +0000

Efficient supply chain management is vital for businesses aiming to optimize operations and drive productivity. When it comes to building a cost-effective supply chain management tool, the combination of Google Sheets as a database and ToolJet as a powerful low-code platform can be a game-changer.

In this tutorial, we will delve into the process of leveraging Google Sheets and harnessing ToolJet's capabilities to construct a robust and streamlined inventory and order management app which can be tailored to your specific

What is ToolJet?

Before we continue
I would be super happy if you could give us a star! And let me also know in the comments section. ❤️

https://github.com/ToolJet/ToolJet

Overview

To give you a glimpse of what awaits you, let's start by showcasing the complete application.

Dashboard

The Dashboard page provides a comprehensive overview of your orders and inventory. It offers a visually appealing glimpse of your overall order status and inventory counts. With this at-a-glance view, you can quickly assess the health of your supply chain and make informed decisions.

Inventory Manager

The Inventory Manager page allows you to efficiently manage your products and track their status. A table displays the products along with their quantity, price, and category. You have full control over your inventory, with options to add, delete, and edit products seamlessly. This ensures that you always have accurate information about your stock and can easily make necessary updates.

Orders Manager

The Orders Manager page enhances the way to handle orders. It presents a Kanban view, allowing you to visualize and track orders in different statuses, such as todo, in progress, and completed. This intuitive interface enables you to effortlessly manage orders, add new ones, update their status, and delete them if needed. With the Orders Manager, you can ensure timely order fulfillment and provide exceptional customer service.

Throughout the application, we leverage ToolJet components and the powerful Google Sheets integration provided by ToolJet. This integration allows you to connect your Google Sheets data to the application seamlessly. Given this tutorial brings a wide range of functionalities to implement, we'll be covering the essentials which can be followed to address the tailored needs.

Create a ToolJet Application

To kickstart, let's guide you through creating a new ToolJet application. Whether you are using the cloud-based version of ToolJet or the self-hosted version, the steps are straightforward.

Sign up or Sign in: Visit tooljet.com and sign up for a free account if you don't have one. If you already have an account, sign in.
Dashboard: After signing in, you will be taken to the ToolJet dashboard. Here, you will find an overview of your existing applications and access to other functionalities.
Create a New App: To create a new application, click on the "Create New App" button, which will take you to the 'Application Builder'.
Name the application: You can name the application of your choice from the top left corner of the application builder; we can call it "Inventory and Orders Manager."

Connect to Google Sheets

Return to the ToolJet Dashboard.
From the left sidebar, navigate to "Global Datasources."
Click on "Add new Datasource."
In the gallery of data sources, search for "Google Sheets" and select it.
Choose "Read only" or "Read and write" based on your requirements. For this tutorial, we'll choose "Read and Write" to enable reading and writing data from Google Sheets.
Proceed to authorize ToolJet to access your Google Sheets by following the prompts.
Once the authorization process is completed, you can return to the Application Builder to continue the application development.

Aspects of the Application Builder

Let's explore the major areas of the Application Builder that will ease your development process with ToolJet.

Canvas: Canvas is your playground for building your application's user interface (UI). Here, you can visually design and arrange the components of your application's interface. Drag and drop components onto Canvas to create a seamless and user-friendly UI for your apps.
Components Manager: Located on the right side of the Application Builder, the Components Manager provides you with a comprehensive list of components you can utilize in your application. These pre-built components serve various purposes, such as buttons, forms, tables, etc. With a wide range of components, you can quickly assemble a powerful and visually appealing UI for your app.
Query Panel: The expandable Query Panel is at the bottom of the Application Builder. This panel plays a crucial role in connecting your application to data sources. It allows you to list and access the connected data sources, seamlessly integrating your Google Sheets data and other data sources. By selecting a data source from the Query Panel, you can create queries to perform specific operations and retrieve data dynamically.
Left sidebar: The Left Sidebar provides convenient access to features such as creating and managing pages, inspecting components, and the debugger for efficient development and debugging of applications.

Now that you are familiar with the Application Builder, let's dive deeper into each area and explore how you can leverage its features to build a robust and efficient application for your Supply chain management.

Build the Application.

Now that we have explored the ToolJet Application Builder, it's time to dive into building the application step by step.
As an initial step, let's create two pages for the "Inventory Manager" and the "Orders Manager." Additionally, we will design the left sidebar of the application to include navigation that allows users to switch between these pages effortlessly. To proceed with creating the pages and designing the left sidebar, follow these steps:

Open the ToolJet Application Builder and navigate to the "Pages" section in the Left Sidebar.

Click on "Pages" option in the left side bar to create a new page for the "Inventory Manager".
Set the page name of your choice, you can name it as "Inventory Manager"
Repeat the process to create a new page for the "Orders Manager".
Toggle the "Disable Menu" in the Pages settings to hide the page navigation sidebar in the view mode.
Once both pages are created, you can set the application layout from the Global settings.
Also, you can set the Background color of the Canvas to completely white, #ffffff

Now, let's create a sidebar for the app to enhance navigation and provide an intuitive user experience. The sidebar will allow users to switch between different pages seamlessly. Follow these steps to add the sidebar:

Drag and drop the "Container" component from the Components Manager onto the Canvas.
Position the container on the left side of the page and adjust its height as needed.
Customize the appearance of the container by setting its color. For example, you can set the color to a vibrant green shade like #237A6F.
To represent the different pages of the application, search for the "Icon" component in the Components Manager and add three icons to the sidebar container. These icons will serve as visual cues for navigation.
Consider adding a logo or branding image using the Image component at the top of the sidebar container. This will provide a cohesive and professional look to your application.

To enable navigation between pages by clicking on the icons in the sidebar, follow these steps:

Click on the desired Icon component in the Container. The Components Manager will display the options to set properties and styles for the component in separate tabs.

In the Properties tab, expand the "Events" section.
Add an event handler for the "On click" event.
Specify the action as "Switch page"
Select the appropriate page from the dropdown list. For example, you can choose "Home" for the Home icon.

Repeat these steps for the other pages you want to link to the sidebar icons. Adding event handlers to the icons establishes a connection between the click event and the respective pages, enabling smooth navigation within your application.

By following these steps, you will successfully add a sidebar to your application, enhancing its visual appeal and providing users with a convenient way to navigate between pages.

Moving on, we'll first focus on building the "Inventory Manager" page. This page will allow you to manage your products and track their status effectively. Let's get started.

Inventory Manager Page

The Inventory Manager page offers a comprehensive view of product counts, with a table displaying product details and the "Add New Product" button that enables one to create/add a new product to the list of products. We will build the page in two steps, creating the UI and then connecting it to the Google Sheets data source.

Building the UI

To start building the UI of the Inventory Manager page, let's divide the design into two segments. In the first segment, we'll focus on the page title and the interface to display the counts of products in different statuses.

Search for the "Text" component in the Component Manager and add it at the top left corner of the application. Once added, modify the default text to "Product Inventory" from properties and set its color to the same vibrant green used for the left sidebar design.
Next, create count holders using the "Container" component. Place them side to the previously added text component with a distance, adjusting their size accordingly to accommodate the counts. Inside each container, add a "Text" component to display labels such as "Qty in Total," "Qty in Stock," "Low in Stock," and "Out of Stock." Further, add another "Text" component to hold the respective number values for each count.
To separate the title and count sections visually, insert a "Divider" component below the "Product Inventory" text and the count containers.

By following these steps, you will have successfully created the first segment of the Inventory Manager page. To continue building the second section of the Inventory Manager page, which includes a search input with a button and a button to open a modal, follow these steps:

Search for the "TextInput" component in the Component Manager and add it below the divider. Set the border radius of the input field 6 using the styles tab of the component.
Next to the search input, add a button component with an appropriate size, color, and border radius set to 6.
Search for and add the "Modal" component to the extreme right of the search button, configure the properties and style of the button, give it a name such as "Add a Product" and set the desired color and border-radius. We will design the UI of the modal in the next step.
Add a Table component below the search input and buttons that will hold all the product details. Set the table type to 'Classic' and the border radius to 12 using the styles tab of the table component.

Please refer to the provided image for the modal design and place the components inside the modal accordingly.

By following these steps, you will have successfully added the necessary components for the second section of the Inventory Manager page. The search input, buttons, and table will allow users to search for products, add new products, and view product details in a structured manner.

To fetch data from Google Sheets, follow these steps:

Obtain the Spreadsheet ID from the Google Sheets URL. Locate the ID by finding the string of characters after spreadsheets/d/ and before /edit#gid=.... For example, if the URL is https://docs.google.com/spreadsheets/d/1n_Sm_NYQMwBanxGrHJaKvBJuz94U-xlfFJK3Knf32343OZS8/edit#gid=1311251363, the Spreadsheet ID is 1n_Sm_NYQMwBanxGrHJaKvBJuz94U-xlfFJK3Knf32343OZS8.
In the Query pane click on the "Google Sheets" data source that you connected earlier. Choose the operation "Read data from a spreadsheet".
In the second field, enter the Spreadsheet ID obtained in Step 1.
Optionally, specify the range and sheet values to define the specific data you want to retrieve.
Give a name to this query, such as "getProducts" or any name you choose.
Click on the preview button to verify that the query successfully retrieves data from the spreadsheet.
To automatically execute this query as the application loads, enable the option "Run this query on application load?".
Save the query, and it will be successfully created for further use.

By following these steps, you have created a query that fetches all the product data from the connected Google Sheets. This data can now be displayed in the table component on the Inventory Manager page. Additionally, the query can be executed automatically as the application loads, ensuring the table is populated with the latest data.

Here's how you can populate the table with the data from the getProducts query

Click on the table component in the Application Builder.
Go to the properties section of the table component.
Locate the "Table data" field and update its value to {{queries.getProducts.data}}.
Once updated, the table should automatically populate with the data from the query.
If the data does not appear immediately, you can manually run the "getProducts" query from the Query Panel, ensuring the table is populated with the query data.
To display an image within the table component, select the corresponding column in the properties section. Within the column settings, set the column type to "Image". This configuration will automatically transform the URL values within the column into visible images.

Additionally, you can arrange and customize the columns displayed in the table from the same properties section.

To make the "Add a Product" modal functional and enable the addition of products to the configured Google Sheets, follow these steps:

Access the Query Panel and click on the Google Sheets Datasource to view the query options.
Set the operation to "Append data to spreadsheet" to indicate that you want to add new data to the spreadsheet.
Specify the Spreadsheet ID to identify the target spreadsheet where the data will be appended.

In the "Rows" section, you will define the data to be added in a JSON format. The field values within the JSON will be dynamically updated from the input components.

Here's an example of how the Rows value can be set: [{"Name": "{{components.textinput4.value}}", "Description": "{{components.textarea1.value}}", "Price": "{{components.textinput2.value}}", "Category": "{{components.textinput5.value}}", "Status": "{{components.textinput3.value}}", "Image":"{{components.textinput7.value}}"}] Using the {{}} notation, you can access the values from the respective input components filled in by the user.

Save this query as "addProducts" to use it for adding products to the spreadsheet.
To execute this query when the "Add Product" button is clicked, add an event to the button's properties. Set the event as "On click", the action as "Run Query", and select the "addProducts" query.
Similarly, for the cancel button, add an event to close the modal when clicked. You can also include the same event to close the modal after executing the "Run Query" event for the "Add Product" button.

By following these steps, you have set up the query to add new products to the Google Sheets. The "Add a Product" modal will capture the input from the user, and upon clicking the "Add Product" button, the data will be appended to the spreadsheet. The modal will also provide a cancel option to close the modal without adding the product.

Now to dynamically update the values of the counters in the Inventory Manager page, we will utilize JavaScript code and ToolJet's RunJS query functionality. By implementing a custom script, we can calculate the product counts based on their statuses and return the results. This approach allows for real-time updates and accurate representation of the inventory status. Let's dive into the step-by-step process of executing the JavaScript code using the RunJS query and connecting the count values to the respective text components.

Open the Query Panel and select "RunJS" from the default datasource
This brings up the RunJS query options. Save the query with the name "getProductsCount".
Within the RunJS query, add the provided code snippet

const counts = queries.getProducts.data.reduce(
  (acc, item) => {
    acc.totalCount++;
    if (item.Status === "In Stock") {
      acc.inStockCount++;
    } else if (item.Status === "Low Stock") {
      acc.lowStockCount++;
    } else if (item.Status === "Out of Stock") {
      acc.outOfStock++;
    }
    return acc;
  },
  { inStockCount: 0, lowStockCount: 0, outOfStock: 0, totalCount: 0 }
);

return counts;

Save the "getProductsCount" query and ensure its execution on the successful completion of the "getProducts" query. To do that, On query success, add a event handler to the "getProducts" query to trigger "getProductsCount".

Congratulations on successfully building the Inventory Manager page! You have learned how to design the UI, connect to Google Sheets as a data source, populate the table with data, add new products, and dynamically update the count values.

Now that you have gained a solid understanding of how to build the UI and create queries in ToolJet, we will move forward at a slightly faster pace in the upcoming sections. With your newfound knowledge and proficiency, we will explore building the Orders Manager page.

Orders Manager Page

In the Orders Manager page, we will shift our focus to tracking and managing orders efficiently. To retrieve the order data, we will work with a different spreadsheet, where the product name of each order is indexed from the Product sheet using the product ID as a key. This process will involve utilizing query transformations to establish the necessary connections between datasets.
Regarding UI, we will introduce a new component called Kanban, which visually represents orders in different stages.

Building the UI for the Orders Manager page follows a similar process to the previous sections. However, as mentioned, we introduce a new component called the Kanban.

Add the Kanban component to the page, following the image provided in the blog.
Each card within the Kanban component should include three text components: one for the product name, one for the customer name, and one for the total price of the order.
Customize the styling and layout of the Kanban component to match your design preferences.
Top of this, the "Create an order" is a 'Modal' component and the text "All orders" is the text component.

Here's the UI of the modal for creating an orde.

By following the provided image and incorporating the necessary components, you can create a Kanban view that effectively displays order details and set the modal for adding inputs that can be used to append data to the Orders Spreadsheet.

Setting the Queries

We will utilize query transformations to combine information from different queries and enhance the data retrieval process. Specifically, we will focus on retrieving the orders data from a separate spreadsheet and associating the product name with each order using the product ID. This will enable us to present comprehensive and meaningful information within our application.

To connect to a new spreadsheet using the same datasource and retrieve the orders data, follow these steps:

Create a new Google Sheets query within the ToolJet Query Panel.
Set the operation for this query to "Read data from a Spreadsheet".
Specify the appropriate Spreadsheet ID to identify the target spreadsheet containing the orders data.
Save this query, you can name it as "getOrdersWithProductId"

This query will be able to bring the Orders data with product id in each object, to retrieve the product name for each order using the product ID and also to add a new key called "columnId" based on the status(will be needed for Kanban component) , we will utilize query transformations.

Toggle the "Enable transformations" option within the query options.
Add the provided JavaScript code snippet in the code editor

const products = queries.getProducts.data;
const orders = data;

const updatedData = orders.map(obj => {
  const productId = obj.ProductID;
  const product = products.find(prod => prod.Id === productId);
  const productName = product ? product.Name : "Unknown Product";

  return {
    ...obj,
    ProductName: productName,
    columnId: obj.Status
  };
});

return updatedData;

You can save the query and preview it, and here is how you can spot the difference with and without the query transformations.

{
  id: "2",
  OrderDate: "02/02/2023",
  Name: "Bob Smith",
  ProductID: "1",
  Phone: "9876543210",
  Address: "456 Elm St, Town",
  Comment: "Call before delivery",
  Status: "todo",
  Quantity: "3",
  TotalPrice: "343"
}

{
  id: "2",
  OrderDate: "02/02/2023",
  Name: "Bob Smith",
  ProductID: "1",
  Phone: "9876543210",
  Address: "456 Elm St, Town",
  Comment: "Call before delivery",
  Status: "todo",
  Quantity: "3",
  TotalPrice: "343",
  ProductName: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  columnId: "todo"
}

To connect the query response to the Kanban component and configure the column data and card data, follow these steps:

Set the Column Data field value of the Kanban component to the following JSON format: [{ "id": "todo", "title": "Orders Placed" },{ "id": "inprogress", "title": "Shipped" },{ "id": "done", "title": "Delivered" }] This configuration will define the columns as "Orders Placed," "Shipped," and "Delivered" within the Kanban component.
Set the Card Data field value of the Kanban component to {{queries.getOrdersWithProductId.data}}. This connects the query response to the Kanban component, ensuring that the data is displayed correctly.
To display the product name, customer name, and price in the respective card components, click on the text component within the first card of the first column. Set the text properties to {{cardData.ProductName}} to display the product name, {{cardData.Name}} to display the customer name, and $ {{cardData.TotalPrice}} to display the price.
On top of this, clicking on a specific card bring up an expanded view of the card; you can set the required components and display essential order details.

You can now try out the implementation of the "Create an order" modal and the respective queries. The process is quite similar to how we implemented the "Add a Product" modal in the previous section.

To get started, follow these steps:

Design the UI for the "Create an order" modal using the appropriate components, such as text inputs, dropdowns, and buttons.
Create a new query within the ToolJet Query Panel for appending data to the Google Sheets spreadsheet.
Set the operation of the query to "Append data to spreadsheet" and specify the appropriate Spreadsheet ID.
Configure the query to include the necessary input fields from the modal to capture the order details.
Add event handlers to the relevant buttons in the modal to execute the query on click.
Optionally, set up additional queries or query transformations to fetch updated order data and display it in real-time.

By following these steps, you can enable the creation of new orders through the modal and seamlessly update the Google Sheets spreadsheet with the order details. This allows for smooth data management and enhances the functionality of your Inventory and Order Management App.

Dashboard page

By now, you have gained valuable experience in designing UI components, creating queries, and integrating data into your application. Now, let's move on to the exciting task of building the Dashboard, which will provide a comprehensive overview of your inventory and orders.

Building the Dashboard is a fantastic opportunity to showcase your newfound skills. With the knowledge you have gained so far, you can confidently create a visually appealing and informative Dashboard that displays key counts and highlights from your application. You can make use of the application export share in the Overview section above.

To begin, refer to the provided image for the Dashboard layout with sections 1 and 2. As you have already built two complete pages, you are well-equipped to tackle this challenge; follow the image and place the components in the appropriate locations within the Canvas of the Application Builder.

One essential aspect of the Dashboard is displaying the counts of products in different statuses, similar to what you did in the Inventory Manager page. To achieve this, you can create queries that retrieve the necessary data and calculate the counts based on the status of the products. You can refer back to the section on creating queries for updating the count fields in the Product Inventory page to refresh your memory on this process.

By leveraging your previous experience and the knowledge you have gained, you have the skills and creativity to bring the Dashboard to life. Feel free to customize the components, styles, and layouts to match your desired design aesthetics Remember, the Dashboard serves as a visual snapshot of your application, providing a quick glimpse of the key metrics and insights. Focus on presenting the most relevant and impactful information to empower decision-making and streamline your business operations.

What's next

Congratulations on successfully building your Inventory and Order Management App with ToolJet! You have demonstrated your skills in UI design, query creation, and application development. Now that you have completed this tutorial, you might be wondering what's next.

We look forward to seeing what you create next with ToolJet. Happy building!

Building a Customer Support Desk App with ToolJet and PostgreSQL

Teja Kummarikuntla — Mon, 26 Jun 2023 10:52:58 +0000

In this tutorial, you'll learn how to build a customer support desk with ToolJet and a PostgreSQL database. The application enables you to track and respond to customers' queries and save their contact details on the application.

What is ToolJet?

Before we continue
I would be super happy if you could give us a star! And let me also know in the comments section. ❤️

https://github.com/ToolJet/ToolJet

Building the application user interface

Here, you'll learn how to use the various UI widgets provided by ToolJet to build user-friendly interfaces. Before, then you need to create an account.

If you are new to ToolJet, create an account.

Create a Workspace and a new app called Customer Support Desk.

After creating the application, a new canvas will be displayed where you can build any user interface using the UI widgets on the right-hand side panel.

In this article, I'll guide you through building the user interface for the customer support application.
The application is divided into three pages - the Dashboard page, the Ticket Details page, and the Customers' Information page.

Click on the pages icon on the top left corner to create the additional pages.

The Dashboard Page

Here, you'll learn how to work with various UI widgets by building the dashboard page of the application.

To replicate this design, let's divide the page into sections.

From the image above, the dashboard is divided into three sections - the left-hand sidebar, the top menu (with a red border), and the main section.
For the left-hand side icons bar, ToolJet has a collection of icons you can pick from, and you can also change the background colour of the container when you select it.

The top menu bar comprises the Text and Container components provided by ToolJet. You can change their sizes and colour to match the image below.

The main section of the application contains the Tab and Table components provided by ToolJet. The Table component is the child element of the Tab menu.

The Ticket Details page

The Ticket Details page displays a ticket's content and enables you to respond to them.

To recreate the header component, use ToolJet's DropDown component, and the main body of the page contains the TextInput, Text Editor, Text, and Button components provided by ToolJet.

The Customers' Information Page

This page displays the information about your customers. You can recreate the design using the Text and Table components.

Congratulations! You've successfully built the user interface for the application. In the upcoming section, you'll learn how to make the application functional by connecting it to a PostgreSQL database.

Setting up an ElephantSQL (PostgreSQL) database

ElephantSQL enables us to create a PostgreSQL database on the cloud instead of your local machine. Follow the steps below to create a PostgreSQL database:

Create an ElephantSQL account here.

Add a new database instance. No credit card or billing information is required.

Once you've created the database instance, your database information is displayed.

Next, let's connect your ToolJet app to the database.

Connecting a PostgreSQL database to ToolJet

Select Global Datasources from the top-right menu bar on your ToolJet dashboard.

Select PostgreSQL from the list of databases under the Global Datasources panel, and provide the required information as shown below.

From the image above, the host is the same as the server name on ElephantSQL (excluding the brackets). The username and database name are the same, and copy and paste the password into its field.

Scroll down the page and click Test Connection.

If the connection is verified, we can start making queries to the database.

Congratulations, you've successfully created and connected your database to the application. You can now start making queries to the database.

How to communicate with a PostgreSQL database in ToolJet

In this section, you'll learn how to communicate with the PostgreSQL database and how to make database queries in ToolJet.

ToolJet allows us to communicate with external resources or create custom functions via a panel known as Query Panel. In ToolJet, any function that interacts with a database, API, or cloud storage and runs a JavaScript or Python code is called a Query.

Next, create the database tables and add some dummy data before querying the database. You need to create two tables, one for the contacts and the other for the support tickets.

Navigate to the browser section on your ElephantSQL database and execute the code snippet below.

CREATE TABLE tickets (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255),
  product_version VARCHAR(10),
  issue_type VARCHAR(50),
  description TEXT,
  status VARCHAR(50),
  priority VARCHAR(50),
  assigned_to VARCHAR(100)
);

INSERT INTO tickets (name, email, product_version, issue_type, description, status, priority, assigned_to)
VALUES ('Chris Doe', 'john@example.com', '1.0', 'Bug', 'Encountered an error message when trying to save a file.', 'Open', 'High', 'Support Team');

INSERT INTO tickets (name, email, product_version, issue_type, description, status, priority, assigned_to)
VALUES ('John Doe', 'john@example.com', '1.0', 'Bug', 'Encountered an error message when trying to save a file.', 'Open', 'High', 'Support Team');

Finally, create the Contacts table and add some dummy data to the table.

CREATE TABLE contacts (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  email VARCHAR(255),
  title VARCHAR(100),
  organization VARCHAR(100),
  country VARCHAR(100),
  language VARCHAR(100)
);

INSERT INTO employees (name, email, title, organization, country, language)
VALUES ('John Doe', 'john@example.com', 'Manager', 'ToolJet', 'United States', 'English');

INSERT INTO employees (name, email, title, organization, country, language)
VALUES ('Sean Doe', 'sean@example.com', 'Manager', 'ToolJet', 'United States', 'English');

Querying the PostgreSQL database in ToolJet

To make the customer support application fully functional, you need to be able to fetch the data within the application. Therefore, create a query called getTickets that retrieves all the support tickets from the database.

Add the SQL query into the SQL mode editor, set the Run the query on application load? option to true, and save the query.

Next, set the value of the ticket's table to the result returned from the query.

You need to display the details of a support ticket when you click on each data row on the table.

To do this, you have to add a Switch Page event on the table and save the selected data row into a variable (to be accessed on the Ticket Details page).

Retrieve the selected row details using the {{variables.<variable_name>.values}} method provided by ToolJet. Therefore, when you click on any data on the table, it redirects you to the Ticket Details page, where you can see all the ticket information.

Next, create another PostgreSQL query that shows the number of tickets available according to their status.

Copy the code below into the SQL editor. It returns the status and number of tickets for each of them.

SELECT
    status,
    COUNT(*) AS ticket_count
FROM
    tickets
WHERE
    status IN ('Open', 'On Hold', 'Resolved')
GROUP BY
    status;

Display the number of tickets for each status, as done below.

{{queries.ticketStatusCount.data[<index>].ticket_count}}

Lastly, create another query that retrieves the contacts from the database and displays them on the table within the Customers page.

Update the table's content as shown below.

Congratulations on making it thus far! In the upcoming section, you'll learn how to respond to the customer's queries via email using the SendInBlue API in ToolJet.

How to send emails with the SendInBlue API in ToolJet

Sendinblue is a digital marketing tool that provides Email, SMS, Facebook, Chat, and more, via one platform to help grow businesses by building stronger customer relationships.

In this section, you'll learn how to send emails via Sendinblue in ToolJet. First, you need to log in or create a Sendinblue account.

Select SMTP and API on your dashboard, generate an SMTP key, and copy it somewhere on your computer. You'll need it shortly.

Return to your ToolJet app, add a new SMTP data source, and fill in the required credentials. Your password is the generated SMTP key.

If successfully connected, it will display "Connection Verified". Then you can start sending emails.

Next, create the query for sending the emails. Provide your email and name, and retrieve the recipient's email, subject, and response from the Ticket Details page.

The query retrieves the data automatically from the components. Finally, execute the query when you click the Send button.

Congratulations! You've completed the application. Here is a working demo of the application: Customer Support Desk

You can also download its JSON file and import it into a ToolJet app, but you'll need to provide your Sendinblue and database credentials.

Conclusion

So far, you've learnt how to

add a PostgreSQL database to ToolJet
send emails within a ToolJet application using Sendinblue, and
build full-stack applications in a few minutes with ToolJet.

ToolJet is both an intutive development tool and open-source - meaning its code is readily available for everyone to improve and contribute. It has a large community of developers and talented contributors constantly maintaining and improving the software. As a user, you can be sure of getting the best performance when you use ToolJet.

Are you interested in contributing to ToolJet? Feel free to check out our GitHub repo- https://github.com/ToolJet/ToolJet to contribute and raise issues about ToolJet.

Thank you for reading!

Building ChatGPT-powered apps in 5 steps 🚀

Teja Kummarikuntla — Mon, 22 May 2023 08:06:56 +0000

In this article, we will explore the possibility of rapidly building ChatGPT apps using the low-code solution, ToolJet.

Introduction

In the traditional approach, building apps and integrating them with ChatGPT requires significant programming expertise and time-consuming development cycles. However, we’ll use ToolJet and its seamless integration with OpenAI, and streamline the process, allowing developers to build applications that harness the capabilities of ChatGPT rapidly.

What is ToolJet

Before we dive into the details, let's take a moment to understand what ToolJet is. ToolJet is an open-source low-code development platform that enables users to build internal tools with minimal coding. It provides an intuitive visual interface that allows developers to create applications by connecting pre-built components and queries. The drag-and-drop functionality and a library of various integrations streamline the development process, making it an aligned choice for building ChatGPT apps.

https://github.com/ToolJet/ToolJet - 19k+ GitHub stars

If you are interested in exploring about it further, visit its GitHub page: https://github.com/ToolJet/ToolJet, and if you find it valuable, show your support by starring the repository ⭐️

Let’s get started!

1. Sign in or Sign up

If you're already a ToolJet user, sign in to your account. If you're new to ToolJet, you can quickly sign up and create a new account from www.tooljet.com

2. Create a new app

From the dashboard, locate the "Create New App" button in the top right and click on it. This will get you into the application builder. You can name the app as you wish.

3. Select OpenAI from Global Datasources

Navigate to the Global data sources from the Home page and select OpenAI from the plugins section of the window; this will bring up a window asking for your credentials

4. Configure the OpenAI plugin with credentials

Enter your API Key and Organization ID; you can create them from the OpenAI website.

Once done, test the connection and save it.

5. Fetch data from OpenAI

Go back to the Dashboard and open the application created in Step 2. Pull up the query panel from the bottom and select the OpenAI plugin from the “Global Datasources section” of the query panel.

This will bring you the options to define the OpenAI query. The plugin allows you to perform “Chat” and “Conversation” operations at the moment.

For testing purposes, you can choose the “Chat” and fill in the “message as input” field asking to "Draft an email for the customer reminding the payment due".

Congratulations, you’ve successfully configured the OpenAI plugin and made the initial request 🎉

What’s next

Now that you know how to create a ToolJet app and connect it with OpenAI, be sure to try out our sample applications that are built using OpenAI responses.

If you find ToolJet valuable and can potentially help you to minimize the engineering efforts, visit the GitHub page and show your support by starring the repository.

10 open-source alternatives to run your businesses

Teja Kummarikuntla — Wed, 29 Mar 2023 06:30:32 +0000

By choosing open-source alternatives to commercial proprietary software, it not only save money but also contribute to a community that believes in collaborative development and the sharing of knowledge.

Here are the a few prominent open-source alternatives that could nearly offers the same functionalities, and can potentially help start-ups or businesses in Digital technology.

1. Medusa JS - 17.5k ⭐️

Medusa is an open source composable commerce engine built with Node.js. Medusa enables developers to build scalable and sophisticated commerce setups with low effort and great developer experience.

Techstack

Typescript
Javascript

2. ToolJet - 18.4k ⭐️

ToolJet is an open-source low-code framework to build and deploy internal tools quickly with minimal engineering effort.You can connect to your data sources, such as databases ( PostgreSQL, MongoDB, Elasticsearch & more), API endpoints (ToolJet supports importing OpenAPI spec & OAuth2 authorization), SaaS tools (Stripe, Slack, Google Sheets, Airtable, Notion & more) and object storage services ( S3, GCS, Minio, etc ) to fetch and write data.

Techstack

Javascript
Typescript

3. Chatwoot - 14.8K ⭐️

Chatwoot is an open-source, self-hosted customer engagement suite. Chatwoot lets you view and manage your customer data, communicate with them irrespective of which medium they use, and re-engage them based on their profile.

Techstack

Ruby
Vue
Javascript

4. Baserow - 1.5k ⭐️

Baserow is an open source no-code database and Airtable alternative. Create database without technical experience.

Techstack

Python
Vue
Javascript

5. Supabase - 47.4k ⭐️

Supabase is an open source Firebase alternative, build the features of Firebase using enterprise-grade open source tools.

Techstack

Typescript
Javascript

6. Odoo - 28.5k ⭐️

Odoo is a suite of web based open source business apps.

The main Odoo Apps include an Open Source CRM, Website Builder, eCommerce, Warehouse Management, Project Management, Billing & Accounting, Point of Sale, Human Resources, Marketing, Manufacturing.

Techstack

Javascript
Python

7. Rocket.chat - 35.1k ⭐️

Rocket.Chat is an open-source fully customizable communications platform developed in JavaScript for organizations with high standards of data protection.

Techstack

Typescript
Javascript

8. n8n - 29.1k ⭐️

n8n is an extendable workflow automation tool. With a fair-code distribution model, n8n will always have visible source code, be available to self-host, and allow you to add your own custom functions, logic and apps. n8n's node-based approach makes it highly versatile, enabling you to connect anything to everything.

Techstack

Typescript

9. Penpot - 21.2k ⭐️

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open standards (SVG). Penpot invites designers all over the world to fall in love with open source while getting developers excited about the design process in return.

Techstack

Clojure

10. Postal - 12.5k ⭐️

Postal is a complete and fully featured mail server for use by websites & web servers. Think Sendgrid, Mailgun or Postmark but open source and ready for you to run on your own servers. Postal is developed by Krystal to serve its own mail processing requirements and we have since decided that it should be released as an open source project for the community.

Techstack

Ruby

Thanks for reading and feel free to add your thoughts and other OSS alternatives in the comments. Find more of such alternatives at opensourcealternative.to

Creating a SQL generator app with ChatGPT, PostgreSQL, and ToolJet

Teja Kummarikuntla — Tue, 21 Mar 2023 12:17:27 +0000

In this tutorial, you'll learn how to build a SQL Generator application using ChatGPT, ToolJet, and PostgreSQL.

Users can state the kind of data they want to retrieve from the database in plain English sentences, then ChatGPT converts them to the appropriate SQL syntax required to fetch the data from the database.
We'll be using ToolJet for the application interface.

What is ToolJet?

ToolJet allows you to build applications that use relational and non-relational databases, REST APIs, and cloud storage like Google Cloud Storage, AWS S3, and Minio. It is an excellent development tool helping individuals, developers, and businesses create and ship products faster.

Before we continue
I would be super happy if you could give us a star! And let me also know in the comments section. ❤️

https://github.com/ToolJet/ToolJet

What is ChatGPT?

ChatGPT is the most talked about technology at the moment. It is an AI language model trained by OpenAI to answer questions, provide information, and engage in human language conversations with users.

ChatGPT performs tasks such as writing, debugging, and explaining code snippets. With its latest language model GPT-4, ChatGPT can accept images as prompts and provides answers based on the given prompt or commands.

In this article, we'll use ChatGPT to generate SQL query syntax from plain English words. Before we begin, let's set up the application's database.

Setting up an ElephantSQL (PostgreSQL) database

ElephantSQL enables us to create a PostgreSQL database on the cloud instead of your local machine. Follow the steps below to create a PostgreSQL database:

Create an ElephantSQL account here.

Add a new database instance. No credit card or billing information is required.

Once you've created the database instance, your database information is displayed.

Congratulations! You've successfully created the database needed for this application. Next, let's design the application interface and connect the database to the application.

Designing the application interface with ToolJet

Here, you'll learn how to create a ToolJet account and design a fully functional application with ToolJet.

If you are new to ToolJet, create an account.

Create a Workspace and a new app called SQL Generator.

Design a user interface similar to the image below. ToolJet enables you to create applications' interfaces by dragging and dropping various UI components.

From the image above, I added the following:

the Table component with columns name and age,
the Text component that serves as a form label,
the TextInput component that accepts the SQL query in plain English.
a read-only Text Input component that displays the generated SQL query, and
two Buttons. One for generating the SQL query from ChatGPT and the other for executing the query on the PostgreSQL database.

How to communicate with ChatGPT in ToolJet

Here, you'll learn how to communicate with ChatGPT via Rest API in ToolJet.

ToolJet allows us to communicate with external resources or create custom functions via a panel, known as Query Panel. In ToolJet, any function that communicates with either of the following: database, API, cloud storage, and runs a JavaScript or Python code is called a Query.

Setting up an OpenAI account

Click Personal on the navigation bar and select View API keys from the menu bar to create a new secret key.

Generate a new API key and copy it somewhere on your computer. We'll use it in the upcoming section.

Communicating with the ChatGPT API in ToolJet

On your Query Panel, select REST API and create a POST request to the ChatGPT endpoint - https://api.openai.com/v1/chat/completions.

As shown in the image above, I added the following to the Query Headers variables.

Content-Type: application/json
Authorization: Bearer <YOUR_CHATGPT_API_KEY>

Enable Transformations and copy the code below into the code editor to retrieve the exact response needed from the request.

const choices = data.choices[0];
return choices.message.content;

Click Body, enable Raw JSON, and copy the code below into the code editor - it contains parameters sent along with the POST request.

{
    "model": "gpt-3.5-turbo",
    "messages": [
        {
            "role": "user",
            "content": "Write the SQL query for this operation: {{components.textarea1.value}}. I need only the SQL query. No explanations, please."
        }
    ]
}

The code snippet above uses the GPT-3.5 Turbo model provided by OpenAI, and the content variable contains the prompt sent to the ChatGPT API.
ToolJet allows users to access the attributes and values of each component. Hence, the {{components.textarea1.value}} represents the value (plain English command) provided by the user.

PS: Yours may not be textarea1, if so, change it to the component’s name for the user's input.

Finally, click the Save button.🎉

So far, we've configured the ChatGPT query. Next, let's execute the query when a user clicks the Generate SQL Command button.

From the image above, I added an on Click event to the button, and the ChatGPT query runs when a user clicks the button. It takes the user's input and sends a request for its equivalent SQL syntax when a user clicks the button.

To display the result, update the default value of the read-only Text Input component by setting it to {{queries.chatgptQuery.data}}.

Congratulations!🎊 You've been able to communicate with ChatGPT. Next, let's learn how to connect and communicate with the PostgreSQL database created earlier.

How to communicate with a PostgreSQL database in ToolJet

Here, you'll learn how to communicate with a PostgreSQL database in ToolJet. First, let me walk you through connecting a PostgreSQL database to ToolJet.

Connecting a PostgreSQL database to ToolJet

Click Add a Datasource from the Query Panel on ToolJet, select PostgreSQL from the list of databases, and provide the required information as shown below.

From the image above, the host is the same as the server name on ElephantSQL (excluding the brackets). The username and database name are the same, and copy and paste the password into its field.

Scroll down the page and click Test Connection.

If the connection is verified, we can start making queries to the database.

Communicating the PostgreSQL database in ToolJet

Here, you'll learn how to send the SQL queries generated by ChatGPT to the PostgreSQL database and view the queried data within the Table component on the user interface.

Before we begin, let's add some data to the database. Click on the PostgreSQL query, select SQL mode, and run the code snippet below to create a new table containing the data below.``

CREATE TABLE People(NAME varchar(255), AGE int); INSERT INTO People(name, age) VALUES(‘David’, 19); INSERT INTO People(name, age) VALUES(‘Tabby’, 21); INSERT INTO People(name, age) VALUES('Teja', 24); INSERT INTO People(name, age) VALUES('Julius', 27); INSERT INTO People(name, age) VALUES('Kedrick', 26); SELECT * FROM people;

You can view the data on ElephantSQL once it has been uploaded.

Next, let's receive the SQL command from the ChatGPT and display the data within the Table component on the user interface.

Update the SQL editor to contain the query retrieved from ChatGPT and save it.

Add an on Click event that runs the database query to the Execute button.

Lastly, update the Table component to display the data retrieved from the database.

Congratulations!🎉 You've completed the application for this tutorial. Click the Release button and the share icon to host and make the application public.

Here is the desktop version of the application: https://app.tooljet.com/applications/480a5bbb-3607-4c19-ac95-038d4e56cc2a.
You can also import this application into your ToolJet workspace by downloading its JSON file

Conclusion

So far, you have learnt how to:

add a PostgreSQL database to ToolJet
communicate with ChatGPT via REST API in ToolJet, and
design applications in a few minutes with ToolJet.

ToolJet is both an excellent development tool and open-source - meaning its code is readily available for everyone to modify and improve. It has a large community of developers and talented contributors constantly maintaining and improving the software. As a user, you can be sure of getting the best performance when you use ToolJet.

Are you interested in contributing to ToolJet? Feel free to check out our GitHub repo - https://github.com/ToolJet/ToolJet to contribute and raise issues about ToolJet.

Thank you for reading!

10 repositories to star if you are a Javascript developer

Teja Kummarikuntla — Wed, 08 Mar 2023 10:59:15 +0000

If you are a Javascript developer and an open-source contributor, here are the highly active open-source projects you can use in your daily work or contribute back to.

1. Storybook - 77.2k stars

A javascript tool enables developers to build organized and compelling UI systems in isolation.

Features

Simplifies the process of component development
Ability to integrate your tools to connect workflows.
Ability to reuse the components and share with other developers.
Documentation to your components

Tech Stack

Typescript
Javascript

Resources

Follow the Storybook guide to get started.
Join the Storybook community of frontend developers

2. ToolJet - 18.2k stars

ToolJet is an open source low-code platform that can save a huge amount of time in building internal tools for your daily or regular chores

Features

ToolJet has an inbuilt no-code database to save data from your application
It has integrations with all the prominent databases so that you can connect directly without needing to build APIs
Can use more than 35+ ready to use components to build the UI of the application

Tech Stack

JavaScript
Typescript
React

Resources

Follow the ToolJet blog to learn to use it better
Join the ToolJet slack to post your questions

3. Supabase - 46.5k stars

Supbase is an open-source database service; you can use Supabase as an alternative to Firebase

Features

Every Supabase project comes with a complete Postgres database
Offer multiple GUI features to view Tables, clone, and run quereis in the editor

Tech Stack

JavaScript
Typescript
PLSQL

Resources:

Follow the Supabase docs to learn to use it better
Join the Supabase discord to post your questions

4. Gatsby - 54.2k stars

Gatsby is an open-source framework based on react that helps developers build websites and apps. It combines the control and scalability of dynamically rendered sites with the speed of static-site generation.

Features

Helps to load data from anywhere, like Markdown files, Headless CMS, REST or GraphQL API etc.,
Gatsby sites do not require servers to host; you can host your entire site on a CDN
With Valhalla Content Hub, you can bring Gatsby’s data layer to any project.

Find more from the Gatsby features

Tech Stack

JavaScript
Typescript

Resources

Follow their guides in Readme to get started.
Explore Gatsby’s webinars

5. Cypress - 42.8k stars

Cyperss can help you can easily create tests for web applications, debug them visually, and automatically run them in your continuous integration builds.

Features

Ability to debug the failures directly in the browser
Enables integration with prominent CI providers
Flakey test management helps to discover and diagnose unreliable tests

Find more about the features in Cypress docs

Tech Stack

JavaScript
Typescript

Resources

Learn to start using Cypress from their detailed docs
Find more about Cypress from their blog

6. D3js - 105k stars

D3.js is a JavaScript library for manipulating documents based on data; it helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Features

Supports larger datasets
Code reusability
Ability to manipulate the Document Object Model (DOM)

Tech Stack

JavaScript

Resources

Find all the resources to use D3js from the README

7. Anime - 44.6k stars

Anime.js is a lightweight JavaScript animation library with a simple yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Features

Intuitive and compelling documentation
Lightweight and supported by the prominent browsers
Can manipulate modern CSS and can implement animations being arbitrary from JavaScript values.

Tech Stack

JavaScript

Resources

Follow the Animejs documentation to get started
Follow the Animejs Codepen examples

8. AdonisJs - 13.6k stars

AdonisJs is a full-stack Web framework with a focus on ergonomics and speed. It takes care of much of the Web development hassles, offering you a clean and stable API to build Web apps and microservices.

Features

AdonisJs has first-class support for databases like MariaDB and MySQL
The dedicated validation provider helps to validate user input easily.
Comes with tools to protect websites against common web attacks.

Tech Stack

Typescript

Resources

Learn to use Adonis form their documentation
Join the AdnoisJS discord server

9. TheatreJs - 8.8k stars

Theatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movements and convey nuance.

Features

Theatre.js can be used both programmatically and visually.
Can animate 3D objects made with ThreeJs or other 3D libraries
Ability to design micro-interactions

Tech Stack

Typescript
HTML

Resources

Learn to use TheatreJS form their documentation
Join the AdnoisJS discord server

10. LeafletJs - 37k stars

Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of gzipped JS plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.

Features

Designed with simplicity, performance and usability as core.
Works efficiently across all major desktop and mobile platforms
Leaflet plugins database helps to extend the functionality to use third-party plugins

Tech Stack

JavaScript
HTML

Resources

Learn to use LeafletJs form their tutorials and documentation

Hope this finds you helpful. Thank you!

Use ChatGPT API to build a README generator app with low-code

Teja Kummarikuntla — Fri, 10 Feb 2023 12:05:00 +0000

Overview

In this tutorial, you will learn to build an application that helps to generate a README markdown for a given repository URL. We will use OpenAI’s ChatGPT language model API for generating the content and ToolJet to build the queries and present them in the front end.

Here’s how the app looks like

Bonus: To use the app without building it, you can download and import the ready-to-use exported app to your ToolJet account.

By the way, we will not write more than 3 lines of code. Wait and watch how we do it ⚡

ChatGPT and its API

The OpenAI enabled APIs to access the `GPT-3 models, and you can sign-up from openai.com/api to start using it. Once you have access,

Generate the API Key from the Manage Account section of your profile
Use the API reference guide in the documentation to perform the requests. In this tutorial, we will be using the following endpoint with request data for generating the README.

Endpoint: https://api.openai.com/v1/completions
Method: POST

Headers:

{
  “Content-Type":  “application/json”,
  "Authorization": “Bearer <API KEY>”
}

Body:

{
"model": "text-davinci-002",
"prompt": " <PROMPT TO GENERATE THE README>”,
"max_tokens": 2048,
"n": 10,
"temperature": 0.9,
“Stream”: false,
“logprobs”:null
}

Do not get intimidated if you are not sure how to use these, you’ll learn to use them with ToolJet in the coming sections.

ToolJet - an open-source low-code framework.

ToolJet enables us to build the application with the pre-built ready-to-use components and quickly deploy it to the web, and we’ll also use it to create the ChatGPT API-request queries.

Check out the GitHub repository and hit ⭐ to save it and to let others know about ToolJet, this means a lot for us.

With this, you are all set to start building the application. Let’s go! 🚀

Build the application UI.

Let us start building the application with the front end; as you know, we’ll be using ToolJet to build it.

Set-up

Sign-up at https://tooljet.com
After logging in, create a new application
Name the application as you wish or set it as README generator

Arrange the components

Search for the Container component in the Components Manager.
Add the Container component to the Canvas by dragging and dropping.
Extend the width and height of the container by expanding the component borders
Search and add the Text component to the Canvas from the component manager and set the text value to Generate README for your repositories

Search and add the Text Input component and set the placeholder text to Enter your repository URL
Add a button from the component manager and set the Button text to Generate from the properties tab and border-radius to 10 from the styles tab of the component.

Add the Text area component to the canvas from the component manager, remove the default text and set the
Placeholder value to Enter your repo URL and click generate Add two buttons with Buttons text Download and Copy below the text area component

With this, the application UI is ready!
Additionally, you can improve the UI by exploring the various styles and properties of the components.

Build the query with OpenAI API.

Let’s build the query to perform an API request to OpenAI’s ChatGPT model. We’ll be using the request-data from the previous section.

From the query panel, click on RestAPI option
Set the query name to getReadme
Change the Request method from GET to POST
Enter the Endpoint https://api.openai.com/v1/completions
Set the Headers to
- Content-Type: applicaiton/json
- Authorization: Bearer <API KEY>

Replace the <API KEY> placeholder with your Api Key.

Hop over to the Body section and toggle the Raw JSON to paste the below JSON

{
   "model": "text-davinci-002",
   "prompt": "generate the README for the github repo: {{components.textinput1.value}}",
   "max_tokens": 1000,
   "temperature": 0.9,
   "top_p": 1,
   "n": 3,
   "stream": false,
   "logprobs: null
}

Notice the the value of the prompt attribute, the {{components.textinput1.value}} brings the URL from the text input component, the component-id textinput1 can be different in your case.

Toggle ON the Enable Transformations to write a Javascript code that alters the incoming data for displaying on the Text Area component.

With Enable Transformations turned ON, paste the below code


const choices = data.choices
const result = choices.map(item => item.text).join('')
return result

Hit Save on the top right corner of the query panel.

Connect Query to the UI

Now that we have the UI and the Query read, we can now connect both to bring the functionality and make this a complete app.

Select the button Generate and click on Add handler from the Properties tab Set the event to On click, action to Run Query and the Query to getReadme

In the Properties tab, click on the Loading State’s Fx and set the value to {{queries.getReadme.isLOading}}

Select the Text area component and the default value to {{queries.getReadme.data}}

Select the Download button and click on Add Handler button from the Properties tab

Set the

Event: On click
Action: Generate file
Type: Text
File name: README.md
Data: {{queries.getReadme.data}}

Similarly, add an event handler to the Copy button to copy the data from the query getReadme

Event: On click
Action: Copy to clipboard
Type: {{queries.getReadme.data}}

Awesome!!, pat yourself if you have made it so far!
We are just a step away from deploying the application, let’s quickly test the functionality of the application.

Test the application

You can instantly test the application by entering a GitHub repository URL and hit the generate button.

Make sure to test the README generation
The Download button should export the text content to a file named README.md
The copy button should copy the README content to the clipboard.

Deploy the application

As we built the app using ToolJet, it has the ability to deploy the application to the web in a single click.

Click on the Release button in the to right corner
Click on the Share button left to the Release button
Toggle the Make application public?
Customize the URL path if needed

Congratulations, you’ve successfully built the application 🎉!!
It’s okay if you were unable to make it at any instance, you can always get help from our Slack workspace. Join us at https://tooljet.com/slack and raise your questions at #general or drop them here as a comment. We are always here to help you.

Conclusion and what’s next?

With this tutorial, you’re pretty much ready to build apps with ToolJet. You had learnt

Building UI with components and customize them with properties and styles
Using Query panel to add data-source and perform requests
Running JavaScript to transform and return the data
Connect the Quereis with the application UI
Deploy and sharing to the web

With this, you are proficient enough to build applications using ToolJet, make sure to check out blog and try out other tutorials.

Top of this, you are absolutely welcome to contribute to the ToolJet codebase, check out our GitHub repository and be sure to hit the Star ⭐