DEV Community

Santiago Hernandez
Santiago Hernandez

Posted on

How to make a Django application using GitHub Copilot

We'll develop a simple password generator Django application using GitHub Copilot agent mode. At the end we'll analyze the tradeoffs of using LLMs to develop this application. To do this we'll use the GitHub Copilot plugin for PyCharm, you can do the same thing using VS Code if you want to. I'll be using GPT-4.1 in this tutorial.

This is the repository that I'll use to make this project, you can check it if you want to see the final version of this project: https://github.com/santiago177/PasswordGenerator

Requirements

This project will be built using Django and will use GitHub Copilot to generate most of the code, you'll need the following setup:

  • Install Python
  • Install Git
  • Install PyCharm free version
  • A GitHub account

Feel free to skip to the Create a README and AGENTS file section if you feel confident creating a Django project in a GitHub repository and have the GitHub Copilot plugin already.

Creating the project and repository

Open PyCharm and create a new Django project, then name the project PasswordGenerator.

It should look like this:

PyCharm project generation

Commit the boilerplate code and create a new repository for your project in GitHub by going to Git -> GitHub -> Share Project on GitHub.

Get the GitHub Copilot plugin

Go to Settings -> Plugins and type Copilot in the search bar, look for the GitHub Copilot plugin and install it, you'll need to restart PyCharm afterwards.

Plugins download view

Open the GitHub Copilot window on the right side and log in to it using your GitHub account by clicking on Continue with GitHub. You don't need to get a premium version of GitHub Copilot but you have a limited amount of requests, that limit will be more than enough to complete this project.

Copilot chat window

You should see a chat window like this if you're successfully logged in:

Logged in chat

Create a README and AGENTS file (Optional)

This is an optional step that helps the agent better understand your project by generating an AGENTS.md file.

Create a README.md file first. I'll use the following one:

# PasswordGenerator

This is a very simple project designed to generate random passwords.

## Description
The purpose of this project is to provide a basic tool for generating secure and random passwords. It is ideal for those who need to create passwords quickly and easily.

## Features
- Random password generation
- Simple and easy-to-understand code

## Build Mode
This project is intended to be built and managed using **agent mode**, which makes automation and task integration easier.

## Requirements
- Python 3.x

---

This project is ideal as an educational example or as a base for more advanced developments.
Enter fullscreen mode Exit fullscreen mode

Having a readme file has multiple benefits, but in this particular case we want to use it to provide context to the agent so it can generate an agents instructions file.

Open a new Copilot chat after creating the README.md file and click on a button named Create/Update agent instructions.

Create instructions button

This will initiate an agent task that will generate an AGENTS.md file, the purpose of this file is to provide a context to the agent related to your project so that it has a better idea of what it has to do. This is the AGENTS.md file that I got. You'll get a different one but it should be similar.

# AGENTS.md

## Project Overview
- **Purpose:** Simple Python tool for generating secure, random passwords. Designed for educational use or as a base for more advanced projects.
- **Current State:** Minimal starter code in `main.py` (prints a greeting). No password generation logic implemented yet.
- **Primary Language:** Python 3.x

## Key Files
- `main.py`: Entry point. All logic currently resides here. Intended to be expanded with password generation features.
- `README.md`: Project description, requirements, and intended usage.

## Developer Workflows
- **Run the project:**
  - Use `python main.py` to execute the script.
  - Can also run from IDE (e.g., PyCharm: green run button or Shift+F10).
- **No build or test scripts** are present. Add tests in future as needed.

## Patterns & Conventions
- Keep code simple and easy to understand—prioritize readability for educational purposes.
- Place all logic in `main.py` unless the project grows significantly.
- Use standard Python idioms; no custom frameworks or patterns are in use.
- No external dependencies required (as of now).

## Extending the Project
- Implement password generation logic in `main.py`.
- If adding features (e.g., CLI, GUI, tests), create new files/modules as needed and update this guide.
- Document any new conventions or workflows in this file for future agents.

