Unit 6: Building a Custom AI Chatbot

Project Initialization

Follow these steps to launch the starter project:

1. Visit the GitHub repository: https://github.com/aman-singh14/AvarixStarterCode
2. Click the green "Code" button
3. Choose the "Codespaces" tab at the top
4. Click "Create a codespace on main"

Running Your Next.js Project

1. Wait a few moments while Codespaces finishes setting up
2. When setup is complete, run npm run dev
3. Open http://localhost:3000 in the browser to view your project

Setting Up Your API Key

1. Locate the .env file in your project
2. Assign your API Key to the OPENAI_API_KEY variable
3. Enclose your API Key in double quotes ""

Layout and Folder Structure

Making a Component

1. Duplicate the starter component
2. Find starterCode.tsx under the components directory
3. Copy and paste the file into the same folder
4. Rename the copy to "contactMe"

Modifying the Contact Component

1. Change the function name from EditMyName to ContactMe
2. Paste the form code below inside the section tag:

<div className="max-w-screen-md bg-white p-8 rounded shadow-lg mx-auto">
   <h2 className="text-2xl font-bold mb-4">Contact Me</h2>
   <form>
      <div className="mb-4">
         <label htmlFor="name" className="block text-gray-700 font-semibold mb-2">Name</label>
         <input type="text" id="name" name="name" className="border border-gray-400 p-2 w-full rounded" />
      </div>
      <div className="mb-4">
         <label htmlFor="email" className="block text-gray-700 font-semibold mb-2">Email</label>
         <input type="email" id="email" name="email" className="border border-gray-400 p-2 w-full rounded" />
      </div>
      <div className="mb-4">
         <label htmlFor="message" className="block text-gray-700 font-semibold mb-2">Message</label>
         <textarea id="message" name="message" className="border border-gray-400 p-2 w-full rounded"></textarea>
      </div>
      <button type="submit" className="bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600">Send Message</button>
   </form>
</div>

Linking ContactMe to Home

1. Open page.tsx located in the App folder
2. Add this import: import Contact from '@/components/contactMe'
3. Ensure the path after components/ matches the file name (contactMe.tsx)
4. Place <Contact/> among the component tags
5. Check that the contact form appears on the page

Making a New Page

• To create a page, make a new folder and add a page.tsx inside it
• Copy the examplePage folder and rename the copy to newPage
• Add components to your new page as needed

Accessing Your Page

• To visit your new page, update your browser’s URL to include /newPage
• Example: https://app.github.dev/newPage
• This logic applies to any page: just add its name after your base URL

Linking Pages in the Navbar

1. Open header.tsx in your components directory
2. Add this to the links array: {name: 'New Page', path: '/newPage'}
3. Run npm run dev and click the new navbar link to confirm it works

Linking Pages via Buttons

1. At the top of the file, add: import Link from 'next/link';
2. Wrap your button with a Link tag
3. Example:

<Link href="/newPage">
   <button> Go to the new page </button>
</Link>

Tasks To Complete

• Follow the steps in Lessons 6.1–6.3 to structure your website
• Start building the components you’ll use—don’t worry about styling just yet
• Create all pages you’ll need in your final site
• Update the navigation bar to reflect your new pages
• Edit the chatbot welcome message in route.ts
• Commit your work and upload to a new GitHub repository
• Submit the project via Schoology