SLIIT MasterClass: Prototype with AI

Getting Started with LibreChat

If you have access to another AI Chatbot (Claude, ChatGPT or Gemini), please use it.

LibreChat is an open-source chat interface that provides access to a variety of Large Language Models (LLMs). LibreChat offers functionality similar to other commercial conversational applications, allowing you to explore different models and prompting techniques in a flexible environment.

Step 1: Access LibreChat

  1. Go to: LibreChat.
  2. Register:
    • Use any email and password combination. Email is not validated.
  3. Log In:
    • Use the username and password you entered to login.

Step 2: Selecting an LLM Model

You are given access to a an Open AI (GPT 5.5).

  1. Once logged in, you can select the model from the dropdown.

Step 3: Start a Conversation

  1. Initiate a Conversation:
    • A simple way to start is by saying “Hi” to the model.
    • This will help you get a feel for the interface and model’s responsiveness.

Some Prompting Tips for Prototyping

  1. Be Detailed and Specific: The more specific contextual information you provide, the better the response. This includes specifying the technology that needs to be used (eg Python or Javascript).
  2. Include Your Domain Knowledge: Include your ideas and knowledge to customize and make the output relevant to your context.
  3. Give Feedback: Prompt the model to revise or improve its response if needed. Ask follow-up questions or request clarifications as needed.
  4. Don’t Be Afraid to Ask: Don’t assume something is not possible. Prompt and if it does not work provide examples. New models come out regularly with new capabilities.
  5. Create Reusable Prompts: Develop prompt templates you can use for similar tasks.
  6. Give examples: Include examples to help the model understand what you want to do? This is a useful technique if the model has not produced good output and you can’t directly describe what you want.

Prototype 1: Build a Wordle Style Game

Below is an example prompt for a Wordle Style game called Lingo. The main elements of the prompt are:

  • Specify the technologies (i.e. HTML and Javascript) to use.
  • Clearly explain how the game play works.
  • Specify that we want to preview the game. In LibreChat we ask for the Artifacts functionality. If you are using ChatGPT or Gemini this is called the Canvas. Anthropic Claude also calls it Artifacts.
Build a word game using only HTML and Javascript and display a preview of the game using the Artifacts feature. Use Bootstrap via CDN to make a professional looking app. 

Instructions for how the word game called Lingo works. 
- The heading Lingo should be displayed at the top of the screen.
- Generate a list of 5 four letter words. One word is randomly selected but not shown to the user. 
- 4 blank textboxes are displayed in a row with a Check button. In each textbox only 1 character can be entered. The user needs to Type in a letter in each textbox and for that row press the Check button.
- Each entered Character must be checked against the word. The colour of the character should change to green if in the correct spot in the word, orange if the letter is in the word but not in the correct spot and red if incorrect.
- If the full word is not correct, after the Check button is pressed, display another row of textboxes below to give the user another try. The user should be allowed 4 tries (i.e 4 rows of textboxes). 
- Include a New Word button, which restarts with a new random word for the list.

Remember to show/preview the interactive in your Artifacts tool/functionality.
Tip

While this prompt has been tested, the LLM can make errors. Testing is important to find the bugs/errors. You can provide follow up feedback to the LLM to try to fix the bugs.

Challenge

Write a follow up prompts to:

  • Add a user tip for each word
  • Change the colour scheme
  • Only have words for a specific topic or theme (eg sports or music)

Prototype 2: Build a Dynamic Maze Game

Below is an example prompt for a Maze Style game called AMazing. The main elements of the prompt are:

  • Specify the technologies (i.e. HTML, Javascript and Phaser.js) to use. Phaser.js is a game engine.
  • Clearly explain how the game play works.
  • Specify that we want to preview the game. In LibreChat we ask for the Artifacts functionality. If you are using ChatGPT or Gemini this is called the Canvas. Anthropic Claude also calls it Artifacts.
Build a game using only HTML, Javascript and Phaser.js via CDN. Display a preview of the game using the Artifacts feature. 

Instructions for how the game called AMazing works. 
- The heading AMazing should be displayed at the top of the screen.
- The game needs to generate a dynamic maze that has a start and end location as well as walls. The generated maze must be solvable.
- There should be a player icon positioned just after the start location. 
- Keyboard keys up, down, left and right can be used to move the player. If a wall exists in the direction the user wants to move, it should not be allowed.
- Once the user reaches the end/exit, they should win the game.
- Have a New Maze button, so that the user can generate a new Maze.

Remember to show/preview the interactive in your Artifacts tool/functionality.
Tip

While this prompt has been tested, the LLM can make errors. Testing is important to find the bugs/errors. You can provide follow up feedback to the LLM to try to fix the bugs.

Challenge

Write a follow up prompts to:

  • Change the colour scheme and player graphic
  • Get the LLM to explain the code that generates the Maze. Can you find out how it always generates a solvable maze?