DEV Community

Cover image for A Step-by-Step Guide to implementing AI in your App using Retool
Eden AI
Eden AI

Posted on • Originally published at edenai.co

A Step-by-Step Guide to implementing AI in your App using Retool

In this tutorial, we'll show you how to integrate Eden AI's Invoice parser API into your mobile app using Retool to help streamline your financial operations and free up time for more important tasks.

Whether you're a developer or a non-technical user, this guide is designed to help you build fast internal tools with rich user interfaces and automate your process with the power of AI. The same process applies if you want to include other features like: Image taggingExplicit content detectionText analysis and many more AI APIs we offer.

Build AI on Retool with Eden AI

Eden AI was created for no-coders having difficulties with choosing the right AI provider and/or integrating several APIs. Managing multiple accounts for each app can be a tough job, but with Eden AI, you can connect and manage all your APIs on a single account. Since some AI providers can be complex to use, we wanted to simplify the “no code” part and make AI available to as many people as possible.

Eden AI allows you to solve multiple AI tasks on Retool:

Let's practice with Invoice parsing!

Just like Receipt and Resume Parsing, Invoice Parsing is a tool powered by OCR to extract and digitalize meaningful data, Computer Vision to identify structure of the document, and NLP techniques to pin down the fields. Invoice parser technology extracts key information from an invoice (.pdf, .png or .jpg format) such as the invoice ID, total amount due, invoice date, customer name, etc.

Invoice Parsing results on Eden AI

Invoice parser APIs help ensure data accuracy by avoiding errors that can occur during manual data extraction. Then, this information can be used for a variety of purposes and makes it easier to generate reports or export data to other applications and is often used in conjunction with other business management applications.

Try Eden AI for FREE

Eden AI's Invoice Parser API

Eden AI's API offers OCR for invoices, delivering  accurate data extraction from invoice images or PDFs by calling multiple providers. It also returns the extracted information in a well-structured format, making it easier to analyze and manage the data.

Request

POST https://api.edenai.run/v2/ocr/invoice_parser

Headers

content-type : multipart/form-data

authorization : Bearer YOUR_API_KEY'

Form Data

providers: string (comma-separated) - specifies the providers to use for OCR

language: string (en) - specifies the language to use for OCR

file: file - the invoice image to be processed

Response

A JSON object with the extracted data from the invoice image. The data is grouped by the provider used for the call, with each provider having its own status and extracted data.

The extracted data includes information on the customer, merchant, invoice details, taxes, payment terms, item lines, and more.

Example response:

{
  "provider1": {
          "status": "success",
         "extracted_data": [
           {
             "customer_information": {...},
             "merchant_information": {...},
             "invoice_number": "000000",
             ...
             "item_lines": [
               {...},
               {...},
               ...
             ]
           }
         ]
       },
  "provider2": {
         "status": "success",
         "extracted_data": [
           {...}
         ]
       },
       ...
}
Enter fullscreen mode Exit fullscreen mode

How to add invoice parsing to your app with Retool?

Here's a step-by-step tutorial on how to integrate Eden AI's invoice parsing API into Retool:

1. Create a Retool project

Create a Retool project and go to the Resources tab.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e4e75198584c4a1d0820_create_retool.png

2. Create a new resource and add your connection info

Click Create new and select REST API to create a new resource. This will open a resource page where you can add your connection information.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e4f9ea7c872bbd15706d_select.png

3. Add your bearer API key

🔑 In order to obtain your API key, you'll first need to create an account on Eden AI:

Image description

Get your API key for FREE

Enter a name for the resource (e.g. "EdenAI API") then paste in the API endpoint https://api.edenai.run along with the header and your bearer API key obtained after creating your EdenAI account.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e51ec00acc722780a89f_api_request.png

4. Add your input

Now in your Retool UI, add a file input component for the invoice file.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e546af3efe751f4c6ee5_filebutton.png

5. Create an API request to Eden AI

To create an API request to Eden AI, you need to use the invoice parser endpoint (v2/ocr/invoice_parser) and change the request body format to form data.

Then, add the required payload data which includes the providers you want to call, the language of your file, and the invoice file itself.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e561847671a27b2bf9d8_request.png

Since the API request is a multipart request, you must also send both the file metadata and data using the javascript spread operator

{{ {...fileButton1.files[0], "data": fileButton1.value[0]} }}  
Enter fullscreen mode Exit fullscreen mode

6. Test the API request

You can now test the API request to make sure it is working as expected.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e57228bb5d0589304d61_sucess.png

If you encounter a timeout error, increase the limit in the advanced tab of your query to resolve the issue.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e592eaf006a828b04966_timeout.png

7. Add a trigger

You can add a button component to trigger the API request.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e5a6aa1ae0605a8bd83b_trigger.png

8. Time to test the API request!

Congrats ! 🥳 You can now test your API request by clicking on the “Launch invoice parser” button:

Use the response from the API to display the parsed invoice data in your Retool UI.

https://uploads-ssl.webflow.com/61e7d259b7746e3f63f0b6be/63e0e5c9bb3baea691592459_result.png

To sum up, integrating Eden AI Invoice Parser with Retool simplify your operations.

This guide walks you through building a REST API in Retool, setting up the endpoint, headers, and payload, and sending a request to Eden AI's invoice parsing API. It also demonstrates how to initiate the API request and display the extracted invoice data in Retool's user interface.

If you're interesting in more low-code tools, have a look at our step-by-step tutorials on how to bring AI to your application with Power AppsGoogle App Scriptn8nMake, and IFTTT.

Create your Account on Eden AI

Top comments (0)