🛠 I Created a Simple Prompt Generator for ChatGPT! (Free Online Tool)

#webdev #chatgpt #ai #javascript

If you're someone who writes prompts manually every time you ask ChatGPT to solve an error… you're not alone.

To help with that, I built a tool that lets you generate ChatGPT prompts automatically in just 3 steps.
Feel free to give it a try!

👉 Click here to try the prompt generator

👉 In the case of HTML, this one might work.

🧰 What Is This Tool?

This is a web-based tool that automatically generates a ChatGPT-friendly prompt based on:

・🐞 Your error message
・📄 The relevant source code file (via file upload)

The generated prompt follows this structure:

Could you tell me the cause of the following error and how to fix it?

[Error Message]

The content of the related file is as follows: 'filename'

[File content with line numbers]

If there are any key points or important notes about the error, please include those as well.

✅ Key Features

・Automatic Line Numbers for Code
　When you include line numbers in your code, ChatGPT can understand context much more accurately.
　It helps ChatGPT clearly identify lines like "the error is on line 18" and provide better answers.

・One-Click Prompt Copy
　You can copy the entire generated prompt with a single click of the "Copy Prompt" button.

・File Upload Support
　Works with almost any text-based code file — including JavaScript, TypeScript, Python, HTML, CSS, and more.

🚀 How to Use (3 Easy Steps)

Paste Your Error Message (optional)
　It’s not required, but including it will improve the accuracy of ChatGPT’s response.
Select Your Source Code File
　Just upload the relevant file — the tool will automatically display it with line numbers.
Click “Copy Prompt” and Ask ChatGPT!
　Paste it into ChatGPT and you're ready to go.

🎯 Who Is This For?

・Developers who are tired of writing prompts from scratch every time
・People looking for reusable prompt templates
・Beginners who want to learn efficiently with the help of AI

💡 Technical Details (for Developers)

This tool is built using plain HTML + JavaScript (Vanilla JS) and utilizes:

The FileReader API to load files locally

Automatic insertion of line numbers for code

The navigator.clipboard.writeText() API for copying text

Clean and simple UI using only basic HTML/CSS (no frameworks)

It's hosted on GitHub Pages, so you can use it instantly — no setup required.

Note:
If you are concerned about potential data leakage, we recommend downloading the index2.html file from GitHub Pages and running it locally. Before doing so, you can copy and paste the source code into ChatGPT to check whether it contains any code that sends data externally.

Since this tool is publicly hosted on GitHub Pages, any attempt to include such data-extracting functionality would be easily detected by inspecting the source code, so we hope this offers some peace of mind.