Skip to main content

​
Overview

MCP Chatbot is the frontend interface component that integrates with MCP Hub to provide an interactive chat experience. It allows users to interact with configured tools and resources through a user-friendly interface.

​
Features

  • Chat interface for AI interactions
  • File upload and handling
  • Tool integration
  • Resource management
  • Custom UI components

​
Installation

​
Prerequisites

  • Node.js 14+
  • Running MCP Hub instance
  • (Optional) MCP Enterprise for administration

​
Setup Steps

  1. Clone the Repository
git clone <mcp-chatbot-repo>
cd mcp-chatbot
  1. Install Dependencies
npm install
  1. Configure MCP Servers
# Copy example configuration
cp config/mcp.example.json config/mcp.json
  1. Edit Configuration
{
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "<YOUR_BRAVE_API_KEY>"
      }
    },
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/allowed/path1",
        "/allowed/path2"
      ]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "gh_xxxxxxxxxxxxxxx"
      }
    }
  }
}
  1. Start the Development Server
npm run dev
The chatbot interface will be available at http://localhost:3050.

​
Configuration Options

​
Environment Variables

# Server Configuration
PORT=3050
HOST=localhost

# MCP Hub Integration
MCP_HUB_URL=http://localhost:3000

# Authentication (if using MCP Enterprise)
AUTH_ENABLED=true
AUTH_SERVER=http://localhost:5199

​
Server Configuration

Configure different MCP servers in config/mcp.json:
  1. File System Server
{
  "filesystem": {
    "command": "npx",
    "args": [
      "-y",
      "@modelcontextprotocol/server-filesystem",
      "/allowed/path1"
    ]
  }
}
  1. Search Server
{
  "brave-search": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-brave-search"],
    "env": {
      "BRAVE_API_KEY": "<YOUR_API_KEY>"
    }
  }
}

​
Components

​
Chat Interface

The main chat interface (ChatUI.vue) provides:
  • Message history
  • Input area
  • Tool selection
  • File upload
  • Response formatting
<template>
  <div class="chat-container">
    <MessageHistory :messages="messages" />
    <ToolsPanel :tools="availableTools" />
    <FileUpload @upload="handleFileUpload" />
    <InputArea @send="sendMessage" />
  </div>
</template>

​
File Handling

File upload component (FileUploadZone.vue):
  • Drag and drop support
  • Multiple file upload
  • Progress tracking
  • File type validation

​
Resource Management

Resource modal (ResourcesModal.vue):
  • List available resources
  • Resource selection
  • Resource metadata
  • Access controls

​
Integration with MCP Hub

​
Initializing Connection

import { MCPClient } from '@/plugins/mcp'

const client = new MCPClient({
  baseURL: process.env.MCP_HUB_URL,
  tools: ['filesystem', 'brave-search']
})

// Initialize session
await client.init()

​
Using Tools

// File operations
await client.tools.filesystem.writeFile(path, content)
const data = await client.tools.filesystem.readFile(path)

// Search operations
const results = await client.tools.search.query(searchTerm)

​
Security

​
Authentication

When using with MCP Enterprise: 
// Configure auth plugin
export default defineNuxtConfig({
  modules: ['@/plugins/auth'],
  auth: {
    server: process.env.AUTH_SERVER,
    endpoints: {
      login: '/api/auth/login',
      logout: '/api/auth/logout'
    }
  }
})

​
File Security

  • File type validation
  • Size limits
  • Path validation
  • Sanitization

​
Customization

​
Styling

The chatbot uses Tailwind CSS for styling: 
# Tailwind configuration
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

​
Custom Components

Create custom components in the components directory: 
<!-- Custom Tool Component -->
<template>
  <div class="tool-component">
    <slot name="icon"></slot>
    <slot name="content"></slot>
  </div>
</template>

​
Troubleshooting

​
Common Issues

  1. Connection Errors
    • Verify MCP Hub is running
    • Check configuration URLs
    • Validate API keys
  2. File Upload Issues
    • Check file permissions
    • Verify allowed file types
    • Check size limits
  3. Tool Integration
    • Verify tool configuration
    • Check environment variables
    • Review server logs

​
Deployment

​
Production Build

# Build for production
npm run build

# Start production server
npm run start

​
Docker Deployment

FROM node:16-alpine

WORKDIR /app
COPY . .

RUN npm install
RUN npm run build

ENV PORT=3050
EXPOSE 3050

CMD ["npm", "start"]

​
Best Practices

  1. Error Handling
    • Implement proper error boundaries
    • Provide user feedback
    • Log errors appropriately
  2. Performance
    • Optimize file uploads
    • Implement caching
    • Lazy load components
  3. Security
    • Validate all inputs
    • Sanitize file paths
    • Implement rate limiting