Developer Tutorial: Getting to Your First Scan

How long do you think it takes to add barcode or ID scanning to your app?

With a Scandit free trial, Scandit Agent Skills, and your AI coding assistant, you’ll get there in minutes.

Scandit Agent Skills ground your AI coding tool in thousands of real customer integrations and over 15 years of barcode, label, and ID scanning expertise. You get a co-developer who knows how to generate production-ready barcode scanning code, even within an existing app.

Just describe your use case, and Scandit Agent Skills will select and integrate the best Scandit product into your code. If you need to tune workflows or the user interface, simply prompt for what you want.

This way, you get data capture that works every time, without iterating through setup, customization, or performance-tuning efforts.

Here, I’ll walk through each step and prompt to add barcode scanning to a web app using Scandit Agent Skills and Claude Code. You can choose any AI coding assistant and supported development framework.

Scandit Agent Skills cover ID and label scanning, as well as barcode scanning.

Before we begin

For this tutorial, I’ve created a sample inventory app that looks like this. You may already have your own app or website you’re looking to add barcode functionality to.

Pre-requisites

If you haven’t already signed up for Scandit’s free 30-day trial, go ahead and do that now. This will allow you to create a license key.

You’ll also need:

• An AI coding agent. Scandit supports Claude Code, Codex, Cursor, GitHub Copilot, Gemini, OpenCode, and over 40 others.
• An existing app to add scanning to, or you can vibe code your own. For this tutorial, I’ve created a simple web app that accepts barcode data into alphanumeric text fields.
• Some barcodes to scan. Ideally, these will be similar to the real-world scenario your users will be scanning in — if users will scan tiny electronic shelf labels on crowded grocery shelves, scanning a large single code on a clean background at your desk isn’t the most useful evaluation. However, for a first check, a few items with barcodes to test scanning, such as groceries, a video game case, or a book, will do. Or, you can print out a copy of our barcodes sample sheet.

Add barcode scanning to your app

Follow these steps to add Scandit barcode scanning to your app. I’m using Claude Code. You can find installation instructions for other AI coding tools in our Agent Skills documentation.

1. Install Scandit Agent Skills into your AI coding tool

Open a terminal session and run these commands (replace with the commands specific to your AI coding tool):

/plugin marketplace add scandit/skills

/plugin install scandit-sdk@scandit-plugins

Here's what I can see in my terminal once I've done this:

2. Add Scandit barcode scanning features

Start a new session in your app’s working directory and execute the following prompt. For best results, use your tool’s plan mode to explicitly map out and confirm the implementation steps (e.g., /plan in Claude Code).

(If you’re not using Claude Code, make sure to use the appropriate skills trigger, e.g., $sparkscan-web for Codex)

In this app, users currently add items to the inventory by typing in barcodes manually. Add camera-based barcode scanning to this flow.

- Use /sparkscan-web, with the floating scan button.
- A scan looks up the item in the existing inventory and adds it to the list, exactly like a manual entry does. If the barcode isn't found, prompt to add it.
- Keep manual entry as is. Scanning is an additional input.
- Enable EAN-13, UPC-A, Code 128, and QR.
- Match the scanning UI to the app's design system.

I explicitly invoked the sparkscan-web skill, as it’s the best way to get a reliable barcode scanning experience running quickly, including all of Scandit’s AI barcode scanning features by default:

• Contextual awareness about the environment and device motion to capture only the barcode you want, even when multiple barcodes are in view.
• Smart selection to automatically display a target aimer when scenes are cluttered with barcodes.
• Automatic fallback to OCR techniques that improve capture speed and accuracy when labels are severely damaged or obscured.
• Smart duplicate filtering that analyzes user behavior and intent to avoid duplicates without forcing the user to wait for timeouts (the traditional way of filtering duplicates).

You can choose to use another skill, such as ​​barcode-capture-web skill if you want to build a custom UI or add barcode scanning to an existing UI, matrixscan-batch-web for simultaneous scanning of multiple barcodes, or label-capture-web for simultaneous scanning of barcodes and text.

An alternative route is to describe your use case to the data-capture-sdk skill without specifying a product, and it will automatically pick and integrate the best one for your use case.

All Scandit Agent Skills are listed here.

3. Add your license key

Now that SparkScan is integrated into your app, you need to provide it with a valid Scandit license key.

1. Jump back to the Scandit Dashboard and copy your license key.
2. Your AI coding agent will tell you where to add it. In my case, I’ll modify this line in /src/scandit/ScanditProvider.jsx:

const SCANDIT_LICENSE_KEY = '-- ENTER YOUR LICENSE KEY HERE --'

4. Run your app

All you need to do now is run your app and try scanning barcodes. You may need to enable camera access in your AI tool’s browser or open a link to your dev server in a new browser window.

My app looks like this during a barcode scan:

• Camera preview to help aim the device over the barcode. This includes controls for resizing and closing the window.
• A blue highlight over the barcode to confirm the intended barcode to scan.
• A trigger button that expands when clicked and shrinks when not in use.

After scanning a few items, my app looks like this:

5. Customize the user interface

If you want to play around with scanning workflows and UI controls, simply prompt the sparkscan-web skill with your changes.

For example, I gave it this prompt:

I want to customize my /sparkscan-web user interface:

- Change the trigger background color to the same blue as the other UI controls
- Change the default camera preview size to a larger window
- If an unsupported symbology is detected, display an error message that says "Unsupported barcode type".

The combination of your AI coding tool and the sparkscan-web skill is smart enough to recognize different options for implementing the unsupported symbologies feedback, and asks for a decision:

Next steps

Now that you know how to use Scandit Agent Skills, you can add other product capabilities and fine-tune workflows to get the best experience for your users.

We also recommend:

• Diving into our documentation.
• Learn how to measure barcode scanning performance.
• Find out why developers choose Scandit over open-source barcode scanning.