DEV Community

Shashi Kiran
Shashi Kiran

Posted on

๐Ÿš€ Build Your First AI App for Free (Beginner Friendly Guide)

Getting started with AI doesnโ€™t have to be expensive or complicated.

In this guide, weโ€™ll build a simple AI-powered app using completely free tools.


๐Ÿง  What Youโ€™ll Build

A simple app that:

  • Takes user input
  • Sends it to an AI model
  • Returns a response

Basically your own mini ChatGPT.


๐Ÿ› ๏ธ Tech Stack (Free)

  • Ollama โ†’ Run AI locally (no API cost)
  • Python + FastAPI โ†’ Backend
  • HTML โ†’ Simple frontend

โš™๏ธ Step 1: Install Ollama

Download: https://ollama.com

Run:

ollama run llama3
Enter fullscreen mode Exit fullscreen mode

This starts your local AI model.


โš™๏ธ Step 2: Create Backend

Create a file:

main.py
Enter fullscreen mode Exit fullscreen mode

Add this:

from fastapi import FastAPI
import requests

app = FastAPI()

@app.get("/")
def home():
    return {"message": "AI App is running"}

@app.get("/ask")
def ask_ai(question: str):
    response = requests.post(
        "http://localhost:11434/api/generate",
        json={
            "model": "llama3",
            "prompt": question
        }
    )

    data = response.json()
    return {"answer": data["response"]}
Enter fullscreen mode Exit fullscreen mode

โ–ถ๏ธ Step 3: Run App

pip install fastapi uvicorn requests
uvicorn main:app --reload
Enter fullscreen mode Exit fullscreen mode

Open:
http://127.0.0.1:8000


๐Ÿงช Step 4: Test

Open in browser:

http://127.0.0.1:8000/ask?question=Explain Python simply
Enter fullscreen mode Exit fullscreen mode

๐ŸŽจ Step 5: Simple UI (Optional)

Create index.html:

<!DOCTYPE html>
<html>
<head>
  <title>AI App</title>
</head>
<body>
  <h2>Ask AI</h2>
  <input id="q" placeholder="Type question"/>
  <button onclick="ask()">Ask</button>

  <pre id="res"></pre>

  <script>
    async function ask() {
      const q = document.getElementById("q").value;
      const res = await fetch(`/ask?question=${q}`);
      const data = await res.json();
      document.getElementById("res").innerText = data.answer;
    }
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

๐Ÿ’ก What You Can Build Next

  • AI chatbot
  • Resume analyzer
  • Interview prep tool
  • Code assistant

โš ๏ธ Common Issues

  • Ollama not running
  • Wrong endpoint
  • Missing dependencies

๐Ÿง  Final Thought

You donโ€™t need expensive APIs to start with AI.

Start small โ†’ build โ†’ improve.


๐Ÿš€ Try This Today

What will you build with this? ๐Ÿ‘‡

Top comments (0)