Chat with this course

PODCAST

When you're using AI to explain your code or try to fix it, you probably end up with outdated information. Most online chat services and API's have no access to the internet and are pre-trained on a specific dataset until a specific date. When you ask a chatbot "What is the latest version of Laravel?" it will give you the version it was trained on, and this is probably not version 11 like we use for this course.

What we need is a chatbot with a pretrained model that can access our course materials and the latest Laravel, Livewire, Tailwind and Alpine.js documentation. One of these tools is AnythingLLM which can do exactly what we need and, best of all, it's free!

Advantages of AnythingLLM:

• AnythingLLM is an open-source application that lets you chat with your documents and websites.
• AnythingLLM can work with different large language models (paid services or local LLM's).
• You can upload your documents and have a conversation about them, like a virtual assistant for your files.
• AnythingLLM is built for privacy and security, so your data stays on your device.

We're going to use the (free) Groq API for the language model and the internal storage of AnythingLLM for the documents.

Groq API key

• Create an account on Groq.com
• Go to the Groq console and create an API key (we need the key for the AnythingLLM configuration)

IMPORTANT!

Don't use your school email address for the Groq account because this can violate the Groq policy.
Use a personal email address instead.

AnythingLLM

• Download and install AnythingLLM

IMPORTANT!

Install the software for all users, not just for the current user!
This way, you get a faster response from the chatbot and less steaming errors.

The first time you open AnythingLLM you will be asked to set up your environment

• LLM Preference: choose Groq, enter your API key and select the model llama-3.2-90b-text-preview
  (or the previously selected models llama-3.1-70b-Versatile or llama3-70b-8192 if you frequently encounter time-outs).
  At the time of writing, this is the largest model available on Groq. You can change this later if you want to try a different model
• Embedding Preference: keep the default AnythingLLM Embedder
• Vector Databes Connection: keep the default LanceDB
• Create your first workspace (e.g. TALL Stack) and start chatting with the course materials

Try asking the chatbot "What are the release dates of Laravel?" and see what it answers. The latest version of Laravel is 9. Not good enough for us...

Add a context and instructions

We add a system prompt to the chatbot that will be used for every conversation. This system prompt will help the LLM to generate more accurate and relevant responses.
It directs the LLM towards the most appropriate information and avoids irrelevant tangents.

• Click on the gear icon, next to the workspace name
• Click on Chat Settings and copy the following markdown text into the Prompt field:
  (Replace XXXXXX with your name)

**Larry, the Laravel Chatbot**
Hello! I'm XXXXXX, a high school student new to Laravel. 
I'd like to learn from you, Larry, a knowledgeable chatbot specializing in PHP, Laravel, Livewire, Alpine.js, and Tailwind CSS.

**Your Task**
Please assist me with various tasks and provide explanations with relevant context. 
If I request a code example or if you think it would enhance the explanation, please provide one.
When explaining code, use bullet points with bold line numbers. E.g:
-  **Line 2**: explanation of line 2
-  **Line 4 - 6**: explanation of the codeblock between line 4 and line 6

**Follow-up question**
If I'm **NOT TAKING A QUIZ** , you may ask me a related question to ensure I understand the concept.

Let's get started!

• Set the LLM Temperature to a low value (e.g. 0.1) to make the chatbot more deterministic and less creative
• Click on Update workspace to save the settings

TIP

Add this line to the end of the prompt if you want the answers in e.g. Dutch:

**Note**: Always respond in **Dutch**, except for code fragments, which should be in their respective programming languages (e.g., PHP, JavaScript, HTML, CSS, etc.).

• Start a new tread and ask the chatbot Who are you? for a small introduction (to see the system prompt is working)
• Ask the chatbot What is the TALL stack? and you'l get a nice explenation and a follow-up question

Add a knowledge base

• Click on the upload icon next to the workspace name
• Click on the Data connectors tab on the top
  • Click on Bulk Link Scraper
  • Add the URL of the Laravel documentation: https://laravel.com/docs/11.x
  • Set the Max Links to 100
  • Click on Submit
• Do the same for the Livewire documentation, The Alpine.js documentation, The Tailwind CSS documentation and
  our full course:

  Website URL	Depth	Max Links
  https://laravel.com/docs/11.x	1	100
  https://livewire.laravel.com/docs	1	100
  https://alpinejs.dev	3	100
  https://tailwindcss.com/docs	1	200
  https://itf-laravel-11.netlify.app/	1	100

• Now go back to the Documents tab
  • Select the downloaded websites and click on Move to workspace
  • After moving the documents, click on Save and Embed (be patient, this can take a while)

Now, when you ask a question, our chatbot will allso search in the Laravel, Livewire, Alpine.js, Tailwind CSS and course documentation for the answer.

• Aks the chatbot What is the latest version of Laravel? and you'll get the correct answer: 11.xx.x
• You can als open the Citations and look where the answer came from

Add commands to the chatbot

• Click on the / icon benth the user input prompt
• By default, only the /reset command is available, but you can add more commands by clicking on the + Add New Preset option

Le't add tweo extra commands: /explain and /kahoot

/explain command

When choosing the /explain command and past a piece of code, the chatbot will explain this code in more detail

• Click on the + Add New Preset option and add the following settings:
  • Description: Get a detailed explanation of the pasted code
  • Prompt:

**Code with Commented Lines and Bullet Point Explanation**
Copy the code into a new Markdown code block. 
After each line of code, add comments with a number in straight brackets, like this:

[start example code]
public function show($id) // [1]
 {
        return "Welcome, user $id!"; // [2]
}
[end example code]

Then, convert the numbers in the comments into a Markdown bullet list, like this:

- **`[1]`**:  explain [1] in detail
- **`[2]`**: explain  [2] in detail

**Summary**:
Give a summary of the code block and explain the purpose of the code.

• Click on Save

Now you can test the command by selecting the /explain command and pasting a piece of code from the course or from the documentation (use shift + enter to start a new line)

/kahoot command

The /kahoot command will generate a Kahoot quiz with five possible answers around a topic you specify after the /kahoot command

• Click on the + Add New Preset option and add the following settings:
  • Description: Generate a Kahoot quiz with five possible answers around a topic
  • Prompt:

**Kahoot Quiz**
Please welcome me with my name to this Kahoot quiz
Generate Kahoot-style questions about the **specified subject**, tailored for a **Laravel beginner**.

**Question Format:**
* Provide 5 possible answers, formatted as:
  - **A**: possibility 1
  - **B**: possibility 2
  - **C**: possibility 3
  - **D**: possibility 4
  - **E**: possibility 5

**Question Difficulty:**
* Generate questions that are **basic to medium** level, suitable for a beginner in Laravel, Livewire, Alpins.js and tailwind.css

**Response Handling:**
If the answer is **incorrect**:
- Display the **correct answer**
- Provide a brief explanation of why the submitted answer is incorrect

If the answer is **correct**:
- Congratulate me by my **name**

**Generate a new Kohoot question**
- Always generate a new Kahoot question on the **same, specified subject**

**Stop Condition:**
* If I type"exit" or "stop", terminate the conversation and encourage me by my name to explore the **TALL stack** further

• Save the command and test it by typing /kahoot web.php in the chatbot
• Type exit or stop to end the quiz