This repository contains the source code for an AI-powered chatbot built with Angular. The application features a floating chat widget that interacts with an AI model through a local backend proxy. The chatbot is designed to function as a "Portfolio Bot," answering questions based on a provided context.
- Angular 19: A powerful framework for building the frontend application.
- TypeScript: The primary language for application logic.
- SCSS: Used for advanced and structured styling of components.
- Angular Signals: For modern, fine-grained reactive state management.
- Node.js: Powers the local proxy server for securely handling API requests.
- OpenRouter / DeepSeek: The AI service providing the chat completions.
- Compodoc: For generating comprehensive code documentation.
- Floating Chat Widget: A toggleable chat interface that sits unobtrusively on the page.
- Real-time Messaging: A familiar chat UI displaying user and assistant messages with timestamps.
- Context-Aware Conversations: The chatbot's responses are based on a configurable system prompt.
- Secure API Integration: Uses a local Node.js proxy to manage API keys, keeping them out of the frontend code.
- Loading & Error States: The UI includes a typing indicator while the AI responds and displays clear error messages if issues occur.
.
├── api-proxy/ # Node.js proxy server for AI API calls
│ ├── server.js # The proxy server logic
│ └── .env # Environment variables for the proxy (API key)
├── documentation/ # Auto-generated documentation by Compodoc
├── src/
│ ├── app/
│ │ ├── components/
│ │ │ └── chat/ # The main chat widget component
│ │ └── services/
│ │ └── ai.service.ts # Service for frontend-to-proxy communication
│ └── app.component.ts # Root application component
└── package.json # Project dependencies and scripts
This project requires running a local Node.js proxy server in one terminal and the Angular development server in another.
- Node.js and npm
- Angular CLI (
npm install -g @angular/cli)
-
Clone the Repository:
git clone https://github.com/feldulfz/chatbot.git cd chatbot -
Install Frontend Dependencies: From the root directory (
chatbot), run:npm install
-
Configure and Install Proxy Dependencies:
- Navigate to the proxy directory:
cd api-proxy - Create a
.envfile with your OpenRouter API key:echo "MODEL_API_KEY=YOUR_OPENROUTER_API_KEY_HERE" > .env
- Install proxy dependencies:
npm install - Navigate back to the root directory:
cd ..
- Navigate to the proxy directory:
-
Run the Servers:
-
Terminal 1 (Proxy Server): From the
api-proxydirectory, start the proxy.npm start
The proxy will run on
http://localhost:3000. -
Terminal 2 (Frontend App): From the root
chatbotdirectory, start the Angular app.npm start
The application will be available at
http://localhost:4200/.
-
- With both servers running, open
http://localhost:4200/in your browser. - Click the red "Button Initialize Context" to set the initial system prompt for the chatbot.
- Click the floating robot icon in the bottom right corner to open the chat widget.
- Type a message and press Enter to interact with the Portfolio Bot.
npm start: Starts the Angular development server.npm run build: Compiles the application for production.npm run test: Executes unit tests via Karma.npm run compodoc:build-and-serve: Generates and serves the code documentation locally.
This project uses Compodoc to generate documentation from the source code. To view it, run npm run compodoc:build-and-serve and navigate to the provided local URL. A pre-built version of the documentation is also available in the /documentation directory of this repository.
