KI-Chatbot mit Google API bauen: Anleitung mit Visual Studio Code und Python

1/ Install Visual Studio Code 2/ Install Python and get the path where python is installed C:\Users\XXXXX\Python\pythoncore-3.15-64\python.exe python --version python path

3/ go to aistudio.google.com and use 300$ free credit. Create API Key 4/ Check the doumentation for api-key usage according to the requirement. In my case I am using Python.

So, I refer the python code 5/ Create a workspace folder on your desktop and open using VS Code editor. Then open the terminal in the path using view --> Open terminal 6/ Create environment in the path for python using below command python -m venv myEnv 7/ Activate virtual environment cd.\myEnv\Scripts.\Activate.ps1 if security error occur then Set-ExecutionPolicy -Scope CurrentUser RemoteSigned once activated, it shows (yourenv) in greencolor 8/ From the command prompt go to the directory where Pythoncode is writted, same place install flask pip install Flask pip list --> will show if installed or not pip install google-generativeai 9/ Now in the workspace folder create one more folder called templates 10/ In the templates folder create Welcome.html

<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title> Venkatesh AI Chatbot </title> <!-- Bootstrap CSS --> <link href= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel= "stylesheet" > <style> body { background-color: #f4f6f9; }.chat-container { max-width: 900px; margin: 30px auto; }.chat-header { background: #8e95a0; color: white; padding: 15px; border-radius: 10px 10px 0 0; font-size: 24px; font-weight: bold; text-align: center; }.chat-window { height: 500px; overflow-y: auto; background: white; border: 1px solid #dee2e6; padding: 15px; }.message { margin-bottom: 12px; padding: 10px 15px; border-radius: 10px; max-width: 80%; word-wrap: break-word; clear: both; }.user-message { background-color: #d1e7dd; float: right; }.bot-message { background-color: #e9ecef; float: left; }.input-section { border: 1px solid #dee2e6; border-top: none; padding: 15px; background: white; border-radius: 0 0 10px 10px; } textarea { resize: none; }.typing { font-style: italic; color: gray; } </style> </head> <body> <div class= "container chat-container" > <!-- Header --> <div class= "chat-header" > Venkatesh AI Chatbot </div> <!-- Chat Window --> <div id= "chatWindow" class= "chat-window" > <div class= "message bot-message" > Hello! How can I help you today? </div> <div style= "clear:both;" ></div> </div> <!-- Input Area --> <div class= "input-section" > <div class= "row" > <div class= "col-md-10" > <textarea id= "userInput" class= "form-control" rows= "3" placeholder= "Type your message here..." ></textarea> </div> <div class= "col-md-2 d-grid" > <button id= "sendBtn" class= "btn btn-primary" > Send </button> </div> </div> </div> </div> <!-- JQuery --> <script src= "https://code.jquery.com/jquery-3.7.1.min.js" ></script> <!-- Bootstrap JS --> <script src= "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" ></script> <script> function appendMessage ( message, type ) { let cssClass = ( type === " user " )? " user-message ": " bot-message "; $ ( " #chatWindow " ). append ( ` <div class="message ${ cssClass } "> ${ message } </div> <div style="clear:both;"></div> ` ); scrollToBottom (); } function scrollToBottom () { $ ( " #chatWindow " ). scrollTop ( $ ( " #chatWindow " )[ 0 ]. scrollHeight ); } $ ( " #sendBtn " ). on ( " click ", function () { sendMessage (); }); $ ( " #userInput " ). on ( " keypress ", function ( e ) { if ( e. which === 13 &&! e. shiftKey ) { e. preventDefault (); sendMessage (); } }); function sendMessage () { let userText = $ ( " #userInput " ). val (). trim (); if ( userText === "" ) return; // Append User Message appendMessage ( userText, " user " ); // Clear input $ ( " #userInput " ). val ( "" ); // Show typing indicator let typingId = " typing_ " + Date. now (); $ ( " #chatWindow " ). append ( ` <div id=" ${ typingId } " class="message bot-message typing"> AI is typing... </div> <div style="clear:both;"></div> ` ); scrollToBottom (); // AJAX POST Call $. ajax ({ //url: "http://127.0.0.1:5000/chat", url: " /chat ", type: " POST ", contentType: " application/json ", data: JSON. stringify ({ message: userText }), success: function ( response ) { $ ( " # " + typingId ). remove (); appendMessage ( response. response || " No response received ", " bot " ); }, error: function ( xhr ) { $ ( " # " + typingId ). remove (); console. log ( xhr. responseText ); appendMessage ( " Error: " + xhr. responseText, " bot " ); } }); } </script> </body> </html> Enter fullscreen mode Exit fullscreen mode 11/ In the workspace folder create Welcome.py

from flask import Flask, render_template, request, jsonify import google.generativeai as genai import os # Replace with your actual Gemini API key GOOGLE_API_KEY = " your_APIKe " genai. configure ( api_key = GOOGLE_API_KEY ) #for m in genai.list_models(): # print(m.name) #model = genai.GenerativeModel("gemini-1.5-flash") model = genai. GenerativeModel ( " gemini-3.5-flash-lite " ) chat = model. start_chat ( history = []) app = Flask ( __name__ ) @app.route ( ' / ' ) def index (): return render_template ( ' Welcome.html ' ) @app.route ( ' /chat ', methods = [ ' POST ' ]) def chat_response (): user_input = request. json. get ( ' message ' ) if not user_input: return jsonify ({ " error ": " No message provided " }), 400 try: response_raw = chat. send_message ( user_input ) #print(response_raw) print ( " RAW: ", response_raw ) response = response_raw. text print ( " TEXT: ", response ) return jsonify ({ " response ": response }) except Exception as e: print ( f " Error: { e } " ) return jsonify ({ " error ": str ( e )}), 500 if __name__ == ' __main__ ': app. run ( debug = True ) Enter fullscreen mode Exit fullscreen mode 12/ Dubug the output and open the chatbot in Chrome and test