MCP Chatbot

git clone <mcp-chatbot-repo>
cd mcp-chatbot

npm install

# Copy example configuration
cp config/mcp.example.json config/mcp.json

{
  "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"
      }
    }
  }
}

npm run dev

# 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

{
  "filesystem": {
    "command": "npx",
    "args": [
      "-y",
      "@modelcontextprotocol/server-filesystem",
      "/allowed/path1"
    ]
  }
}

{
  "brave-search": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-brave-search"],
    "env": {
      "BRAVE_API_KEY": "<YOUR_API_KEY>"
    }
  }
}

<template>
  <div class="chat-container">
    <MessageHistory :messages="messages" />
    <ToolsPanel :tools="availableTools" />
    <FileUpload @upload="handleFileUpload" />
    <InputArea @send="sendMessage" />
  </div>
</template>

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

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

// Initialize session
await client.init()

// 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)

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

# Tailwind configuration
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

<!-- Custom Tool Component -->
<template>
  <div class="tool-component">
    <slot name="icon"></slot>
    <slot name="content"></slot>
  </div>
</template>

# Build for production
npm run build

# Start production server
npm run start

FROM node:16-alpine

WORKDIR /app
COPY . .

RUN npm install
RUN npm run build

ENV PORT=3050
EXPOSE 3050

CMD ["npm", "start"]