## Integration Points
- None currently. No external APIs, services, or libraries are integrated.

## Example: Adding Password Generation
- Define a function (e.g., `generate_password(length: int) -> str`) in `main.py`.
- Use Python's `random` or `secrets` module for secure password generation.
- Print or return the generated password in the main execution block.

---

**Update this file as the project evolves to keep agent guidance current.**
Enter fullscreen mode Exit fullscreen mode

As you can see, all this file is doing is to provide a brief explanation of what the project does. Create a commit with these changes including the AGENTS.md and README.md files.

Create the Django project

First create a directory called .github/prompts to place our prompts. We'll place our prompts here because agent mode prompts can get lengthy when you need to provide a lot of context and constraints. You can get the same result by typing prompts in the chat.

Let's test GitHub Copilot agent mode by creating a prompt instructing the agent to create the setup for this project.

Prompt

Create a file named django-setup.prompt.md inside .github/prompts with the following prompt:

# Django setup instructions
- Install django packages
- Verify installation
- Create requirements.txt file
- Create a new Django project named *PasswordGenerator*
- Create a new Django app named *generator*
Enter fullscreen mode Exit fullscreen mode

After that, open a new chat in GitHub Copilot by clicking the + icon on the top right of the chat window, make sure agent mode is selected, then type and submit /django-setup

Prompt file chat prompt

You'll be prompted multiple times by the agent to run some commands like pip install django and django-admin startproject PasswordGenerator .
Review the commands and authorize the agent to run them if they make sense to you. At the end you should have a project structure that looks like this:

Project structure boilerplate

Let's commit all the changes with the new files created, including the requirements.txt and django-setup.prompt.md files to continue with the next step.

Creating a view

Let's create a view using agent mode to generate a random password with custom length, the only parameter that we'll use is the length of the password.

Prompt

Create a file named create-password-view.prompt.md inside .github/prompts with the following prompt:

# Instructions

- Create a view in the generator app that generates a random password. The only argument that it takes for now is the length of the password. This should be a GET method.
- Create a complete URL setup. The URL for this view should be `/generate-password/`.
- Verify that all url files are updated to include the new URL and make sure that it works.
Enter fullscreen mode Exit fullscreen mode

Run the prompt in a new chat by typing /create-password-view using agent mode and review the changes.

After running this command, the agent mode will have to add some boilerplate code to the urls.py files, but the most interesting part of it is the view that it creates. It should be similar to this:

from django.http import JsonResponse
from django.views.decorators.http import require_GET
import secrets
import string

@require_GET
def generate_password_view(request):
    try:
       length = int(request.GET.get('length', 12))
       if length < 1 or length > 128:
          return JsonResponse({'error': 'Password length must be between 1 and 128.'}, status=400)
    except (TypeError, ValueError):
       return JsonResponse({'error': 'Invalid length parameter.'}, status=400)

    alphabet = string.ascii_letters + string.digits + string.punctuation
    password = ''.join(secrets.choice(alphabet) for _ in range(length))
    return JsonResponse({'password': password})
Enter fullscreen mode Exit fullscreen mode

As developers we need to always review the code that AI generates. We can see that this view receives a length parameter and generates a random password by using the secrets library. We didn't ask the agent to implement length constraints checks or to handle exceptions, but we can leave those there as they are good to have.

The agent will sometimes take freedom to implement things you didn't ask for. This can be useful sometimes but you always have the option to write an additional prompt requesting to remove that code or remove it yourself if you want to.

Testing the view with agent mode

When I ran this prompt something nice that I wasn't expecting happened, the agent mode ran the project and proceeded to test the view using curl commands.

Agent tests

These tests were run in the console showing that the view is working properly. If your agent doesn't run these tests you can write an additional prompt requesting to run the tests or run the server yourself and run curl "http://127.0.0.1:8000/generate-password/?length=16"

Service curl test

Review the changes and commit them before moving to the next step.

Creating the UI

