DEV Community: Dmytro Olefyrenko

How to Chat with PDFs Using AI via API

Dmytro Olefyrenko — Tue, 14 Jan 2025 03:21:52 +0000

In this tutorial, I’ll show you how to leverage an AI chatbot API to interact with PDFs (or other document formats) by uploading them to the Easy-Peasy.AI platform. This step-by-step guide will walk you through the creation of a bot, uploading a source document, testing the bot’s knowledge, and integrating it via API.

Why Chat with PDFs via AI?

Gone are the days of manually combing through lengthy PDF documents to find specific information. AI-powered chatbots allow you to upload a document, ask it a question, and get precise answers in seconds. Whether you’re analyzing financial reports, legal documents, or any kind of structured data, this API-powered solution offers both convenience and flexibility.

Step 1: Create a Chatbot on Easy-Peasy.AI

The first step is to create a chatbot on the Easy-Peasy.AI platform. Once you’re logged in:

Navigate to the Bot Creation Page.
Configure basic settings for your bot:
- Select the bot model.
- Update instructions (to guide the bot's behavior).
- Adjust temperature settings (to control the bot's creativity).

This configuration ensures your bot is optimized for extracting the information you need.

Step 2: Upload Your PDF as a Knowledge Source

To make your bot smarter, you need to upload knowledge sources it will reference when replying to questions. Here's how:

Go to the Knowledge Tab of your bot.
Click on Add New Source and select Files.
Upload your PDF file (for this example, we’re using Tesla's earnings report).
The AI will process the uploaded PDF and make it available for the bot to use.

Note: Along with PDFs, you can upload other formats like CSV, DOCX, or even provide a website URL for AI to crawl.

Step 3: Test the Bot on the Web Interface

Once the PDF is processed, you can test the bot’s ability to answer questions:

Open the Bot URL (a shareable link).
Ask the bot a question based on the uploaded PDF.
- Example: "How many vehicles did Tesla produce?"
Observe the response. The bot should provide accurate answers based on the data in the document.

Step 4: API Integration

Now comes the fun part—integrating the bot into your application using the Easy-Peasy.AI API. Follow these steps:

Access the API Settings

Go to the Integration Tab of your bot.
Select API to view the API options. Here you’ll find:
- A prepared API endpoint.
- Example code snippets (in multiple languages).
- Your API key.

Test the API

You can test the API directly from the platform:

Paste your question into the input box (e.g., "How many vehicles did Tesla produce?").
Click the Test API button and observe the response.

The API will return the same answer as the bot interface.

Use the API with Node.js

Here’s a Node.js example to query the bot via API:

const axios = require("axios");

const main = async () => {
  const response = await axios.post(
    "YOUR_BOT_URL",
    {
      message: "how many vehicles were produced?",
      history: [],
      stream: false,
    },
    {
      headers: {
        "content-type": "application/json",
        "x-api-key": "YOUR_API_KEY",
      },
    }
  );

  console.log(response.data);
};

main();

In this code:

Replace YOUR_BOT_URL with your bot's URL from the Integration tab.
Replace YOUR_API_KEY with the API key provided by Easy-Peasy.AI.

Run the script, and you’ll receive a response from the bot with the same accuracy as seen in the web interface.

Step 5: Advanced Features

The API allows for more advanced integrations, such as:

Adding Chat History: Pass previous conversation history to maintain context during multi-turn conversations.
Embedding the Bot: Embed the bot’s web interface into your own website.
Uploading Additional Sources: Add multiple PDFs, text documents, or even crawl entire websites.

Conclusion

By using chatbot API, you can transform static PDFs into dynamic, interactive bots capable of answering questions instantly. Whether you’re building an application, conducting research, or simply looking for an intelligent document assistant, this solution is both accessible and powerful.

If you found this tutorial helpful, feel free to leave a comment or share your own use cases. Let me know if you’d like to see more detailed examples or tutorials on related topics!

How to Add a QR and Barcode Scanner to Your Vue.js App

Dmytro Olefyrenko — Sun, 30 Jan 2022 07:31:24 +0000

In this blog post, I will show you how to add a QR and barcode scanner to your Vue.js website. This is a great way to increase engagement with your users and can be used for a variety of purposes, such as marketing, product identification, and more! We will be using the vue-barcode-reader library for this tutorial, which is a popular option for scanning both QR codes and barcodes. Let’s get started!

Installation

First, we need to install the vue-barcode-reader library. We can do this with npm:

    npm install vue-barcode-reader --save

Or yarn:

    yarn add vue-barcode-reader

Please note that for projects which use the Vue 2.0 version you need to install the compatible version of the library (vue-barcode-reader@0.0.3).

TypeScript

If you are using TypeScript, you will need to install additionally the definitions of the vue-barcode-reader types. There are type definitions available at DefinitelyTyped for those who work with TypeScript.

    npm install @types/vue-barcode-reader --save-dev

    yarn add -D @types/vue-barcode-reader

Usage

Next, we need to add the library to our project. We can do this by adding it to our Vue component:

    import { StreamBarcodeReader } from "vue-barcode-reader";

Now, we need to add a QR or barcode scanner component to our project. We can do this by adding the following code:

    <StreamBarcodeReader
        @decode="onDecode"
        @loaded="onLoaded"
    ></StreamBarcodeReader>

We should also implement the handlers for decode and loaded events which the library exposes.

    onDecode(text) {
        console.log(`Decode text from QR code is ${text}`)
    },

    onLoaded() {
       console.log(`Ready to start scanning barcodes`)
    }

Now, you can scan QR codes and barcodes in your Vue.js application! Here is an example of a QR code that I scanned:

Demo

You can find the source code of the example application on Github or check it live at Vercel or Netlify. You can also check how vue-barcode-reader library works on the live production website here.

Conclusion

In this blog post, I showed you how to add a QR and barcode scanner capabilities to your Vue.js app. This is a great way to increase engagement with your users, and can be used for a variety of purposes, such as marketing, product identification, and more! I hope you found this blog post helpful. Feel free to ask me any questions in DM on Twitter. Thanks for reading!

🤖 How to create a Telegram Crypto Bot in Javascript

Dmytro Olefyrenko — Wed, 12 May 2021 04:50:21 +0000

Cryptocurrencies and blockchain technology are very hot topics right now. Bitcoin and Ethereum are hitting new all-time highs and more and more companies invest their assets in Bitcoin. Taking these facts as an opportunity to be involved in the crypto world, we will write a bot 🤖 for Telegram to monitor the prices on the cryptocurrency market. Below you can see the screenshot of such a bot. You can send to the bot the crypto token (or token pair) and get its trading price on the largest in terms of trading volume crypto exchange Binance.

Initializing the Node.js project

Please make sure that you have Node.js installed on your machine. You can get the latest version from the official website.

First of all, we need to create a folder where the code of our bot will be located. By executing the following commands, you can create the folder and initialize the Node.js project there:

mkdir cryptobot
cd cryptobot
npm init

Please answer the questions in the command line questionnaire. After it is done you should see the terminal output similar to mine:

After the successful project initialization, the package.json should be created inside the project folder and contain the information about your project metadata.

Now we need to install three npm packages required for our application. By executing this command, you will get them into the project:

npm install binance-api-node node-telegram-bot-api dotenv

binance-api-node — interacts with the official Binance API

node-telegram-bot-api — interacts with the official Telegram Bot API

dotenv — loads environment variables from a .env file into process.env

Getting the Crypto prices from Binance

As a first step, we will get the prices for the cryptocurrencies from Binance API. To use the Binance API, you need to have a Binance account (you can register a new one here). The code for retrieving Bitcoin price from Binance you can find in the following listing. To get the BTC price, we need to pass the symbol BTCUSDT as a parameter (USDT is a stablecoin, 1 USDT ≈ 1 USD).

import Binance from 'binance-api-node'
import dotenv from 'dotenv'
import { formatMoney } from './utils/money.js'

dotenv.config()

// API keys can be generated here https://www.binance.com/en/my/settings/api-management
const binanceClient = Binance.default({
  apiKey: process.env.BINANCE_API_KEY,
  apiSecret: process.env.BINANCE_API_SECRET,
})

const cryptoToken1 = 'BTC'
const cryptoToken2 = 'USDT'

binanceClient
  .avgPrice({ symbol: `${cryptoToken1}${cryptoToken2}` }) // example, { symbol: "BTCUSTD" }
  .then((avgPrice) => {
    console.log(formatMoney(avgPrice['price']))
  })
  .catch((error) =>
    console.log(`Error retrieving the price for ${cryptoToken1}${cryptoToken2}: ${error}`)
  )

Now you can run node index.js in the terminal and get the latest price for the BTC token as an output of the console.log.

If you are getting SyntaxError: Cannot use import statement outside a module please add ”type”: “module” into your package.json to be able to import ESModules in Node.js.

In the listing above, firstly, we initialize the Binance API client binanceClient by providing API key and API secret. These keys you can generate in your Binance account in the API Management page. Then we call the API method binanceClient.avgPrice to get the price by providing the object with the symbol key { symbol: "BTCUSTD" } as a parameter.
The API keys are stored in the .env file as a separation of config from code and as a security measure.

Creating the Telegram Bot

Since now we are able to get the cryptocurrency prices from the Binance API, it is time to integrate our application with the Telegram Bot API. After doing so, we will send the cryptocurrency price into the Telegram chat instead of sending it to the terminal, as we did on the previous code listing.

To create a Telegram Bot we need (can you guess :-)?) to talk to another bot, BotFather. By following simple steps, we can specify the name and the username for the bot and get the token after the creation is successful. This token should be kept secure and stored safely in .env file with a key TELEGRAMM_BOT_TOKEN.

Now having the token for our Telegram bot, we can create its instance using node-telegram-bot-api package.

const bot = new TelegramBot(process.env.TELEGRAMM_BOT_TOKEN, { polling: true })

Finally, we need to add the handlers for onText and message events. When the bot receives the message that matches the following pattern /price [symbol], our code will call Binance API to get the latest price for the provided symbol. The final code for the main file of the project index.js you can find below.

import Binance from 'binance-api-node'
import TelegramBot from 'node-telegram-bot-api'
import dotenv from 'dotenv'
import { formatMoney } from './utils/money.js'

dotenv.config()

// API keys can be generated here https://www.binance.com/en/my/settings/api-management
const binanceClient = Binance.default({
  apiKey: process.env.BINANCE_API_KEY,
  apiSecret: process.env.BINANCE_API_SECRET,
})

// The bot token can be obtained from BotFather https://core.telegram.org/bots#3-how-do-i-create-a-bot
const bot = new TelegramBot(process.env.TELEGRAMM_BOT_TOKEN, { polling: true })

// Matches "/price [symbol]"
bot.onText(/\/price (.+)/, (msg, data) => {
  const chatId = msg.chat.id

  bot.sendMessage(chatId, 'Wait...')

  // data[1] can be single token (i.e. "BTC") or pair ("ETH BTC")
  const [cryptoToken1, cryptoToken2 = 'USDT'] = data[1].split(' ')

  binanceClient
    .avgPrice({ symbol: `${cryptoToken1}${cryptoToken2}`.toUpperCase() }) // example, { symbol: "BTCUSTD" }
    .then((avgPrice) => {
      bot.sendMessage(chatId, formatMoney(avgPrice['price']))
    })
    .catch((error) =>
      bot.sendMessage(
        chatId,
        `Error retrieving the price for ${cryptoToken1}${cryptoToken2}: ${error}`
      )
    )
})

bot.on('message', (msg) => {
  const chatId = msg.chat.id

  switch (msg.text) {
    case '/start':
      bot.sendMessage(chatId, 'Hi there! I am Alice Crypto Bot.')
      break

    default:
      break
  }
})

Now if you run the project locally node index.js you should be able to send commands to your bot and get the responses with cryptocurrency price from it 🚀. You can check the source code of the ready project in this Github repository. And, of course, you can interact with the real Alice Crypto bot here - http://t.me/alice_crypto_bot.

Please follow me on Twitter @olefyrenko to get updates about how to add new functionality for our bot, like price changes alert (i.e., the price for the cryptocurrency went down or up). Also, feel free to ask me any questions in DM on Twitter. Thank you!