TUTORIAL
Feeling a bit rusty when it comes to programming
I’ve recently decided to re-familiarize myself with programming web applications with the goal of staying hands-on and relevant – especially in the challenging tech-job landscape.
I’ve often taught myself various programming concepts by creating relatively basic web applications using APIs, databases, libraries, and bringing them together into an app.
I’ve found that creating applications in this manner, as opposed to strictly practicing tedious HackerRank problems, not only teaches me about the latest concepts in the tech ecosystem, but also builds a fresh portfolio of projects (that you can discuss at interviews!).
Today, things are a little different
AI is rapidly changing how software development is performed.
While some influencers and media sources claim that programming jobs are going extinct, I believe the opposite is true.
I am convinced that while AI will absolutely improve the speed and efficiency at which we can create applications, it will still be used by human developers as an incredibly powerful tool.
I believe it is important to understand how to use AI within your programming projects. This is exactly what I set out to do in building a simple tutorial web app.
A monster creator database
My goal was to create a simple web application that would show a table of monsters, including their name, description, health, attack, and defense points.
Each monster could be edited inline within the web page by clicking on the name of the monster and changing the associated data. A save and delete button would either update the monster or remove it from the database.
The data would be stored in a local Sqlite database, making it easy and self-contained to share. This also removed the need for signing up to a 3rd-party service for hosting a database.
Something more magical is needed
So far, all of this might sound mundane (yet, quite valuable to prospective employers). Still, I needed something more modern to jazz up the tutorial experience.
This is where AI comes in!
In years past, I would usually randomly generate each data point to be stored in the database. This seeds the initial population of data that gets displayed.
Random rand = new Random();
for (int i = 0; i < 10; i++)
{
// Generate a random number between 0 and 100.
int number = rand.Next(0, 100);
}However, we’re in an AI revolution!
We can say "goodbye" to random number generators and use large language models (Llm) instead!
Goodbye random numbers. Hello, AI
Rather than train an LLM from scratch or even import an entire model into my app, I wanted to call a web service API, such as ChatGPT.
Using an LLM web API service is more realistic, especially in the business world. Most businesses do not train their own models, but still want to take advantage of AI technology.
This is what makes AI web services so popular.
I decided to integrate Cohere into my web application and use its text generation service, which is very similar to ChatGPT, to generate creative monsters for the database.
Prompt engineering for creating monsters
The first step towards integrating the LLM was to come up with a prompt.
A prompt is just a string of text, such as a question, statement, or task as you would ask ChatGPT.
"Generate a unique creative monster name and description for a scary monster in a dungeon game. The description should be no longer than one sentence. The name should be three or less words and be creative and unique. Output the result in the format: Name, Description. The Name and Description must be separated by a comma.
The type of monster should be {monster.Name}.
{customPrompt}
The name of the monster can not include any of the following names."
I asked the LLM to generate a creative monster name and description.
The prompt specifies the length of the description to be limited to one sentence, which is easier to store in the database and manipulate in the UI.
I’ve also asked for a very specific output of Name, Description, separated by a comma. In this way, the program can parse the output from the LLM to store into the Monster object in my application and database table.
What type of monster should we create?
While the LLM will create the monster on its own, one piece that my application specifies is the "type" of monster.
MonsterTypes = new() { "Dragon", "Goblin", "Troll", "Ogre", "Demon" }In this way, we’re giving the LLM some type of starting place to generate a monster from. There is a placeholder in the prompt for inserting the type of monster.
I also include a list of monster names that have already been generated so that the LLM avoids creating monsters that we’ve already seen. These are appended to the end of the prompt.
The most fascinating feature
The prompt that I had come up with was quite powerful enough.
However, I thought how interesting it would be if the user of my application could alter the type of monsters themselves. To do this, I could simply include a placeholder for a "custom" part of the prompt.
This is where one of the most fascinating features of the app was designed.
Endless possibilities for random data
The custom prompt is text that the user of the web application can add on to the prompt in order to customize the type of monster created even more.
For example, we’re already specifying a monster type. However, the end-user can get really creative. They can include details such as how the monster should be as tall as the clouds, covered in rainbows, and whistle fancy music!
Ogre with purple bandaids and a temper that leaves crushed bones and broken dreams in its wake.
After crafting a detailed prompt for the LLM, the magic begins to happen. Let’s tie this all together.
Seeding the database
The first step was to populate the database with the initial list of monsters.
Each monster would be created by the LLM. To do this, I first configured a dependency injection service to call the Cohere AI service and generate a monster.
new DatabaseInitializer(app.Services.GetRequiredService<LLM>(),
app.Services.GetRequiredService<MonsterFactory>()).InitializeDatabase();The above code initializes a MonsterFactory class along with our LLM, powered by Cohere. The program then initializes the database.
Creating an initial batch of monsters
Seeding the database with the starting list of monsters involves using a database context in the .NET Entity Framework and saving each monster that we generate.
using var context = new DatabaseContext();
List<string> existingNames = [];
// Generate monsters.
var monsters = new List<Monster>();
for (int i=0; i<10; i++)
{
var monster = monsterFactory.Create(existingNames);
monsters.Add(monster);
// Prevent duplicate names.
existingNames.Add(monster.Name);
}
// Add the monsters to the database.
context.Monsters.AddRange(monsters);
context.SaveChanges();Bringing the data to life
The real magic happens when the LLM is called with our magical prompt to generate each creatively crafted monster.
// Call the LLM.
output = Llm.GetTextAsync(prompt, ignoreNames).GetAwaiter().GetResult();
// Parse the output for "name, description".
if (output is not null)
{
var parts = output.Split(",", 2);
monster.Name = parts[0];
monster.Description = parts[1];
Console.WriteLine($"Created {monster.Name}, {monster.Description}");
}We set the monster’s name and description properties, as parsed from the output of the LLM. The resulting data is then saved in the database.
Letting the user create monsters on-demand
To make the program more interactive for users, as well as to give something more interesting to discuss about the app, I included an Add button in the user interface.
The add button allows a user to generate a new monster on-demand, which is also saved into the database.
Of course, this is where we include the custom prompt.
[HttpPost()]
public IActionResult CreateMonster(CreateModel model)
{
// Load the exiting names of monsters.
var names = MonsterManager.Names();
// Generate a new monster with a user-specified prompt.
var monster = monsterFactory.Create(names, model.Prompt);
// Save the monster.
MonsterManager.Update(monster);
return new JsonResult(monster);
}Adding support for creating a new monster by the user is performed by the MonsterController. This is a web service method that is callable from the UI.
After generating a new monster, we save it to the database just as we did when seeding the initial data.
What did I learn?
I’ve been Programming for many years.
I very much enjoy creating tutorial applications that demonstrate various software concepts or integrate with services in novel ways. This serves the dual purpose of teaching me more about the latest software concepts, as well as boosting my portfolio.
Using AI in my tutorial application has taught me the fun and power that can be leveraged for such a simple idea as generating random data for a database.
Shifting from random data to AI
Instead of using random numbers or a list of if-then conditionals for creating data, I found the power of LLMs allowed me to paint a much more creative picture to bring the application to life.
Even more importantly, using an LLM web API service taught me how easy it is to call a powerful AI service and integrate into my program.
Expanding a portfolio for job interviews
As a bonus to learning about new Technology, this experience can also serve as an amazing conversation starter in a tech-job interview or even a full-fledged architecture discussion.
There is no easier type of interview than discussing a project that you truly enjoyed creating. I found that integrating advanced technologies such as AI and LLMs in a tutorial program to be a wonderful learning opportunity.
Bringing your applications to life
Of course, the most important thing that I learned was how much fun it is to work with AI.
Integrating AI into my application, even one so simple as a basic tutorial, is like moving from painting a picture using grayscale to one of pure amazing color!
The experience showed me how fun it is to use AI. It also showed that it doesn’t have to be a complicated task and that anyone can do this! So, go ahead and paint your pictures.
I highly recommend giving it a try!
You can download the complete source code for this story here.
About the Author
If you’ve enjoyed this article, please consider following me on Medium, Twitter, and my website to be notified of my future posts and research work.
