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.
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.
<!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
- 1You sent a
POSTrequest to the chat API with your prompt. - 2The server forwarded it to a model and started streaming the reply back.
- 3You read the stream chunk by chunk and appended each chunk to the page, that's why you see words appearing in real time.
- 4Stop = no auth header. The bearer token is what lets the server know which account is sending the request.
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.
Want your work in the Learn library? Apply for a hardlocked byline.