Free API से AI Website

Free API से AI Website बनाना (Step-by-Step) पूरा practical तरीके से सीखेंगे 🔥

(आप HTML, CSS, JS जानते हो — तो यह आपके लिए perfect project है)

🚀 Project Overview

👉 हम एक simple AI website बनाएंगे जिसमें user सवाल पूछेगा और AI जवाब देगा

📌 Use करेंगे:

  • Frontend → HTML + CSS + JavaScript

  • API → OpenAI (या free alternative भी बताऊंगा)

🧩 Step 1: Free API Key लो

🔹 Option 1: OpenAI

👉 https://platform.openai.com

  • Sign up करो

  • API Keys में जाओ

  • Key generate करो

⚠️ Note: Free trial limited होता है

🔹 Option 2: 100% Free Alternative

👉 Use करो:

  • Hugging Face

  • OpenRouter

👉 ये free models देते हैं

📁 Step 2: Basic Website Structure

<!DOCTYPE html>
<html>
<head>
  <title>My AI Chatbot</title>
</head>
<body>

<h2>AI Chatbot 🤖</h2>

<input type="text" id="userInput" placeholder="Ask something...">
<button onclick="sendMessage()">Send</button>

<p id="response"></p>

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

</body>
</html>

⚙️ Step 3: JavaScript (API Call Code)

🔥 OpenRouter Free API Example

👉 पहले यहां account बनाओ: https://openrouter.ai


https://openrouter.ai/workspaces/default/keys


फिर यह code use करो:

async function sendMessage() {
  const input = document.getElementById("userInput").value;

  const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": "Bearer YOUR_API_KEY",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "openai/gpt-3.5-turbo",
      messages: [{ role: "user", content: input }]
    })
  });

  const data = await res.json();

  document.getElementById("response").innerText =
    data.choices[0].message.content;
}

🎨 Step 4: Simple CSS (Optional)

body {
  font-family: Arial;
  text-align: center;
  margin-top: 50px;
}

input {
  padding: 10px;
  width: 250px;
}

button {
  padding: 10px;
}

🌐 Step 5: Free Hosting (Live Website)

👉 आप website live कर सकते हो:

  • Netlify

  • GitHub Pages

  • Vercel

👉 बस files upload करो → website live 🚀

⚠️ Important Security Tip (बहुत जरूरी)

❌ API key सीधे JS में मत डालो (hack हो सकती है)

✅ Best तरीका:

  • Backend use करो (Node.js)

  • या serverless function use करो

🔥 Bonus: Blogger में AI Tool बनाना

अगर आप Blogger use करते हो:

  • HTML widget में UI डालो

  • API JS से call करो

  • या proxy backend use करो

💡 Upgrade Ideas

👉 आप इसे बड़ा SaaS बना सकते हो:

  • Login system

  • Chat history

  • Multiple AI tools

  • Image generator

  • Voice AI

🎯 Final Result

👉 आपका खुद का AI tool ready होगा:

  • ChatGPT जैसा chatbot

  • Website पर live

  • Free API से powered


1000+ AI Tools Directory Website बनाना एक powerful project है 💰
इससे आप traffic + SEO + affiliate income कमा सकते हो (exactly जैसे बड़े sites करते हैं)

मैं आपको complete step-by-step + ready structure + working code idea देता हूँ 👇

🚀 1. AI Tools Directory Website क्या होती है?

👉 एक ऐसी website जिसमें हजारों AI tools की list होती है

📌 Example sites:

  • Futurepedia

  • There's An AI For That

👉 Users search करते हैं:

  • “AI image generator”

  • “AI video tools”

  • “AI writing tools”

🧩 2. Website Structure (Important)

🔹 Main Pages:

  • Home Page

  • Categories Page

  • Tool Detail Page

  • Blog (SEO traffic के लिए)

  • Submit Tool Page

📊 3. 1000+ AI Tools Database (Structure)

👉 JSON format (आप use कर सकते हो)

[
  {
    "name": "ChatGPT",
    "category": "Writing",
    "description": "AI chatbot for content writing",
    "link": "https://chat.openai.com",
    "pricing": "Free + Paid"
  },
  {
    "name": "Midjourney",
    "category": "Image",
    "description": "AI image generator",
    "link": "https://midjourney.com",
    "pricing": "Paid"
  }
]

💻 4. Frontend Code (Basic Working)

<!DOCTYPE html>
<html>
<head>
  <title>AI Tools Directory</title>
</head>
<body>

<h1>🔥 AI Tools Directory</h1>

<input type="text" id="search" placeholder="Search tools...">

<div id="tools"></div>

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

</body>
</html>

⚙️ 5. JavaScript (Search + Display)

let tools = [];

fetch("tools.json")
.then(res => res.json())
.then(data => {
  tools = data;
  displayTools(tools);
});

function displayTools(data) {
  const container = document.getElementById("tools");
  container.innerHTML = "";

  data.forEach(tool => {
    container.innerHTML += `
      <div>
        <h3>${tool.name}</h3>
        <p>${tool.description}</p>
        <a href="${tool.link}" target="_blank">Visit</a>
      </div>
    `;
  });
}

document.getElementById("search").addEventListener("input", function() {
  const value = this.value.toLowerCase();

  const filtered = tools.filter(tool =>
    tool.name.toLowerCase().includes(value)
  );

  displayTools(filtered);
});

🎨 6. Categories (Important for SEO)

👉 Categories बनाओ:

  • Writing AI

  • Image AI

  • Video AI

  • Coding AI

  • Marketing AI

🌐 7. Free Hosting

👉 Use:

  • Netlify

  • Vercel

💰 8. Monetization (Money Making)

👉 आप पैसे कमा सकते हो:

🔹 1. Affiliate Links

  • tool link में affiliate जोड़ो

🔹 2. Sponsored Listing

  • companies पैसे देंगी featured होने के लिए

🔹 3. Ads

  • Google AdSense

📈 9. SEO Strategy (Most Important)

👉 Target keywords:

  • “Best AI tools 2026”

  • “Free AI tools list”

  • “AI tools for students”

👉 Blog लिखो:

  • Top 10 AI tools

  • Free AI tools

  • AI tools for earning

🔥 10. Advanced Features (Pro Level)

👉 Add करो:

  • User login

  • Tool submit system

  • Ratings & reviews

  • AI recommendation system

  • Dark mode

⚡ 11. 1000 Tools कैसे लाओ?

👉 Sources:

  • GitHub datasets

  • AI directories scrape करो

  • Manual add (Excel → JSON convert)

🎯 Final Result

👉 आपकी website बनेगी:

  • SEO optimized

  • 1000+ tools

  • earning ready 💰



आपके लिए मैंने 1000 AI Tools Ready Database (CSV format) बना दिया है ✅

👉 यहां से डाउनलोड करें:
Download AI Tools Database

📊 इसमें क्या मिलेगा?

  • 1000 AI tools (ready data)

  • Columns:

    • Name

    • Category

    • Description

    • Link

    • Pricing

💡 इसे कैसे use करें?

🔹 Website में

  • इस CSV को JSON में convert करें

  • अपने frontend (HTML/JS) में load करें

🔹 Blogger में

  • CSV → JSON → script में paste

  • AI tools directory ready

🔹 Excel Editing

  • आप categories change कर सकते हो

  • real tool links add कर सकते हो

⚡ Pro Tip

👉 अभी यह demo database है
👉 आप इसे upgrade कर सकते हो:

  • Real AI tools add करके

  • Affiliate links डालकर

  • SEO keywords जोड़कर