Skip to main content

Homework 5: RAG App Prototype

In this homework you will design and build an app prototype that uses retrieval augmented generation (RAG) with a local LLM to locate information from an uploaded document and present that information to the user in an app.

info

Your laptop must have at least 10 GB free in order to complete this assignment. (If not, the LLM will fail to load.)

You will need a laptop that supports WebGPU to complete this assignment.

Learning Objectives​

  • Identify a problem where retrieval augmented generation (RAG) is useful for solving a human problem.
  • Prepare a document for RAG: choose a text splitter and chunk size.
  • Retrieve the chunks relevant to a task.
  • Augment the system prompt with the retrieved chunks.
  • Engineer a system prompt that answers only from the retrieved chunks, in a format the app can render, and that handles information the documents don't contain.
  • Design an app that employs app design patterns.
  • Design an app that supports a user interfacing with an LLM that is not a chat interface.

Help & Support Resources​

We want you to get the help and support you need. Use the course's support resources for help with this assignment.

Git Repository & Codespace​

  1. Create your assignment repository.

    Visit https://landrace.infosci.cornell.edu/courses/info4340-2026fa/repos/hw5 in your browser to create your assignment repository.

  2. Open your assignment repository in GitHub.

    After creating your repository, visit https://landrace.infosci.cornell.edu/courses/info4340-2026fa/repos/hw5 in your browser and follow the link to open the repository on github.com

  3. Open your assignment repository as a codespace.

Submission Requirements​

Professionalism

Professionalism means meeting the client's requirements. Not doing less and not doing more.

Your submission should meet the requirements specified for this assignment and no more (or less). If you do more than the requirements, you will receive a 0 for the assignment. If you do less than the requirements, you will receive a 0 for the assignment.

Your assignment should meet the following requirements for credit:

  • Submit your own original work (design and code) for this assignment.

    No credit is provided for submitting design and/or code that is taken from the course-provided examples.

  • Your code should be original. However, the structure of the code will mirror the class examples.

    The structure of your code will align with the class examples. This is to be expected.

  • You are required to use the methods and techniques covered in class.

    Important

    No credit is provided for using methods that are not covered in this class.

    You may not use any methods that have not been covered in class prior to the release of this assignment.

  • Your assignment's prototype should be visible in the browser and functional upon launching the development web server using Run Without Debugging.

    If your assignment does not launch using this method or is not visible in the browser after launching the development server, we are unable to provide any credit.

  • All files should be in the location specified in this document for credit.

    Professionalism is important. Incorrectly placed files will not be graded; no partial credit is provided either.

  • Follow the submission instructions below.

    Submit all materials to your GitHub repository's main branch for this assignment. When you're finished stage, commit, and push your submission to GitHub. Then fill out the submission form to complete your submission.

    Failure to complete the submission form will result in 0 credit; no submission form = no submission. No leniency. No exceptions.

Overview​

Implement an app prototype that uses RAG to retrieve information from a user uploaded document (e.g. .md, .pdf, .txt) and then present that information to the user employing common app design patterns.

Your app prototype may support the user with any task you like. However, the prototype must meet the requirements set in this assignment.

For example, you might create an app prototype that's a "lease checklist". A user uploads a lease document into the app, the app uses RAG to retrieve information from the lease, and then presents the user with a checklist of questions about the lease (e.g., "Are pets allowed?", "Is subletting allowed?", "What is the security deposit?").

You are free to implement this example, or any other idea that you have, as long as it meets the requirements set in this assignment. However, you may not implement a chatbot.

Requirements​

  • Create an app prototype using only the methods covered in class this semester that employs RAG to retrieve information from a user-uploaded document and present that information in a useful interface.

    • You should employ GitHub Copilot to assist with developing the interface. However, the RAG functionality should be implemented by you, not Copilot.
    • The uploaded document may only be text formats (e.g., .md, .pdf, .txt).
    • You should prompt the LLM at least 3 times for each uploaded file. Each prompt should retrieve different information from the uploaded document.
    • The app should "reset" when a new file is uploaded (it should forget the previous file and its information).

  • Your app should employ app design patterns.

    • The app's interface should render the information from the LLM that employs app design patterns and communicates the information to the user. (No credit is provided for rendering raw responses from the LLM in the user interface.)
    • Your app must provide feedback to the user; the user should never be left wondering if the app is doing anything.
    • The app should progressively load information as the response is generated, rather than waiting for the entire response to be generated before rendering it. (i.e. send question 1 to the LLM, render the UI to show the user the results, then send question 2 to the LLM, render the UI to show the user the results, etc.)

  • Engineer a system prompt that instructs the LLM to respond only from the retrieved chunks, in a format your app can render, and that handles information the documents don't contain.

    • Accuracy is important. The LLM should not hallucinate for missing information.
    • JSON is a good choice for the output format, but you are not required to use it.

  • The LLM should generate responses in a reasonable amount of time (e.g., around 30 seconds).

    • You may use any WebLLM model that you like so long as it is no larger than 3B parameters.
    • You may modify RAG parameters. (e.g., chunk size, number of chunks retrieved, text splitter)

  • Include at least 3 sample upload documents in your repository's resources folder for testing.

    • Each document should be at least a few pages long.
    • Each document's information should be in a different format compared to the others; put another way, documents of the same kind but structured differently.
    • We will use these sample documents to grade your prototype.
    • No credit is provided for this assignment if no sample documents are provided.

  • You may only use the methods covered thus far in class (classes 2-17).

    • You may only use Vue.js (version 3) and its composition API to program your prototype.
    • You may use Tailwindcss and daisyUI to style your components.
    • A minimal amount of custom CSS is permitted, but shouldn't be necessary for this prototype.
    • 0 credit is provided if any other methods are used to implement your prototype. No exceptions. No leniency.

  • No PWA is required for this assignment.

