Generate improvements (#2)

This pull request introduces several significant changes to the project,
focusing on Docker integration, environment configuration, and
enhancements to the frontend application. Below is a summary of the most
important changes:

### Docker and Environment Configuration

*
[`.dockerignore`](diffhunk://#diff-2f754321d62f08ba8392b9b168b83e24ea2852bb5d815d63e767f6c3d23c6ac5R1-R20):
Added to exclude unnecessary files and directories from the Docker build
context, improving build efficiency.
*
[`Dockerfile`](diffhunk://#diff-dd2c0eb6ea5cfc6c4bd4eac30934e2d5746747af48fef6da689e85b752f39557R1-R15):
Created a multi-stage Dockerfile to build and serve the application
using Nginx, ensuring a production-ready deployment.
*
[`.github/workflows/docker-build.yml`](diffhunk://#diff-3414847e2ad632333f775cabb810f0dc0df61a570365df34750a08b00912fe82R1-R57):
Added a GitHub Actions workflow to automate Docker image builds and
pushes to the container registry on specific triggers.
* `.env.example` and `.env.production`: Added environment variable for
backend API endpoint configuration.
[[1]](diffhunk://#diff-a3046da0d15a27e89f2afe639b25748a7ad4d9290af3e7b1b6c1a5533c8f0a8cR1)
[[2]](diffhunk://#diff-48f73ea2653e45c41f31afc2d42dfde14d8caf26d8dd24d3d2a81a52604f4cb6R1)

### Frontend Enhancements

*
[`README.md`](diffhunk://#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5L3-R134):
Updated with detailed project information, installation instructions,
and usage guidelines, including Docker usage.
*
[`src/App.tsx`](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R148):
Improved the header layout by adding a container for the toggle button
and application name.
[[1]](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R148)
[[2]](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R166-R170)
[[3]](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2L177)
*
[`src/api/index.ts`](diffhunk://#diff-764761d79ed791ea154187526b088322dba3bebe94f9d38ab22120554aba77c7L3-R3):
Updated API endpoint to use environment variable for backend API URL.
*
[`src/components/ModelControls.tsx`](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580R2):
Integrated Auth0 for authentication, restricting access to model
controls based on user authentication status.
[[1]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580R2)
[[2]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L28-R31)
[[3]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L44)
[[4]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580R61-R62)
[[5]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L97-R100)
[[6]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L113-R116)
[[7]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L134-R144)

### Dependency Updates

*
[`package.json`](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R13-R23):
Added new dependencies for `@auth0/auth0-react`,
`@primer/octicons-react`, and `react-icons` to enhance the application
with authentication and additional UI icons.

### Licensing and Metadata

*
[`LICENSE`](diffhunk://#diff-c693279643b8cd5d248172d9c22cb7cf4ed163a3c98c8a3f69c2717edd3eacb7R1-R21):
Added MIT License to the project, ensuring open-source compliance.

These changes collectively enhance the project's deployment process,
improve frontend capabilities, and ensure proper licensing and
documentation.This pull request includes several changes to the
`Dockerfile`, `package.json`, and various components in the `src`
directory to enhance the application's build process, dependency
management, and user interface.

### Build Process Improvements:
* Created a multi-stage build in the `Dockerfile` to optimize the image
size and build process. This includes a build stage using
`node:20-alpine`, installing dependencies, and building the application,
followed by a production stage that uses the built assets and serves the
application on port 3000.

### Dependency Management:
* Added new dependencies to `package.json` for improved functionality
and UI components, including `@auth0/auth0-react`,
`@primer/octicons-react`, and `react-icons`.

### User Interface Enhancements:
* Updated `src/App.tsx` to include a new container for the toggle and
app name in the header, and added the application name "MCP Kit".
[[1]](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R148)
[[2]](diffhunk://#diff-26ad4b834941d9b19ebf9db8082bd202aaf72ea0ddea85f5a8a0cb3c729cc6f2R166-R170)
* Modified `src/components/ModelControls.tsx` to integrate
authentication checks using `@auth0/auth0-react`. This ensures that
certain controls are only accessible to authenticated users.
[[1]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580R2)
[[2]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L28-R31)
[[3]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580R61-R62)
[[4]](diffhunk://#diff-384fa59c0993a3d8d538bbc9c802bba21991efc510e449ffd4b8337764f46580L134-R144)
* Updated `src/components/Sidebar.tsx` to open the GitHub repository for
help and support when the help button is clicked.
* Refined `src/components/sidebar/SidebarFooter.tsx` to replace the help
icon with a GitHub icon and update the button titles for clarity.
[[1]](diffhunk://#diff-22a4dba86635dcba92d0b4732b2f736618b42ebdb1d3478523b91ace9d2a6b4bL4-R7)
[[2]](diffhunk://#diff-22a4dba86635dcba92d0b4732b2f736618b42ebdb1d3478523b91ace9d2a6b4bL56-R65)

### Configuration Cleanup:
* Removed unnecessary build configuration from `vite.config.ts` to
streamline the build process.

Author: shahariaazam

.dockerignore

@@ -0,0 +1,20 @@
+# Versioning and metadata
+.git
+.gitignore
+.dockerignore
+
+# Build dependencies
+dist
+build
+node_modules
+coverage
+
+# Environment (contains sensitive data)
+.env
+
+# Files not required for production
+.editorconfig
+Dockerfile
+README.md
+tslint.json
+nodemon.json

.env.example

@@ -0,0 +1 @@
+VITE_MCP_BACKEND_API_ENDPOINT=http://localhost:8081

.env.production

@@ -0,0 +1 @@
+VITE_MCP_BACKEND_API_ENDPOINT=VITE_MCP_BACKEND_API_ENDPOINT

.github/workflows/docker-build.yml

@@ -0,0 +1,57 @@
+name: Docker Build and Push
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'  # This will trigger on version tags like v1.0.0
+  pull_request:
+    branches:
+      - main
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Log in to the Container registry
+        if: github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
+            type=semver,pattern={{version}},enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+            type=semver,pattern={{major}}.{{minor}},enable=${{ startsWith(github.ref, 'refs/tags/v') }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: ${{ github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

Dockerfile

@@ -0,0 +1,15 @@
+# Stage 1: Build Image
+FROM node:20-alpine as build
+RUN apk add git
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Stage 2, use the compiled app, ready for production with Nginx
+FROM nginx:1.21.6-alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY /nginx-custom.conf /etc/nginx/conf.d/default.conf
+COPY env.sh /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shaharia Lab OÜ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,134 @@
 # MCP (Model Context Protocol) Frontend
 
-This repository is part of [mcp-kit](https://github.com/shaharia-lab/mcp-kit).
-It is the frontend part of the MCP (Model Context Protocol) Kit written in Golang. 
-This frontend is a single page application built with Vite, React, Typescript.
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
-# Demo
+A frontend application for the Model Context Protocol (MCP) Kit that enables enhanced interactions with Large Language Models through tool-based capabilities.
 
-Let's chat with LLM by providing additional capabilities (tools) coming from MCP server.
+This repository is part of [mcp-kit](https://github.com/shaharia-lab/mcp-kit) and serves as the user interface layer built with modern web technologies.
+
+## 🚀 Features
+
+- Single Page Application architecture
+- Real-time chat interface with LLMs
+- Tool-based interaction capabilities
+- Integration with MCP backend server
+- Modern, responsive UI built with React and TypeScript
+
+## 🎥 Demo
+
+Experience MCP Kit in action - chat with LLMs while leveraging additional capabilities provided by the MCP server:
 
 <video src="https://github.com/user-attachments/assets/81804a29-e896-4f65-a929-05ac6a6aa92a" controls title="MCP Kit in action"></video>
 
-## Installation
+## 🛠️ Prerequisites
+
+- Node.js 20.x
+- NPM 7.x
+
+## 📦 Installation
+
+### Standard Installation
+
+1. Clone the repository:
+```shell
+git clone https://github.com/shaharia-lab/mcp-frontend.git
+cd mcp-frontend
+```
+
+[Rest of standard installation steps...]
+
+### 🐳 Docker Installation
+
+You can run MCP Frontend using our official Docker image:
+
+```shell
+docker pull ghcr.io/shaharia-lab/mcp-frontend:<version>
+```
+
+Replace `<version>` with the specific version you want to use (e.g., `latest`, `1.0.0`).
+
+#### Running with Docker
+
+docker run \
+    -p 3000:3000 \
+    -e VITE_MCP_BACKEND_API_ENDPOINT=http://localhost:8081 \
+    ghcr.io/shaharia-lab/mcp-frontend:<version>
+
+#### Environment Variables
+
+The following environment variables are required to run MCP Frontend:
+
+##### Production Environment Variables (Running with Docker)
 
+| env_key                         | Default | Required | Description                           |
+|---------------------------------|---------|----------|---------------------------------------|
+| `VITE_MCP_BACKEND_API_ENDPOINT` | -       | Yes      | The base URL for the MCP backend API. |
+
+Simply copy the `.env.example` file to `.env` and update the values as needed.
+
+## 🚀 Usage
+
+### Development
+
+Run the development server:
 ```shell
-nvm use 20
-npm install
 npm run dev
 ```
 
-## MCP-Kit Backend
+### Production
+
+Build for production:
+
+```shell
+npm run build
+```
+
+For detailed configuration options, refer to the [Vite documentation](https://vite.dev/guide/).
+
+## 🏗️ Architecture
+
+MCP Frontend is built with:
+- [Vite](https://vite.dev/) - Build tool and development server
+- [React](https://reactjs.org/) - UI framework
+- [TypeScript](https://www.typescriptlang.org/) - Type-safe JavaScript
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
+
+## 🤝 Contributing
+
+We welcome contributions! Here's how you can help:
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+Please ensure your PRs follow our coding standards and include appropriate tests.
+
+## 🔍 Related Projects
+
+- [MCP-Kit Backend](https://github.com/shaharia-lab/mcp-kit) - The main backend server
+- [Documentation](https://github.com/shaharia-lab/mcp-kit) - Full project documentation
+
+## ⚠️ Current Status
+
+This project is under active development. While functional, it's not yet recommended for production use. We're working on:
+- Enhanced error handling
+- Improved performance
+- Additional tool integrations
+- Comprehensive testing suite
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🤔 Support
 
-Feel free to checkout the main backend [here](https://github.com/shaharia-lab/mcp-kit).
+- 📧 Email: [hello@shaharialab.com](mailto:hello@shaharialab.com)
+- 🐛 [Issue Tracker](https://github.com/shaharia-lab/mcp-frontend/issues)
+- 💬 [Discord invite: Community Chat](https://discord.gg/XMDMQ2u7)
 
-## Disclaimer
+## 🙏 Acknowledgments
 
-We are actively improving this frontend. Not recommended for production-use yet.
+- The MCP Kit community
+- All our contributors and supporters

env.sh

@@ -0,0 +1,28 @@
+#!/bin/sh
+# Generate sed script file
+sed_script="/tmp/sed_script.sed"
+> "$sed_script"
+
+# Ensure the sed script file is cleaned up on exit
+trap 'rm -f "$sed_script"' EXIT
+
+# Extract VITE_MCP_ environment variables and build the sed expression
+env | grep '^VITE_MCP_' | while IFS='=' read -r key value; do
+   # Escape slashes and other special characters in key and value
+   escaped_key=$(printf '%s' "$key" | sed 's/[\/&]/\\&/g')
+   escaped_value=$(printf '%s' "$value" | sed 's/[\/&]/\\&/g')
+   # Append to sed script file
+   echo "s|${escaped_key}|${escaped_value}|g;" >> "$sed_script"
+done
+
+# Check if the sed script file was created and is not empty
+if [ ! -s "$sed_script" ]; then
+   echo "No VITE_MCP_ environment variables found. Exiting with error."
+   exit 1
+fi
+
+# sed All files
+find /usr/share/nginx/html -type f -exec sed -i -f "$sed_script" '{}' +
+
+# sed JS and CSS only
+# find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i -f "$sed_script" '{}' +

nginx-custom.conf

@@ -0,0 +1,8 @@
+server {
+  listen 80;
+  location / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+  }
+}