Skapi

Posted on Sep 19

Build a Serverless FAQ Bot with Skapi + Vanilla JS (No Backend Needed!)

#javascript #tutorial #beginners #programming

I remember the first time I wanted to add a simple FAQ bot to a website. My plan was:

I’ll just throw the FAQs in a database, write a quick API… how hard can it be?

Spoiler: it turned into a mini backend project with hosting, endpoints, and authentication before I even wrote a single line of UI code.

So when I joined Skapi — a serverless backend for frontend developers, no coders, and anyone who wants to save their time on backend — the first thing that I did, I decided to see if I could build the entire FAQ bot with just frontend code.

And you totally can. In this tutorial, I’ll show you exactly how.

By the end, you’ll have a:

Serverless FAQ bot running entirely in the browser
Zero backend setup (Skapi handles the data for you)
Frontend-only guidance using plain HTML + JavaScript

Why Skapi Is Perfect for This

If you’ve ever spun up a backend just to store a few rows of data, you’ll appreciate this:

Serverless: No API endpoints or servers to maintain
Frontend-friendly: Works with plain HTML, React, Vue, anything
Data + Auth in one place: Store records, handle users, all from the browser

For this project, we’ll use it to:
1.Store FAQs in a Skapi table
2.Fetch them with getRecords()
3.Display answers based on user input

1. Setting Up Skapi

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Serverless FAQ Bot</title>
  <script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
  <script>
    // Replace with your real IDs from Skapi dashboard
    const skapi = new Skapi('your_service_id', 'your_owner_id');
  </script>
</head>
<body>
  <h1>Serverless FAQ Bot</h1>
  <input id="questionInput" placeholder="Ask me anything..." />
  <button onclick="getAnswer()">Ask</button>
  <div id="answerBox"></div>
  <div id="faqList"></div>
</body>
</html>

2. Adding FAQ Data (One-Time Setup)

Here’s the fun part: instead of writing SQL or spinning up an API, you just run this once to store FAQs:

<script>
async function uploadFAQs() {
  const faqs = [
    { question: "What is Skapi?", answer: "Skapi is a serverless backend for your frontend apps." },
    { question: "Is Skapi free?", answer: "Yes! It has a free tier perfect for small projects." },
    { question: "Do I need a backend?", answer: "Nope. Everything runs in the frontend." }
  ];

  for (let faq of faqs) {
    await skapi.postRecord(faq, { table: 'faqs' });
  }
  alert("FAQs uploaded successfully!");
}
uploadFAQs();
</script>

It’s like having a mini Firebase, but simpler.

3. Building the FAQ Bot Logic

Now let’s make the bot actually answer questions:

<script>
async function getAnswer() {
  let userQuestion = document.getElementById('questionInput').value.toLowerCase();

  // Fetch all FAQs from Skapi
  let res = await skapi.getRecords({ table: 'faqs' });

  // Naive matching: find the first question that appears in user input
  let bestMatch = res.list.find(faq => userQuestion.includes(faq.question.toLowerCase()));

  document.getElementById('answerBox').innerText = bestMatch
    ? bestMatch.answer
    : "Hmm… I don’t have an answer for that yet.";
}
</script>

Yes, it’s basic string matching, but it works surprisingly well for FAQs.

4. Showing All FAQs

I like showing all FAQs below the search bar so users can browse manually:

<script>
async function showFAQs() {
  let res = await skapi.getRecords({ table: 'faqs' });
  let container = document.getElementById('faqList');

  container.innerHTML = "<h3>All FAQs:</h3>" + 
    res.list.map(f => `<p><b>${f.question}</b><br>${f.answer}</p>`).join('');
}

showFAQs();
</script>

5. What I Learned Building This

Skapi is stupidly simple: Adding data feels easier than copy-pasting it.
Frontend-only apps are underrated: For small tools, backend code is often overkill.

Final Thoughts

We just built a serverless FAQ bot in under 100 lines of code — no backend, no database headaches.

Skapi turned out to be the perfect tool for this:

Simple CRUD from the frontend
Scales without extra work
Free tier to experiment with
Easy and fast deployment using Skapi’s File Upload

If you’re a frontend dev who wants to ship full-stack features without writing backend code, Skapi is worth a look.

DEV Community