DEV Community: Nanda Kresnatara

What is this thing #1: Artifacts

Nanda Kresnatara — Tue, 14 Apr 2026 12:07:02 +0000

Recently, since using Claude, I've come to notice that it generates code, charts, and docs in an interactive way. For example, usually, when I asked Claude to generate a simple navigation bar, it would spoon-feed me with codes that if I paste it into my IDE, and test it myself, it would show a simple navigation bar as requested. However, the recent experience has been different. Instead of showing the code, it creates me a navigation bar that I can view it directly on the conversation along with the code to be downloaded.

Here's another example of a CSV file

In the csv file above, it has variations since I asked to generate products, users, orders, and rating.

The navigation bar and the csv files are known as Artifacts

An artifact is a structured output that an LLM, especially Claude, generates during your conversation — something meant to be used and modified, not just read

Now you might wonder: "Does that mean all generated text is an artifact?" Not quite. Regular text responses are just called AI responses. An LLM typically returns text you can read and copy, and that's about it. An artifact goes further than that. It's interactive, editable, and often exportable.

Think of it this way:
AI response = a text message someone sent you. You read it, maybe copy it.
AI artifact = a file someone sent you. You open it, edit it, and maybe download it.

Another example of Artifact

In the screenshot above, I asked Claude to visit the TinaCMS docs and summarize the installation steps as a Markdown document. As you can see, the output isn't just text in the chat. You can view it in a dedicated panel, download it as an .md file, or even export it as a PDF.

Common examples of artifacts

Code snippet
Document
Single-page HTML website
SVG image
Diagram and flowcharts
Interactive React component

Conclusion

An artifact is what happens when an LLM stops telling you something and starts making something usable for you. It's a difference between AI sending you text and AI that hands you something you can actually use.

Why Data is Important for LLM

Nanda Kresnatara — Thu, 19 Mar 2026 15:01:01 +0000

I had always thought that I could just feed any data into AI and expect a good output. One tiny example that I sometimes still do is less context when prompting. I remember asking:

"Create me a set of schedule to support my fundamental daily learning on Software and AI Engineer".

It then created me schedules. It technically worked..., but not quite! It gave me an 8-hour straight schedule with no breaks. What I actually wanted was:

Multiple learning sessions (morning, afternoon, evening)
Breaks in between
Software Engineer topics in the morning and afternoon
AI topics in the evening

As you can see, even though they have the same intent: create a set of schedules, the outcome is very different, just because of a missing context. This simple example already shows how critical input data is. And that’s just prompting. When we scale this up to real-world systems feeding data into LLMs like Gemini, ChatGPT, Qwen, or Kimi, the impact becomes much bigger.

Data Types

Speaking of data, I think we also need to understand what data that goes in and not just nod along, "Oh, let's feed some data" without really understanding what kind of data we're dealing with. There are three main types of data:

Structured Data
Unstructured Data
Semi-structured Data

Structured Data

Structured data has a fixed, predefined format.

Think of spreadsheets or relational databases—data neatly organized into rows and columns. It’s easy to query, validate, and process.

Examples:

Financial reports
Survey results
Class schedules

Unstructured Data

Unstructured data has no predefined format.

This is actually what we interact with most of the time in real life.

Examples:

Emails
Images
Videos
Chat messages

Unlike structured data, this type requires additional processing (like NLP or computer vision) before it becomes useful.

Semi-structured Data

Semi-structured data sits somewhere in between.

It doesn’t follow a strict table format, but it still contains some organization through metadata or tags.

A good example is a social media post:

The image itself → unstructured
Metadata (caption, hashtags, timestamp) → structured elements

How Data Shapes AI

So far I think we already understand that in the example of my own, data is crucial. In a machine learning domain, there is this well-known principle:

Garbage In, Garbage Out (GIGO)

Basically, if your input data is messy, incomplete, or misleading, your output will reflect that. Imagine if models are ingested with:

Noisy datasets
Biased sources
Incomplete information

I don't think we will achieve what we have today if they were trained on poor-quality data.

Real World Example

Currently, I’m building a project that uses OCR + LLM to extract and parse data from shopping receipts into a backend system, which is then visualized on a dashboard. I did a lot of trial and error, especially on receipts that are not in good conditions. Here's the first example:

Case 1: Blurry Receipt

In the above example, two critical things are blurry: date and item name. I used RapidOCR to scan the receipt and here's what I got:

Bangorejo Sol WARUNG lobaru, Kwar SAYUR Sukoharjo UPSP KIIA Gr rugu!
/02/ 10115 /2026 Kasir:KASIK Jam 10:57
PHIFIK 1PCKx NGKUNG 8. 000= BALADO 8. .000
KEMBALI.. JUMLAH OT A UANG .. 10 8 2. 000 .000 .000
1 Items Pembayai TUNAI
TERIMA KASIH
ATAS KUNJUNGAN ANDA
PEMESANAN xxxxxxxxxxxx
KRITIK DAN SARAN xxxxxxxxxxxx

As you can see, the date is fragmented 02 and 2026 and the item name is partially corrupted. Yes, the gap is my biggest obstacle in laying out what has been scanned, but apart from that, bad data produces bad output.

Then I passed this into an LLM (running via Ollama, model: GPT-OSS:120b-cloud):

response data: {'receipt_id': 'c5f962ce-1a48-432e-a4d2-a24ea048597f', 'merchant_name': {'value': 'WARUNG SAYUR KIIA'}, 'date': {'value': None}, 'time': {'value': '10:57'}, 'items': [{'name': {'value': 'NGKUNG BALADO'}, 'qty': {'value': 1}, 'price': {'value': 8000}, 'total_price': {'value': 8000}, 'category': {'value': 'Food & Beverage'}, 'discount_type': {'value': None}, 'discount_value': {'value': 0}, 'voucher_amount': {'value': 0}}], 'total_amount': {'value': 8000}}

