# HANA MCP UI
[](https://www.npmjs.com/package/hana-mcp-ui)
[](https://www.npmjs.com/package/hana-mcp-ui)
[](https://nodejs.org/)
[](LICENSE)
> **Visual interface for managing HANA MCP server configurations with Claude Desktop integration**
## ๐ Quick Start
### 1. Run the UI
```bash
npx hana-mcp-ui
```
That's it! The UI will:
- ๐ฆ Install automatically (if not cached)
- ๐ง Start the backend server on port 3001
- โก Start the React frontend on port 5173
- ๐ Open your browser automatically
### 2. First-Time Setup
On first run, you'll be prompted to set your Claude Desktop config path:
- **๐ macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
- **๐ช Windows**: `%APPDATA%\Claude/claude_desktop_config.json`
- **๐ง Linux**: `~/.config/claude/claude_desktop_config.json`
The system suggests the correct path for your OS.
## ๐ฏ What You Get
### Visual Database Management
- **๐ Web Interface**: Modern, responsive React UI
- **๐ Multi-Environment**: Configure Production, Development, Staging per server
- **๐ค Claude Integration**: Deploy configurations directly to Claude Desktop
- **๐ Real-time Status**: Monitor active and configured servers
- **โ
Smart Validation**: Comprehensive form validation for database connections
### Key Features
- **One-Click Deployment**: Add databases to Claude Desktop with a single click
- **Environment Management**: Switch between different database environments
- **Configuration Backup**: Automatic backups before making changes
- **Connection Testing**: Test database connectivity before deployment
- **Clean Interface**: Intuitive design with smooth animations
## ๐ ๏ธ How to Use
### 1. Add Database Configuration
- Click **"+ Add Database"**
- Enter database details (host, user, password, etc.)
- Configure environments (Production, Development, Staging)
### 2. Add to Claude Desktop
- Select a database from your list
- Choose which environment to deploy
- Click **"Add to Claude"**
- Restart Claude Desktop to activate
### 3. Manage Active Connections
- View all databases currently active in Claude
- Remove connections when no longer needed
- Monitor connection status
## โ๏ธ Configuration Schema
### Required Fields
| Parameter | Description | Example |
|-----------|-------------|---------|
| `HANA_HOST` | Database hostname or IP address | `hana.company.com` |
| `HANA_USER` | Database username | `DBADMIN` |
| `HANA_PASSWORD` | Database password | `your-secure-password` |
### Optional Fields
| Parameter | Description | Default | Options |
|-----------|-------------|---------|---------|
| `HANA_PORT` | Database port | `443` | Any valid port number |
| `HANA_SCHEMA` | Default schema name | - | Schema name |
| `HANA_CONNECTION_TYPE` | Connection type | `auto` | `auto`, `single_container`, `mdc_system`, `mdc_tenant` |
| `HANA_INSTANCE_NUMBER` | Instance number (MDC) | - | Instance number (e.g., `10`) |
| `HANA_DATABASE_NAME` | Database name (MDC tenant) | - | Database name (e.g., `HQQ`) |
| `HANA_SSL` | Enable SSL connection | `true` | `true`, `false` |
| `HANA_ENCRYPT` | Enable encryption | `true` | `true`, `false` |
| `HANA_VALIDATE_CERT` | Validate SSL certificates | `true` | `true`, `false` |
| `LOG_LEVEL` | Logging level | `info` | `error`, `warn`, `info`, `debug` |
| `ENABLE_FILE_LOGGING` | Enable file logging | `true` | `true`, `false` |
| `ENABLE_CONSOLE_LOGGING` | Enable console logging | `false` | `true`, `false` |
### Database Connection Types
#### 1. Single-Container Database
Standard HANA database with single tenant.
**Required**: `HANA_HOST`, `HANA_USER`, `HANA_PASSWORD`
**Optional**: `HANA_PORT`, `HANA_SCHEMA`
#### 2. MDC System Database
Multi-tenant system database (manages tenants).
**Required**: `HANA_HOST`, `HANA_PORT`, `HANA_INSTANCE_NUMBER`, `HANA_USER`, `HANA_PASSWORD`
**Optional**: `HANA_SCHEMA`
#### 3. MDC Tenant Database
Multi-tenant tenant database (specific tenant).
**Required**: `HANA_HOST`, `HANA_PORT`, `HANA_INSTANCE_NUMBER`, `HANA_DATABASE_NAME`, `HANA_USER`, `HANA_PASSWORD`
**Optional**: `HANA_SCHEMA`
#### Auto-Detection
When `HANA_CONNECTION_TYPE` is set to `auto` (default), the server automatically detects the type:
- If `HANA_INSTANCE_NUMBER` + `HANA_DATABASE_NAME` โ **MDC Tenant**
- If only `HANA_INSTANCE_NUMBER` โ **MDC System**
- If neither โ **Single-Container**
## ๐ Prerequisites
Before using the UI, install the core server:
```bash
npm install -g hana-mcp-server
```
The UI works as a management interface for the installed server.
## ๐๏ธ Architecture
### System Architecture
### Technology Stack
- **Frontend**: React 19 with Vite build system
- **Backend**: Express.js REST API
- **Storage**: Local file system for configurations
- **Integration**: Claude Desktop configuration management
- **Styling**: Tailwind CSS with custom components
- **Animations**: Framer Motion for smooth interactions
- **Icons**: Heroicons for consistent iconography
### Component Architecture
```
hana-mcp-ui/
โโโ ๐ bin/
โ โโโ cli.js # NPX entry point launcher
โโโ ๐ server/
โ โโโ index.js # Express backend server
โโโ ๐ src/
โ โโโ main.jsx # React entry point
โ โโโ App.jsx # Main app component
โ โโโ components/
โ โโโ ๐ MainApp.jsx # Main application container
โ โโโ ๐๏ธ ConfigurationModal.jsx # Server configuration modal
โ โโโ ๐ DatabaseListView.jsx # Database list management
โ โโโ ๐ค ClaudeDesktopView.jsx # Claude integration view
โ โโโ ๐ DashboardView.jsx # Dashboard overview
โ โโโ ๐ฏ EnvironmentSelector.jsx # Environment selection
โ โโโ ๐ฑ VerticalSidebar.jsx # Navigation sidebar
โ โโโ ๐จ ui/ # Reusable UI components
โ โโโ GlassWindow.jsx # Glass morphism container
โ โโโ StatusBadge.jsx # Status indicators
โ โโโ DatabaseTypeBadge.jsx # Database type badges
โ โโโ LoadingSpinner.jsx # Loading states
โโโ ๐ dist/ # Built React app (production)
โโโ ๐ data/ # Local configuration storage
โโโ ๐ package.json # Dependencies and scripts
โโโ โ๏ธ vite.config.js # Vite build configuration
โโโ ๐ index.html # HTML template
```
## ๐ Requirements
- **Node.js**: 18.0.0 or higher
- **Claude Desktop**: For deployment features
- **Browser**: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
## ๐ง Development
### Local Development
```bash
git clone https://github.com/hatrigt/hana-mcp-server.git
cd hana-mcp-server/hana-mcp-ui
npm install
npm run dev
```
### Build for Production
```bash
npm run build
npm run preview
```
## ๐ Performance
- **Startup**: < 5 seconds
- **API Response**: < 500ms
- **UI Interactions**: < 100ms
- **Bundle Size**: ~264KB (gzipped: ~83KB)
## ๐ Security
- **Local-only API** (no external connections)
- **Secure file access** patterns
- **Automatic backups** before configuration changes
- **Password masking** in UI forms
## ๐ค Support
- **Issues**: [GitHub Issues](https://github.com/hatrigt/hana-mcp-server/issues)
- **Main Package**: [HANA MCP Server](https://www.npmjs.com/package/hana-mcp-server)
- **Documentation**: [Full Documentation](https://github.com/hatrigt/hana-mcp-server#readme)
## ๐ License
MIT License - see LICENSE file for details.
