Skip to content

Latest commit

 

History

74 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Free-Netlify-GPT-Chatbot

HTML CSS JS Node.js Netlify KaTeX Mammoth unPDF Freemodel.dev

1. Introduction

Nowadays, many providers offer discounted API access, trial credits, free starting balance, or referral rewards. For example, Freemodel.dev offers access to valuable models such as GPT-5.5 after registration, account verification, and inviting friends. However, many beginner users receive an API key but then face technical questions such as:

  • Where should I put the API key?
  • How do I connect the API to a chatbot?
  • Do I need to install software?
  • Do I need Python, Docker, or command-line tools?
  • How can I use the chatbot from my phone?
  • How can I share with my friends?

This project addresses all these questions by giving users a simple chatbot interface hosted on the Netlify free plan. Netlify’s free plan currently advertises no credit card required, 100 GB bandwidth, 300 build minutes, and 125,000 function invocations per month. Users do not need to install heavy software on their laptops, and the chatbot is available via the personal Netlify site URL after deploying this project. Users can access their own chatbot directly even in a mobile browser or share it with their friends. This web app is configured to use the API keys generated by Freemodel.dev to provide a personal GPT-5.5 chatbot.


2. Why is the project useful?

  • Helps users easily access free or discounted API keys and build their own private chatbot.
  • No worries about account limitations by enabling trial credits, referral rewards, or even encouragement plans with small payments.
  • Works with Netlify’s free hosting plan.
  • Supports easy deployment by GitHub fork or drag-and-drop.
  • Does not require heavy local AI software.
  • Works from laptop, tablet, and mobile browsers.

3. What are the key features?

  • File upload support: supports PDF, DOCX, TXT, Markdown, CSV, JSON, HTML, CSS, JavaScript, TypeScript, Python, and other common text/code files.
  • No permanent file storage on Netlify: uploaded files are processed during the request and not permanently saved by this app.
  • Code display box with copy button: generated code responses are shown in a dedicated code box for better readability.
  • Math formula rendering: mathematical formulas can be rendered with LaTeX-style formatting.
  • No database required: no MongoDB, Supabase, Firebase, or external database setup is needed.
  • Responsive design: the layout adapts to different screen sizes, including a mobile-friendly chat history drawer.
  • Chat history: conversations are saved locally in the browser using localStorage.
  • Password-protected access: login is handled through Netlify Functions and secure HttpOnly cookies.

4. Project structure

.
├── index.html               # Main frontend page
├── netlify.toml             # Netlify configuration file
├── package.json             # Project dependencies and scripts
└── netlify/
  └── functions/             # Serverless backend functions
    ├── auth.mjs             # Handles login authentication
    ├── check-auth.mjs       # Verifies user session
    ├── chat.mjs             # Processes chatbot requests
    └── logout.mjs           # Handles user logout

5. Chatbot response flow

+------------------------------+
|        User opens URL        |
|   https://xxx.netlify.app    |
+------------------------------+
               |
               v
+------------------------------+
|      Browser loads UI        |
|         index.html           |
+------------------------------+
               |
               v
+------------------------------+
|       Show login page        |
|     check-auth.mjs check     |
+------------------------------+
               |
               v
+------------------------------+
|     User enters password     |
+------------------------------+
               |
               v
+------------------------------+
|       auth.mjs verifies      |
|          password            |
+---------------+--------------+
                |
        +-------+-------+
        |               |
        No             Yes
        |               |
        v               v
+----------------+   +------------------------------+
|   Show login   |   |    Create secure cookie      |
|  error message |   |       HttpOnly cookie        |
+----------------+   +--------------+---------------+
									|
                                    v
                      +------------------------------+
                      |     Show chat interface      |
                      +--------------+---------------+
                                     |
                                     v
                      +------------------------------+
                      |       User writes prompt     |
                      +--------------+---------------+
                                     |
                                     v
                      +------------------------------+
                      | User uploads file (Optional) |
                      +--------------+---------------+
                                     |
                                     v
                      +------------------------------+
                      |        User clicks Send      |
                      +--------------+---------------+
                                     |
                                     v
                      +------------------------------+
                      |      Frontend validates      |
                      |       prompt and file        |
                      +---------------+--------------+
                                      |
                              +-------+-------+
                              |               |
                           Invalid          Valid
                              |               |
                              v               v
                      +----------------+   +------------------------------+
                      |  Show browser  |   |      Send to chat.mjs        |
                      |  error message |   +--------------+---------------+
                      +----------------+                  |
                                                          v
                                           +------------------------------+
                                           |   chat.mjs verifies cookie   |
                                           +---------------+--------------+
                                                           |
                                                   +-------+-------+
                                                   |               |
                                                Invalid          Valid
                                                   |               |
                                                   v               v
                                           +----------------+   +------------------------------+
                                           |  Ask user to   |   |       Process request        |
                                           |  log in again  |   +--------------+---------------+
                                           +----------------+                  |
                                                                               v
                                                                +------------------------------+
                                                                |       File uploaded?         |
                                                                +---------------+--------------+
                                                                                |
                                                                        +-------+-------+
                                                                        |               |
                                                                        No             Yes
                                                                        |               |
                                                                        v               v
                                                        +----------------------+   +----------------------+
                                                        |   Use prompt only    |   |  Extract file text   |
                                                        +----------+-----------+   +----------+-----------+
                                                                   |                          |
                                                                   |                          v
                                                                   |              +----------------------+
                                                                   |              |    PDF  -> unpdf     |
                                                                   |              |    DOCX -> mammoth   |
                                                                   |              |    TXT  -> decoder   |
                                                                   |              +----------+-----------+
                                                                   |                         |
                                                                   +------------+------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |      Build final prompt      |
     								                            |  (user message +  extracted  |
								                                |      file text, if any)      |
                                                                +---------------+--------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |    Send to Freemodel.dev     |
                                                                |      server-side API call    |
                                                                +---------------+--------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |   Freemodel returns answer   |
                                                                +---------------+--------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |   Browser displays answer    |
                                                                +---------------+--------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |   Save chat in localStorage  |
                                                                +---------------+--------------+
                                                                                |
                                                                                v
                                                                +------------------------------+
                                                                |     Continue conversation    |
                                                                +------------------------------+