The model cleaned up some parts, especially the merchant name, but:

The date is completely missing
Item names are still incomplete Here's another example:

Case 2: Dirty Receipt

Now what about a noisy, dirty receipt? Here's what I got:

ALFAMART KOMARASAN SUKOHARDO
KWARASAN SUKOHAROZF
CV ANXSRAH MARATA
JL. RAYA SOLO 4 BAKI NO. 24A ABRT OR
NPWP : 73  |  030.3-532060
Bon  |  701 13024083 Kasir POVRE
LERL AIR5L  |  1 16,090 16.0e
Disc  |  500
KP BRAMDING (5) 1 200 260
CNIONHRN (S) 1 200 200
Total Item! 16.009
Total Disc 589
Total Belanja 15, ,500
Tunai 15, 500
Kerbalian  |  D
PPN  |  DPP: 14. 324 PPM: 1.575
Tgl.  |  13- 02- 2026 16:30:18 V. 2025 11. 6

As you can see, the OCR got some information correct and others are quite broken. The LLM returned this output:

response data: {'receipt_id': 'ff78be41-a3d7-4f35-b9ca-e54ca7eb5b9a', 'merchant_name': {'value': 'ALFAMART'}, 'date': {'value': '2026-02-13'}, 'time': {'value': '16:30'}, 'items': [{'name': {'value': 'LERL AIR5L'}, 'qty': {'value': 1}, 'price': {'value': 16090}, 'total_price': {'value': 15590}, 'category': {'value': 'Food & Beverage'}, 'discount_type': {'value': 'nominal'}, 'discount_value': {'value': 500}, 'voucher_amount': {'value': 0}}, {'name': {'value': 'KP BRAMDING (5)'}, 'qty': {'value': 1}, 'price': {'value': 200}, 'total_price': {'value': 260}, 'category': {'value': 'Food & Beverage'}, 'discount_type': {'value': None}, 'discount_value': {'value': 0}, 'voucher_amount': {'value': 0}}, {'name': {'value': '(S)'}, 'qty': {'value': 1}, 'price': {'value': 200}, 'total_price': {'value': 200}, 'category': {'value': 'Food & Beverage'}, 'discount_type': {'value': None}, 'discount_value': {'value': 0}, 'voucher_amount': {'value': 0}}], 'total_amount': {'value': 16050}}

Interestingly:

The date and time were reconstructed correctly
But item names and pricing details are inconsistent

The body (line items) is where things degrade the most.

Key Insight

This pipeline highlights something important:

LLMs don’t “fix” bad data, but rather interpret it

If the OCR output is already corrupted/broken:

Missing tokens → missing fields
Wrong tokens → hallucinated or incorrect values

Conclusion

It is important to note that what we feed into LLMs, —prompting, preprocessing, or model input—data quality directly shapes the output.

Or, as the principle puts it:

Garbage In, Garbage Out

Documenting My Learning Journey on Software Engineer and AI Engineer

Nanda Kresnatara — Sat, 07 Mar 2026 10:06:20 +0000

I often find it difficult to stay consistent with learning every single day. I know what I want to achieve, but there is always this urge in my mind pushing me to avoid the tasks I should be doing. That resistance keeps growing, and honestly, it can get pretty frustrating.

Sometimes even writing down a simple task feels surprisingly difficult.

Because of that, I realized before fixing my productivity, I needed to fix the system behind it. My routine felt messy. There were no clear boundaries for what to do, when to do it, and how to approach it.

So instead of forcing myself to “be more disciplined”, I decided to design a system first.

The System

I tried to make this system as realistic as possible based on my current situation.

At the moment, I have a significant amount of free time since I submitted my resignation in December, and January was my last month working as a Full Stack Developer. Although, to be more precise, the role also involved some elements of AI Engineering, such as working with N8N, building RAG pipelines, and tuning LLM parameters i. e sampling settings, top-p, and top-k.

Despite that experience, I still feel that I’m missing some important fundamentals. Thus, I wanted to create a system that allows me to invest more time in strengthening the basics.

This is why the system includes things like Data Structures & Algorithms (DSA) and fundamental mini-projects. The goal is not just to study theory, but to build a strong foundation through continuous practice.

The Action

One thing I’ve always believed is that doing something is always better than overthinking. Documentation is part of that process.

Writing things down helps in two important ways. First, it preserves knowledge so I can revisit what I’ve learned later. Second, it acts as proof of progress that allows me to compare where I am today with where I was before, rather than comparing myself to others.

That’s why I plan to start writing on this platform about my projects and what I learn along the way in both Software Engineering and AI Engineering.

My goal is not just to document theory, but also to explain how those concepts are applied in real use cases.

For example, I’m currently building a shopping receipt OCR system, which is still in the Proof-of-Concept phase. I might share the entire journey of building it — from the early experiments to the improvements and challenges I encounter along the way.

The Expectation

Through this documentation process, I hope to build a habit of learning more consistently while preserving the knowledge I gain during my exploration and development journey.

At the same time, I also hope this work adds more value to my professional profile. My goal is to strengthen my portfolio and improve my CV so that I can pursue roles such as:

AI Engineer
Full Stack AI Engineer
Software Engineer

Another thing I’ve realized is that personal branding is something I haven’t really explored yet. Sharing my learning journey publicly might help increase my chances of being discovered and create opportunities I might not find otherwise.

Closing

This is still an experiment. I don’t know yet how effective it will be in the long run, but it feels like I'm heading towards the right direction.

For now, the goal is simple: keep learning, keep building, and keep documenting the journey.