A Step-by-Step Guide to implementing AI in your App using Retool
Tags: ai, api, retool, development
Published: 2023-02-22 14:46:18

*In this tutorial, we'll show you how to integrate Eden AI's [Invoice parser API](http://www.edenai.co/feature/ocr-invoice?referral=integrate-invoice-parser-retool) 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 tagging](https://www.edenai.co/feature/object-detection?referral=integrate-invoice-parser-retool), [Explicit content detection](http://www.edenai.co/feature/explicit-content-detection?referral=integrate-invoice-parser-retool), [Text analysis](https://www.edenai.co/technologies/text?referral=integrate-invoice-parser-retool) 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:

- [Document parsing](https://www.edenai.co/feature/ocr?referral=integrate-invoice-parser-retool) : extracting text from images and [parsing invoice](https://www.edenai.co/feature/ocr?referral=integrate-invoice-parser-retool), [receipt](https://www.edenai.co/feature/ocr-receip?referral=integrate-invoice-parser-retool) or resume to extract data
- [Computer vision](https://www.edenai.co/feature/object-detection?referral=integrate-invoice-parser-retool): detect [faces](https://www.edenai.co/feature/face-detection?referral=integrate-invoice-parser-retool), [objects](https://www.edenai.co/feature/object-detection?referral=integrate-invoice-parser-retool), logos, [explicit content](https://www.edenai.co/feature/explicit-content-detection?referral=integrate-invoice-parser-retool), etc.
- Text analysis : [sentiment analysis](https://www.edenai.co/feature/sentiment-analysis?referral=integrate-invoice-parser-retool), [keyword extraction](https://www.edenai.co/feature/keyword-extraction?referral=integrate-invoice-parser-retool), [summarization](https://www.edenai.co/feature/summarization?referral=integrate-invoice-parser-retool), etc.
- [Machine Translation](https://www.edenai.co/post/best-machine-translation-apis?referral=integrate-invoice-parser-retool)
- [Speech recognition](https://www.edenai.co/post/which-speech-recognition-api-to-choose-for-your-project?referral=integrate-invoice-parser-retool) & Speech generation

‍

## **Let's practice with [Invoice parsing](http://www.edenai.co/feature/ocr-invoice?referral=integrate-invoice-parser-retool)!**
Just like [Receipt](https://www.edenai.co/post/top-10-ocr-receipt-parser-api?referral=integrate-invoice-parser-retool) and [Resume](https://www.edenai.co/post/top-10-ocr-resume-parser-api?referral=integrate-invoice-parser-retool) Parsing, Invoice Parsing is a tool powered by [OCR](https://www.edenai.co/post/analyze-easily-document-files-with-ai-optical-character-recognition-ocr?referral=integrate-invoice-parser-retool) to extract and digitalize meaningful data, [Computer Vision](https://www.edenai.co/post/best-computer-vision-apis?referral=integrate-invoice-parser-retool) to identify structure of the document, and [NLP](https://www.edenai.co/post/best-natural-language-processing-apis?referral=integrate-invoice-parser-retool) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkfdei2ldo1gosjxsj41.png)

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](https://app.edenai.run/user/register?referral=integrate-invoice-parser-retool)**

## **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](https://api.edenai.run/v2/ocr/invoice_parser?referral=integrate-invoice-parser-retool)

‍

### **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": [
           {...}
         ]
       },
       ...
}
```
## **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](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](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](https://app.edenai.run/user/register?referral=integrate-invoice-parser-retool):


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejqcihsn14vgg0ewcx4x.png)

**[Get your API key for FREE](https://app.edenai.run/user/register?referral=integrate-invoice-parser-retool)**

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](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](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](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]} }}  
```
### **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](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](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](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:

{% youtube eTewHfTZzTE %}

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](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 Apps](https://www.edenai.co/post/a-step-by-step-guide-to-integrating-edenai-invoice-parser-on-microsoft-powerapps?referral=integrate-invoice-parser-retool), [Google App Script](https://www.edenai.co/post/a-step-by-step-guide-to-integrating-ai-in-your-app-with-google-app-script?referral=integrate-invoice-parser-retool), [n8n](https://www.edenai.co/post/a-step-by-step-guide-to-implementing-ai-in-your-app-with-n8n?referral=integrate-invoice-parser-retool), [Make](https://www.edenai.co/post/how-to-integrate-invoice-parsing-into-your-application-using-make?referral=integrate-invoice-parser-retool), and [IFTTT.](https://www.edenai.co/post/a-step-by-step-guide-to-implementing-ai-in-your-app-using-ifttt?referral=integrate-invoice-parser-retool)*

‍

**[Create your Account on Eden AI](https://app.edenai.run/user/register?referral=integrate-invoice-parser-retool)**