🎨WebParasite Tutorial: Build Your First AI App with HTML + JavaScript (No Backend Needed!)

on

 


👋 Welcome, future AI dev!
Today we’re creating a simple web app that uses AI magic to generate text responses — kind of like a mini ChatGPT!

🧩 Step 1: Setup Your HTML File

Create a file named index.html and add this code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>My AI App</title>

  <style>

    body { font-family: Arial; padding: 20px; background: #f5f5f5; text-align: center; }

    #output { margin-top: 20px; background: #fff; padding: 15px; border-radius: 8px; }

    button { padding: 10px 15px; background: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; }

    input { padding: 10px; width: 70%; }

  </style>

</head>

<body>

  <h1>🤖 My AI Chat App</h1>

  <input id="userInput" placeholder="Ask me anything..." />

  <button onclick="getAIResponse()">Send</button>

  <div id="output"></div>


  <script src="app.js"></script>

</body>

</html>

⚙️ Step 2: Add Some AI Power with JavaScript

Now, create a file called app.js in the same folder.
You’ll use OpenAI’s free API (you’ll need an API key from platform.openai.com).

async function getAIResponse() {

  const input = document.getElementById("userInput").value;

  const output = document.getElementById("output");


  output.innerHTML = "Thinking... 🧠";


  const response = await fetch("https://api.openai.com/v1/chat/completions", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

      "Authorization": "Bearer YOUR_API_KEY_HERE"

    },

    body: JSON.stringify({

      model: "gpt-3.5-turbo",

      messages: [{ role: "user", content: input }]

    })

  });


  const data = await response.json();

  output.innerHTML = data.choices[0].message.content;

}

🪄 Replace YOUR_API_KEY_HERE with your real key.

💡 Step 3: Run It

  1. Open index.html in your browser.

  2. Type something like “Tell me a joke.”

  3. Watch your AI app reply — tada! 🎉

🧠 Bonus Idea: Make It Cooler

  • Add a dark mode toggle 🌙

  • Save chat history in localStorage 💾

  • Let users change AI personalities (fun mode, teacher mode, etc.) 🧑‍🏫

Comments

Post a Comment