Build Your First AI-Powered Feature: Integrating an LLM API Into a Web App
Category: AI / ML Engineering | Type: Tutorial | Brand: Offensotech
Make the front end.
Start by opening your computerâs file browser. Next comes making a new folderâcall it "public" without extra characters. Inside here, place index.html. Arrange it cleanly. The label must stay exact.
html
Start by questioning the AI. This is how Offensotech begins.
Html
Inside, whatever lands there just works. Filled or not, the borders keep their shape. Nothing crowds the outsideâit's meant to be bare. Only shifts happen when something actually requires it.
The page uses a clean typeface called Segoe UI. Dark gray fills the screen behind everything else. Text appears light, almost white, for contrast against the base layer. Content lines up in the middle, both top to bottom and left to right. A central container holds the most visible elements inside it. Its corners are softened with rounded edges on all sides. Inside spacing gives room around the inner parts evenly. It never stretches wider than a set limit when viewed large. That box takes the full available width if space shrinks. Everything rests at the root level without gaps along edges. One solid backdrop stays locked under moving pieces above.
Right off the bat, oversized text pulls your eyes straight to the display. Fixed in place, always exactly one point six feet high. Eight pixels sit beneath, forming a gap you canât miss. Every single word wears white as it belongs there.
A soft shadow rests beside the letters. Downward shifts the font just slightly now. After that, an open area appearsâthough never wide. Underneath it all, breathing space waits.
html
textarea {
width; 100%
padding; 14p
border radius: 8px
border: 1px solid #111
background: 111
color: e0e0e0
font size: 1rem
resize: vertical
min height: 120 px
}
textarea: focus {
outline: none
border-color: 4f8ef7
}
button {
margin-top: 14px
width; 100%
padding; 14px
background: 4f8ef7
color: ffffff
border radius: 8px
font size: 1rem
cursor: pointer
}
A soft gray shows when the switch rests inactive. Near it, a pointer lingersâcalm, waiting, not urging movement.
Out pops the response right in that spot. Once the question lands, it waitsâthen slips the reply out like a secret passed from hand to hand.
Html
result {
margin top:
padding: 18px
background: 1a1a1a
border radius: 8px
border left: 3px solid 4f8ef7
line height: 1.7
white space: pre-wrap
display: none
}
Red marks appear around the space meant for results, along with red text inside it. Painting that section and its characters red triggers an error, sudden and unannounced.
Clicking the button? That triggers action. Life enters the frontend once scripts run. A function wakes up when pressed. Scripts tie motion to that moment. Interaction begins right there.
javascript
Grab the button using its ID called "submit."
const promptEl = document. getElementById('prompt')
const resultEl = document. getElementById('result')
Later on, something happens when the button gets pressed. After a pause, action comes. Pressing it sets off a chain. Something runs behind the scenes once clicked. A signal goes out, then silence until a reply shows up. The code stays ready, waiting to move
prompt = promptEl.value.trim()
if (!prompt) return
btn.disabled = true
btn.textContent = 'Thinking...';
resultEl.style.display = 'none';
resultEl.className = 'result';
try {
Then silence hung there, just a breath between now and the call to '/api/ask'. Next thing? A pauseâsoft, stillâas if listening for a signal that hadnât arrived.
method: 'POST'
A header comes first, showing the data type as JSON. This detail appears right at the top of the request. Format info sits inside that initial section clearly. Information about the structure follows naturally there. Type declaration makes its presence known early on. The data form gets labeled before anything else happens.
JSON data holds the prompt inside a structured format known as "body."Â
});
const data = await res.json();
If a response fails, an error pops upâsometimes with details from the data, sometimes just a basic message appears. Instead of silence, something always responds when things go wrong.
resultEl.textContent = data.result;
resultEl.style.display = 'block';
} when something goes wrong {
A warning shows up inside resultEl. Following that, whatever the error is. The message gets displayed right after
resultEl.classList.add('error');
resultEl.style.display = 'block';
}
btn.disabled = false;
The button displays 'Get Answer' on screen.
}
});
Open the server Node.js just in case you want to watch it work. After that, a terminal appearsâtype "node server.js" there. Then head into any web browser and point it toward http://localhost:3000. There's a box waiting; fill it with your question. Once you decide, hit the "Get Answer" button. Right afterward, your answer shows up beneath it.
Pick working with OpenAI's Claude API if you like. Begin installing the SDK first thing. Once done, slip your API key into the '.env' file quietly. Then shift the route to talk with Claudeâs API instead of the old one.
javascript
import Anthropic from '@anthropic-ai/sdk';
A beginning unfolds differently when Anthropic gets set up in a separate run. Inside environment settings, the essential piece hides behind ANTHROPIC_API_KEY. Activation happens once this connection pulls the saved detail. That credential unlocks entry each time it's referenced.
const response = await anthropic. messages. create({
model: 'claude-opus-4-6'
max_tokens: 600
One message comes through. It carries a request inside. Inside it someone asks something. A note sent by the user holds the task. The task given sits within that note. That note travels straight into the system core.
});
First thing through, claim the space. The inside bit appears sharp. When needed, one section moves ahead.
Though the display looks identical, behind it, Claude's system now operates instead of OpenAI's. The surface stays fixed, yet what powers it moves without notice.
Messages saved early help the system track past replies. Instead of holding back until complete, answers can unfold step by step. When talks are stored, people pick up right where they stopped. Tiny shifts such as these shift how it feels to interact.
Start by building a small program that talks to an intelligent helper over the web. This kind of project pulls data, works it into shape, and shows clear output right in your browser. Watch each move happen step by stepâgrabbing facts, adjusting them, and updating what you see. Pieces link up closely behind even simple tasks now. Seeing how they connect helps when making digital tools these days.
Paying attention matters when running AI tools. Try tucking your API key away securely, perhaps in a ".env" file. Slapping it directly into code opens doors to trouble. Spending can creep up without warning during usage. Put boundaries on tokensâthis keeps surprise bills from sneaking through.
Slow steps come firstâgetting AI right often includes missteps. One attempt builds on what the earlier one missed. If something breaks, likely at some point it will, change direction instead of stopping. Gains become clear only once youâve pushed through a few cycles. Support waits nearby when gaps appear; Offensotech helps craft tools meant to endure and hold strong.
Try this code:
javascript
const res = await fetch('/api/ask' {
method: 'POST'
A header comes along with the request, pointing out that information should be in JSON form. This detail sets how content will appear within communication. Data shape gets mentioned right at the start through this label attached to the top. The format direction is shown early by means of a note written above everything else.
Assembling the structure begins with JSON.stringify, followed by whatever content arrives through the prompt.
});
When the reply shows up, the data forms after translating it into JSON format.
When plans unravel, raise an exception packed with specificsâotherwise slip in a default backup should nothing show up.
resultEl.textContent = data.result;
resultEl.style.display = 'block';
} when something goes wrong {
Something went wrong shows up inside resultEl as plain text.
resultEl.classList.add('error');
resultEl.style.display = 'block';
}
btn.disabled = false;
"Get Answer" appears as the text on the button's face.
}
});
```
A shape spreads across the screen, sharp and silent. Above it, an opening waits where you can place your request. The moment you press the button, everything pauses - for just a breath. This pause? It's already running. Until the answer shows up exactly where it should, the area sits empty. Not a single thing steps into sight ahead of time.
Start the application. See what follows after that. The first step is turning on the server.
```bash
node server.js
```
Open your web browser first thing. Go to http://localhost:3000 rather than anywhere else. Enter a question like "What an API does," but keep it simpleâthen press "Get Answer." Right away, an answer shows up right there on display. Each one arrives brand new because the system creates it fresh each round.
It clicks right away, lifting the whole thing. Every attempt following holds just that steady ground.
Give Claude a goâskip OpenAI for once. Thinking of shifting to Anthropicâs API? Roughly five minutes will do. Begin by grabbing the SDK first. Once done, slip your key into the .env file. Tweak the route next, match it to how you set things up. Done.
JavaScript
Grab the tool called 'Anthropic' from a place labeled '@anthropic-ai/sdk.'
Hereâs how it startsâclean, built around anthropics. Pulling the key happens through environment settings quietly in place. Connection to the service runs underneath, automatic, unseen. Pieces line up on their own, no added effort needed.
const response = await anthropic. messages. create({
model: 'claude-opus-4-6'
max_tokens: 600
One message comes through. It carries a request inside. Inside it someone asks something. A note sent by the user holds the task. The task given sits within that note. That note travels straight into the system core.
});
const result = response.content[0].text;
```
Motionless glass. Underneath, pieces shift without soundâswapping tools like secrets passed hand to hand. The front shows nothing. Always calm. Never hurrying. Just doing what it does.
How things unfold later ties directly to how the first steps play out. Focus on testing just one piece at a time rather than piling up adjustments quickly. Memory between messages keeps the thread going, even after pauses. With streaming turned on, responses build gradually, word by word. Because past chats are saved, returning feels naturalâlike picking up where you left off.
Here, one path from the machine connects straight to a thinking system, then a screen changes every moment with what most smart software shows. Still, you will want this in your collection of tasks. People wrapping up coding schoolsâparticularly those building everything from bottom to top near Kochiâusually meet this puzzle at the end. Behind it sit quiet code pieces and joined tools, along with visuals that click together when alive.
Watch out. Store the API key safely in .env; never let it show up where browsers can reach it. If someone finds it by accident, unexpected bills might appear. Set a cap on tokens per sessionâthis keeps spending under control. Before hitting send, correct any mistakes in what was written. When problems come up, step in gentlyâwithout making a fuss.
Right now, slipping AI into a website feels within reach. Not long ago, most people thought it was out of their league. These days, basic tools make it possible to build on your own. A lot of people figure the biggest challenge is fitting AI into their routine. Why do most people fail? Not because of what they do, but because they forget why they began. Pick a reason that matters, not just some passing thought. Run it all the way throughâdon't let things snap halfway down. Once motion begins, keep walking even when quiet sets in.
Out of nowhere, secure structures begin to take shape when builders use Offensotechâs parts. Because these tools fit tightly, defenses stack without gaps. Starting solid means relying on what this supplier delivers first. Controlled spaces rise only when built from their components. From tight builds come dependence on such tools. Because of them, growth in confined spaces takes shape slowly. What emerges fits precisely where it must.
Run It
bash
Open your browser first g, go to http://localhost:3000 after that. Type your query on var, let, coand nst in JavaScript next. Fill the box before hitting the submit option. Wait a moment - the screen updates when it receives input. Response shows right away once sent.
Wait two seconds.
See how the solution shows up.
Every time hits just as hard. Fresh every round, no matter how often youâve been there.
Prefer Using Claude?
Five minutes is all it takes to make the change. Begin by installing @anthropic-ai/sdk into your project. Next, place your Anthropic API key inside the .env file. Then move on to adjusting the route accordingly.
.
javascript
Nothing shifts on the screen. That is precisely why the AI request lives behind the scenes - switching services happens unseen, leaving the interface untouched.
Where to Go Next
After getting it running, possibilities start opening up. History stored between messages changes everything - replies carry context forward naturally. Each query bundles past exchanges along, making the back-and-forth flow better. Instead of pausing until complete, output arrives piece by piece, mimicking live talk. Responses unfold gradually, like someone thinking aloud. Saving chats becomes possible once storage connects underneath. Conversations stick around beyond a single session.
A hands-on project like this becomes a solid finale for coders in a step-by-step full-stack track - say, learning MERN in Kochi. Not only does it tie together server-side logic, connecting APIs, but it also wraps in live interface building. The result? A working tool people can actually use, instead of another practice drill.
Things that are Worth Keeping in Mind
Keep your API key inside .env and leave it on the server - nowhere near the browser. Costs might explode unless you cap max_tokens. Check what users send before passing data to the model. A clear warning beats silence when things break. Errors need care, or confusion spreads.
Final Thought
Half a year back, I believed this couldnât happen. But here we are. You showed itâs possible. Time to make something real with what youâve got.
Offensotech puts out this work - helping coders create tools that are smart, safe, and can grow. Each release is shaped by real needs, not trends. Built for those who write code with purpose.