This is a good opportunity to update the AGENTS.md file as multiple files have been modified. To do this you can open a new chat and click Update Agent Instructions.

Create a file named create-ui.prompt.md inside .github/prompts with the following prompt:

# Create UI instructions

- Create a template that displays the password generator
- The UI should have an orange faded banner that says "Password Generator"
- Add bootstrap to the project and use it to style the UI, all the elements should use bootstrap
- Below that there should be a generate password button with a numeric textbox next to it specifying the length of the password. Both of these should look pretty big.
- Add the functionality to generate a password when the button is clicked, and display the generated password below the button. Using the generate password view.
- Display the generated password in a large font below the button, make all the elements centered.
Enter fullscreen mode Exit fullscreen mode

I used my own creativity and preferences to write this prompt, but you should modify it to describe how you want to stylize the UI.

Run the prompt in a new chat by typing /create-ui using agent mode and review the changes.

Error self-correction

After the agent finishes editing files it will attempt to test that the app works. If it fails it will try to self-correct. In this case the agent forgot to add the app to settings.py, but it corrected the error afterwards.

Error log

Agent mode fixing the error:

Self correction agent log

Testing the UI

At this point we have generated all the code that is needed to make the basic version of a password generator work. Let's now open the site http://localhost:8000/ in a browser. Make sure that your project is running.

This is the result that I got, which is pretty close to what I was hoping for. You'll get something different depending on the style that you described in the prompt.

UI in browser

Make sure that the password generation works when clicking the button, also check if errors like providing lengths that exceed the maximum are handled properly. Review the changes and commit them.

Congratulations, we've created a password generator using GitHub Copilot agent mode in just a few hours.

As you can see this UI is far from perfect, there are many improvements that can be done like making the text in the banner clearer, turn Password inside the button to lowercase or add a Length tooltip or text above the numeric textbox. That's fine for this case as this is enough to let us see that the project works. You can improve the UI from here by writing more prompts in GitHub Copilot or by modifying the code on your own.

Next steps

This is one of the simplest ways to implement a password generator. After this version there are many improvements and changes that can be done:

  • Add more options to the password generation like checkboxes to include or exclude numbers, capital letters, special characters etc
  • Improve the UI
  • Add a real frontend framework like React if you want to or replace Bootstrap with something like Tailwind
  • Refactor and reorganize UI Javascript code
  • Add unit tests
  • Refactor this project to use DRF
  • Try other AI models

I suggest you work on any of these tasks if you want to keep testing GitHub Copilot agent mode or develop this project further. Let me know in the comments if you'd be interested in seeing a continuation of this tutorial working on these tasks.

Final thoughts

  • Using an AGENTS.md and instructions files has multiple benefits but it will be more expensive to use them in the long term, as it requires the agent to use more tokens, you should evaluate the tradeoffs of using instructions files based on the cost of tokens and how much resources you have.
  • It took me around 3 hours to create this app while also writing this tutorial at the same time. You should be able to do this in less than an hour if your setup is ready.
  • I was pleasantly surprised to see that the agent was capable of testing the password generator service properly using curl and seeing it self-correct.
  • It was interesting to see that the agent sometimes takes the freedom to implement things you didn't ask for. These additions were good in this case but it could be problematic in other contexts, which is why we always need to review the code.
  • The project was intentionally designed to be very simple, with no databases and very little logic to give the agent a good chance of producing correct code in a short period of time. You'll probably start noticing mistakes if you add more complex logic or more complex context to the agent.
  • I personally didn't like how the agent organized the UI code. I wish the code was cleaner and more organized, separating Javascript code. These are changes that will require more prompt iterations or manual changes. You can check the code I got in my repository if you want to.
  • The results of developing this project using GPT-4.1 were pretty good. I'd like to make another article comparing different models like Claude and Gemini.
  • The review process of each change produced by the agent is not trivial and can be time consuming, you should evaluate the tradeoffs of using an AI agent or building it yourself.

Top comments (0)