Next.js AI Assistant

A chat application built with Next.js that interacts with an AI assistant backend. The application supports Markdown rendering, syntax highlighting, and session management for maintaining conversation history.

---

Features

• Real-time Chat: Send and receive messages in real-time.
• Markdown Support: Messages are rendered with Markdown formatting.
• Syntax Highlighting: Code blocks in messages are highlighted using react-syntax-highlighter.
• Session Management: Maintains conversation history using a session ID.
• Loading State: Displays a loading indicator while waiting for AI responses.
• Responsive Design: Works seamlessly on both desktop and mobile devices.

---

Technologies Used

• Frontend:

  • Next.js (React framework)
  • React Markdown (Markdown rendering)
  • React Syntax Highlighter (Syntax highlighting)
  • Rehype Raw (Raw HTML support in Markdown)

• Backend:

• Visit https://github.com/codewithalihamza/NestJS-AI-Assistant in your browser for backend code.

---

Usage

1. Start the Backend:

• Ensure your backend API is running at the specified URL (e.g., http://localhost:5000).

2. Open the Application: Visit http://localhost:3000 in your browser.

3. Send a Message:

   • Type a message in the input field and press Enter or click the Send button.
   • The message will be sent to the backend, and the AI's response will be displayed.

4. View Conversation History:

   • The chat window displays the conversation history, including user messages and AI responses.

---

Customization

Markdown Rendering

To customize Markdown rendering, modify the ReactMarkdown component in Chat.tsx.

---

Getting Started

1. Clone the repository:

2. Install dependencies using NPM:

   npm install

3. run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

💫 About Me:

I'm Ali Hamza from Pakistan 🇵🇰, an experienced Full Stack Developer. With a comprehensive understanding of both front-end and back-end technologies, I am dedicated to creating strong and reliable software applications that perform well and meet the needs of the users effectively. 💻🚀

💻 Tech Stack:

Stay in touch

• Linkedin - @syedalihamzaofficial
• Website - Ali Hamza
• Medium - @syedalihamzaofficial
• YouTube - @TechnicalHamzaOfficial1