https://github.com/codewithalihamza/nextjs-ai-assistant
https://github.com/codewithalihamza/nextjs-ai-assistant
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/codewithalihamza/nextjs-ai-assistant
- Owner: codewithalihamza
- Created: 2025-03-01T17:42:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-01T18:45:42.000Z (over 1 year ago)
- Last Synced: 2025-03-01T19:34:01.897Z (over 1 year ago)
- Language: TypeScript
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://nextjs.org/) (React framework)
- [React Markdown](https://github.com/remarkjs/react-markdown) (Markdown rendering)
- [React Syntax Highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) (Syntax highlighting)
- [Rehype Raw](https://github.com/rehypejs/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:
```bash
npm install
```
3. run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](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](https://www.linkedin.com/in/syedalihamzaofficial/)
- Website - [Ali Hamza](https://syedalihamzaofficial.blogspot.com/)
- Medium - [@syedalihamzaofficial](https://medium.com/@syedalihamzaofficial)
- YouTube - [@TechnicalHamzaOfficial1](https://www.youtube.com/@TechnicalHamzaOfficial1)