6. How to Deploy?

To deploy the Free-Netlify-GPT-Chatbot to Netlify.com, you can select either option 1 or 2 according to the following step-by-step guidance.

Option 1: Fork from GitHub (Recommend)

  1. Fork this repository.
  2. Open Netlify.com and Log in.
  3. Click on "Add new project", scroll down the page and find "Import a Git repository", then click on "GitHub".
  4. Follow the GitHub authentication steps and connect your GitHub account to Netlify.
  5. Choose your forked repository, and wait a while to receive the repository from GitHub.
  6. Click on the received repository from GitHub, then scroll down the page, find "Build settings", and adjust the following settings:

Branch to Deploy: main
Base directory: Free-Netlify-GPT-Chatbot
Build command: npm install
Publish directory: Free-Netlify-GPT-Chatbot/
Functions directory: Free-Netlify-GPT-Chatbot/netlify/functions

  1. Scroll down the page, click on "Environment variables", then click on "Add a variable", then "Add key/value pairs".
  2. Enter variables according to Section 7. Section 8 (Option 1) presents a detailed visual guide on how to define environment variables.
  3. Finally, click on "Deploy Free-Netlify-GPT-Chatbot".

Option 2: Drag and drop on Netlify (Quick)

  1. Download the project ZIP file (Free-Netlify-GPT-Chatbot-main.zip).
  2. Log in to Netlify.com.
  3. Scroll down the page and find "Upload your project files".
  4. Drag and drop the project folder or ZIP file.
  5. Wait a while for the deployment to complete.
  6. Open the "Project configuration", then "Environment variables"
  7. Click on "Add a variable", then "Add a single variable".
  8. Define variables according to Section 7. Section 8 (Option 2) presents a detailed visual guide on how to define environment variables.
  9. Click on "Deploys", then click on "Trigger deploy", and finally click on "Deploy project".

Important

If you don't see "Trigger deploy", no worries; drag and drop the project folder once again. Netlify will redeploy the project, and environment variables will be implemented.

7. Environment variables

FREEMODEL_API_KEY=your-freemodel-api-key
FREEMODEL_BASE_URL=https://api.freemodel.dev
FREEMODEL_MODEL=gpt-5.5
FREEMODEL_REASONING_EFFORT=low OR xhigh
CHATBOT_PASSWORD=your-login-password
AUTH_SECRET=your-long-random-auth-secret
Variable Description
FREEMODEL_API_KEY Your Freemodel API key
FREEMODEL_BASE_URL Freemodel API base URL
FREEMODEL_MODEL Model used by the chatbot
FREEMODEL_REASONING_EFFORT Reasoning mode, usually low for faster replies
CHATBOT_PASSWORD Password required to access the chatbot
AUTH_SECRET Long random secret used to sign auth cookies

Note

The FREEMODEL_REASONING_EFFORT environment variable controls how much reasoning the model should use before answering. You can define low for faster responses and lower usage, or xhigh once you need deeper reasoning for more complex prompts.

Note

Use a strong random value for AUTH_SECRET.

Example:

my-super-long-random-auth-secret-655442244647

Warning

Do not use the same value for CHATBOT_PASSWORD and AUTH_SECRET.

8. How to define environment variables on Netlify?

If you deploy the project according to Option 1: follow steps 1-4 shown in the screenshot below, then define environment variables based on the information provided in Section 7.

If you deploy the project according to Option 2: fill in the blanks in section 1 shown in the screenshot below, then set the proper values for each variable according to section 2.

9. Add a domain (optional)

If you wish to set your own domain (mydomain.com) instead of Netlify's default domain (xxx.netlify.app), follow steps 1-3, enter your domain, then follow Netlify's subsequent guide to set a CNAME on Cloudflare

10. Authentication

  • Password is stored in Netlify environment variables.
  • Password checking happens in a Netlify function.
  • Login session uses secure HTTP-only cookies.
  • Logout clears the login cookie.
  • Failed login attempts trigger CAPTCHA.
  • Too many failed attempts cause a temporary browser/session block for 10 minutes.

11. Limitations

  • No user accounts.
  • No server-side chat database.
  • No IP-based blocking option for users with too many failed login attempts.
  • No vector database or long-term document indexing.
  • No persistent file storage.
  • Upload size is limited to 5 MB.
  • No image generation possibility.

This demo provides a quick preview of the Chatbot’s main features and user interface.

Note

This version lacks any API key and CAN NOT return a response.

You can login using the following password:

123456789101112N

13. Third-Party AI provider disclaimer

  • Please avoid uploading sensitive or confidential files when using this chatbot. The developer cannot guarantee how third-party AI provider (Freemodel.dev) handles or stores your data.
  • The developer is not aware of how the third-party AI providers obtain access to OpenAI API keys and offer free, discounted, or low-cost services.

14. Declaration

Free-Netlify-GPT-Chatbot was first developed by Parsa Ghannadi. An improved version was later built using ChatGPT-5.5 for public use.

15. License

This project is released under the MIT license. You are free to use, modify, and distribute it. It was primarily intended for personal, educational, research, and hobby projects. © Parsa Ghannadi 2026.

About

A private GPT-5.5 chatbot hosted by Netlify with password login, file upload, local chat history, and no database required.

Topics

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages