Back to Blogs

Aura: The Little AI Sales Rep That Never Calls in Sick

We built an AI chat widget that has the awkward first conversation for us — qualifies the lead, learns the problem, writes the brief, and pre-fills the contact form before anyone on the team picks up the enquiry. Here's exactly how it works.

Abstract AI neural network visualization representing conversational AI and intelligent chat

The Prospect Who Vanished

Every consultancy knows this feeling. A potential client lands on your website, spends four minutes reading your services page, scrolls the case studies, and then — nothing. No form. No email. Just a ghost.

Filling in a contact form feels like commitment. It's a cold interaction with a company you've only just met. Most people won't do it unless they're already decided, which means you're losing warm leads at the very top of the funnel — the people who are genuinely curious but not yet ready to raise their hand.

We decided to fix this. Not by adding yet another "Book a call!" button, but by putting something genuinely helpful between "I'm browsing" and "I'm ready to talk."

Meet Aura

Aura is a floating AI chat widget that lives on every page of the KloudSync website. She introduces herself, explains her purpose, and asks exactly three questions:

1

What industry is your business in?

Sets the context. Is this logistics? Healthcare? Professional services? The answer shapes how the team reads everything that follows.

2

What's your main business challenge right now?

The most important question. Open-ended, no dropdown menus, no category boxes. Just the prospect's words, in their own language.

3

What would a good outcome look like for you?

Defines success on their terms. The answer tells the team whether this is a quick engagement or a long-term transformation play.

Three questions. That's it. No 12-field forms, no "select your company size from a dropdown of seventeen identical options." Just a conversation — and it feels like one.

A
Aura
● Online — KloudSync Assistant
Hi! I'm Aura, KloudSync's assistant. I help you describe your business challenge so our team can prepare before we speak. What industry is your business in?
We're in logistics and freight forwarding.
Good to know. What's your main business challenge right now?
Our systems don't talk to each other. A lot of manual data entry between our WMS and invoicing platform.
Understood. What would a good outcome look like for you?
Automated data flows — ideally without rebuilding everything from scratch.
You're a logistics business dealing with disconnected systems and manual data entry between your WMS and invoicing platform. You're looking for automated integration that doesn't require a full rebuild. Does that sound right?
3 questions to fully qualify a lead's context and problem
100% of enquiries arrive pre-contextualised — no cold starts
0 sick days taken since launch. She's very committed.

The Warm Handoff

Once Aura has all three answers, she writes a plain-English summary and asks the prospect to confirm it. When they do, two things happen simultaneously:

  • The conversation summary is saved to the browser's session storage
  • The user is navigated to the Contact page, where the message field is automatically pre-filled with Aura's summary

The prospect doesn't have to re-explain anything. They just hit send.

The difference this makes

Without Aura: "Hi, I saw your website — can we talk?"
With Aura: "Hi, I'm a logistics company dealing with disconnected WMS and invoicing systems, looking for an integration solution that doesn't require a full rebuild."

That's the difference between a cold enquiry and a warm brief. The team can prepare a relevant response — or even a draft proposal — before picking up the phone.

Business professional working at a desk reviewing client information on screen

Under the Hood: The Chat Widget

The widget is built with pure vanilla JavaScript — no framework, no npm package, no build step. It loads on every page as an IIFE (Immediately Invoked Function Expression) global, which means it works whether you're viewing the site locally via file:// or in production on Vercel.

The entire panel — including the header, message bubbles, input field, and typing indicator — is built programmatically using createElement calls. No innerHTML, no templates. This keeps it clean, safe from injection, and easy to reason about.

Vanilla JS · ES5 IIFE Global createElement only sessionStorage handoff Zero dependencies Vercel Static

When the user types a message, the widget calls an AI Chat Adapter — a thin JavaScript wrapper that makes a fetch() call to the backend Azure Function. All endpoint configuration lives in the adapter only; the widget itself has no idea where the API lives.

Architecture Principle

The chat widget sits in the Application layer. The AI Chat Adapter sits in the Infrastructure layer. The widget calls the adapter — never the API directly. This means swapping the AI provider requires editing exactly one file.

Under the Hood: The Azure Function