Prohibited:

  • You may not use any form of chatbot interface; the user should not type any prompts/questions and send them to the LLM.
  • You may not display/render raw responses from the LLM in the app's user interface.
  • You may not have any static documents in your app's RAG index; All documents must be uploaded by the user.
  • You may not install additional packages or libraries; use only the libraries provided in the repository.

Instructions​

  1. Read the requirements above.

  2. The RAG activity from class is provided as your starter code.

    Upload functionality has been added to help get you started. Try the following to see how it works:

    1. Ask the chatbot "What are the prerequisites for this course?" using RAG.

      This information is only contained in the syllabus. I removed the syllabus from the RAG index. It shouldn't be able to answer this question.

    2. In the resources folder, you will find the syllabus. Download it to your computer and upload it using the Upload button in the bottom-left corner of the app.

    3. Ask the same question again. The chatbot should now be able to answer the question because the syllabus is now in the RAG index.

    Note

    This starter code is a chatbot interface and would receive 0 credit if submitted. This code shows you a working RAG implementation. You should modify this example code to implement your own app prototype that meets the requirements of this assignment.

  3. Remove all static documents from the RAG index. (You may only use documents uploaded by the user.)

    Delete the src/assets/documents folder. Then update src/services/localRag.js to remove the static documents from the RAG index.

    Hint

    Delete the following code from src/services/localRag.js:

    // every markdown file in src/assets/documents/, bundled into the app as text
    const files = import.meta.glob("../assets/documents/*.md", { query: "?raw", import: "default", eager: true });

    // the documents to search: each file's "# Title" heading (or its file name) and its text
    const documents = Object.entries(files).map(([path, markdown]) => ({
      title: getTitle(markdown) ?? path.split("/").pop(),
      text: markdown,
    }));

    // start indexing now (after the model loads).
    documentIndex.value
      .addDocuments(documents, { splitter: splitter })
      .catch((error) => console.error("Failed to index the documents:", error));

  4. Test that the RAG functionality works with your own uploaded documents.

    You should be able to upload a document and then ask the same question as before ("What are the prerequisites for this course?") and receive an answer.

  5. Experiment with different system prompts and uploaded documents to see how the LLM responds.

    Keep the chatbot interface for now. It will help you develop your idea and test your RAG implementation.

    To reset the RAG index for a new upload, use the clearIndex() function in src/services/localRag.js.

    Note

    If you wish to upload PDF files, they must contain actual text. Scanned PDFs that are images of text will not work. (There is no OCR support in this assignment.)

    You will also need to extract the text from the PDF to use it. See src/services/localRag.js for some code to get you started.

  6. Once you have a working RAG implementation, design and implement your own app prototype that meets the requirements of this assignment.

    tip

    Before you submit your assignment, you will need to remove the chatbot interface. Before removing the interface, output the LLM's messages (and response) to the JavaScript console so you're able to still see the LLM's responses for testing.

  7. Remove the chatbot interface completely.

    A chatbot typically streams its output to the user as it's generated. You will need to remove this feature from your app prototype.

    The arrow function provided to onResponse streams the LLM's output.

    await llmEngine.generate(messages.value, {
      onResponse: (text) => (response.value = text),
    });

    Alternatively, you can simply get the LLM's response as its return value.

    const result = await llmEngine.generate(messages.value);

  8. Check that your app prototype meets the requirements of this assignment.

  9. Thoroughly test your prototype with your sample documents.

Submission​

Stage, commit and push all changed files in your Git repository to the GitHub server. (All commits should reside on the main branch.)

Complete the submission form for hw5 to submit the assignment.

note

The submission form asks you to check your submission. Checking your work will ensure you receive credit for this assignment. We ask you to check your submission because this is where some students lose points. It's easy to forget something and checking your work prevents the heartache of getting a 0 because your submission wasn't submitted in a way that we can access and grade it.

Contributors​

Copyright © 2026:

  • Kyle Harms
Last updated on