sansxel
sansxel
The AI workshop for makers
ProductLearnPricingContact
sansxelsansxel

The adaptive AI platform. One AI, infinite shapes, a contextual interface that reshapes itself around how you actually work.

Product
ProductLearnPricingDownload
Account
DashboardDownloadUpdatesIntegrationsUsage
Company
PrivacyTermsContact
Community
Discord
© 2026 sansxel. All rights reserved.
All articles
Topics
AI11
Coding5
Databases1
APIs3
MCP1
Systems4
Build1
ProjectsFull appsAI apps
Skills2
Monetization3
Learn/Build/AI apps
beginner10 min read

Build your first AI app in 10 minutes

A real working chat app, end to end. JavaScript, no framework, ~50 lines. You'll get a feel for how requests, streaming, and prompts fit together.

BySansxel (OWNER)·Apr 25, 2026

You don't need a framework, a backend, or a degree to build a working AI app. You need an API key, an HTML file, and 10 minutes. By the end you'll have a chat box that streams real responses from a real model.

1. Get an API key

Sign up for sansxel and head to /account/keysto make one. Treat it like a password, don't commit it to git.

2. Make an HTML file

Save this as index.htmland open it in your browser. That's your whole app.

html
<!DOCTYPE html>
<html>
<body>
  <textarea id="prompt" rows="4" cols="60" placeholder="Ask anything…"></textarea>
  <button id="send">Send</button>
  <pre id="reply" style="white-space: pre-wrap;"></pre>

  <script>
    const KEY = "sk_your_api_key_here"; // your sansxel API key
    document.getElementById("send").onclick = async () => {
      const prompt = document.getElementById("prompt").value;
      const out = document.getElementById("reply");
      out.textContent = "";

      const res = await fetch("https://sansxel.ai/api/v1/chat", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": "Bearer " + KEY,
        },
        body: JSON.stringify({ prompt, stream: true }),
      });

      const reader = res.body.getReader();
      const decoder = new TextDecoder();
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        out.textContent += decoder.decode(value);
      }
    };
  </script>
</body>
</html>

3. What just happened

  1. 1You sent a POST request to the chat API with your prompt.
  2. 2The server forwarded it to a model and started streaming the reply back.
  3. 3You read the stream chunk by chunk and appended each chunk to the page, that's why you see words appearing in real time.
  4. 4Stop = no auth header. The bearer token is what lets the server know which account is sending the request.
Don't ship this as-is
The API key is exposed in the HTML, anyone who opens DevTools can steal it. For a real app, make a tiny backend (Cloudflare Worker, Vercel function, anything) that proxies the request and keeps the key server-side.

What to add next

  • A conversation history, keep an array of past messages and send the whole list each turn.
  • System prompt, set the AI's personality with a starting instruction.
  • File upload, accept an image or document and pass it as part of the request.
  • Stop button, abort the fetch with an AbortController so the user can cut a reply short.
See sansxel's API docs→
Write for sansxel

Want your work in the Learn library? Apply for a hardlocked byline.

Apply to write

Keep learning

beginner4 min
What is AI, really?

AI like ChatGPT works by predicting the next word, kind of like autocomplete, but way smarter. Here's the plain-English version of what's happening under the hood.

AI
beginner5 min
How voice AI works (talk → text → AI → speech)

When you talk to an AI, three different models are running in sequence. Here's what each one does and why latency matters more than you think.

AI
beginner6 min
Sansxel REST API, quickstart

Authenticate, send a chat request, stream a reply. Three steps. Copy-paste examples in JavaScript and Python.

APIs