Every message sent by Aura flows through a serverless C# Azure Function running on .NET 10 Isolated Worker. It's not just a passthrough — the function orchestrates a full validation and safety pipeline before anything reaches the AI.

1
CORS & Origin Check
Preflight handled. Only the KloudSync origin is allowed through.
2
Guardrail Service
Pure validation: rate limits, content checks, injection protection.
3
Claude AI Service
Calls Anthropic Claude Sonnet with Aura's persona and system prompt.
4
Warm Response
Structured JSON reply flows back to the widget in milliseconds.
C# · .NET 10 Azure Functions v4 Isolated Worker Anthropic Claude Sonnet Messages API HttpClientFactory App Insights

The function follows Clean Architecture + Vertical Slice principles. The Features layer (the HTTP trigger) orchestrates the pipeline. The Application layer (Guardrail Service) handles all pure validation logic with no external dependencies. The Infrastructure layer (Claude AI Service) wraps the Anthropic API behind an interface — making it fully mockable in tests.

The Guardrail Service — Safety First

Aura has a very clear job description, and she sticks to it. Every message is validated before it reaches the AI — not by the AI itself, but by a dedicated C# service with deterministic, testable rules.

You can't convince Aura she's a different AI. You can't flood her with thousands of requests. You can't inject scripts or sneak system-level instructions into a message. She's seen things.

Guardrail Check What It Protects Against Layer
Message count limit Context flooding — sending hundreds of messages to exhaust tokens Application
Content length limit Payload stuffing — embedding large data in a single message Application
Per-IP rate limiting Automated abuse and scripted request floods Application
HTML sanitisation Script injection via message content Application
Prompt injection protection Attempts to override system instructions or hijack the AI persona Application
Blocked content detection Off-topic requests, jailbreak patterns, and role-change attempts Application
Origin validation (CORS) Requests from unauthorised domains using the API directly Features
Important Design Decision

All guardrail logic lives in a pure C# service with zero external dependencies — no HTTP calls, no SDK references. This makes it fully unit-testable in isolation. If the guardrails break, the tests catch it before anything reaches production.

The Full Architecture

Here's the complete picture — from the static frontend on Vercel through to the serverless backend on Azure, including how the AI chat fits into the Clean Architecture layering of both repositories.

KloudSync full stack architecture diagram showing frontend layers, Azure Function backend, AI gateway, and SEO implementation
KloudSync full-stack architecture — frontend (Vercel) + serverless AI backend (Azure Functions) + SEO layer

Why Serverless for This?

A chat widget doesn't get hit constantly. It gets hit in short bursts — someone visits the site, has a conversation, then leaves. Between conversations, there's nothing. Paying for always-on compute to handle that pattern would be wasteful and expensive.

Azure Functions on a consumption plan scale to zero when idle and spin up in milliseconds when a message arrives. The economics are near-perfect for this use case — you pay for exactly the compute you use, and nothing more.

Modern cloud data centre infrastructure representing Azure serverless compute and scalability
Serverless = the right tool here

Burst traffic → instant scale-up. Zero traffic → zero cost. No VMs to manage, no containers to orchestrate, no infrastructure team needed. The Azure Function just runs — and Application Insights logs every invocation so we can see exactly what's happening.

The Result

Aura doesn't replace the human conversation. She makes it better. When a prospective client fills in the contact form after talking to Aura, our team already knows the industry, the problem, and what success looks like. The first call isn't a discovery call — it's a preparation call. That's a very different energy.

It also means leads that would have bounced — people curious enough to read the site but not quite ready to commit to a form — now have a low-friction way to start the conversation. A chat widget is a lot less intimidating than a blank text box labelled "Message."

We called her Aura because she has presence — even when nobody on the team is online. Not bad for a function that costs fractions of a cent per conversation. We azure you — someone will always follow up. ☁️

Talk to Aura

She's live right now — look for the chat icon in the bottom-right corner of this page. Go ahead, ask her what KloudSync does. Or tell her about your biggest cloud challenge. Either way, someone from the team will see it.

If you'd rather skip straight to the conversation, reach out directly. Aura won't take it personally.

Ready to Give Your Website a Voice?

Talk to the KloudSync Team