frontend/README.md
A modern Vue 3 + TypeScript control panel for MCPProxy with DaisyUI styling and real-time updates.
frontend/
โโโ public/ # Static assets
โโโ src/
โ โโโ components/ # Reusable Vue components
โ โ โโโ NavBar.vue # Navigation bar
โ โ โโโ ServerCard.vue # Server status card
โ โ โโโ ToastContainer.vue # Toast notifications
โ โโโ services/ # API service layer
โ โ โโโ api.ts # HTTP client for backend communication
โ โโโ stores/ # Pinia state management
โ โ โโโ servers.ts # Server management state
โ โ โโโ system.ts # System-wide state and notifications
โ โ โโโ tools.ts # Tool search and management
โ โโโ types/ # TypeScript type definitions
โ โ โโโ api.ts # API response types
โ โ โโโ index.ts # Shared types
โ โโโ views/ # Page components
โ โ โโโ Dashboard.vue # Main dashboard
โ โ โโโ Servers.vue # Server management
โ โ โโโ Tools.vue # Tool discovery
โ โ โโโ Search.vue # Tool search
โ โ โโโ Settings.vue # Configuration
โ โโโ App.vue # Root component
โ โโโ main.ts # Application entry point
โ โโโ router.ts # Vue Router configuration
โโโ package.json # Dependencies and scripts
โโโ vite.config.ts # Vite build configuration
โโโ vitest.config.ts # Testing configuration
โโโ eslint.config.js # ESLint configuration
โโโ tailwind.config.cjs # TailwindCSS + DaisyUI config
โโโ README.md # This file
# Install dependencies
npm install
# Start development server
npm run dev
The development server will start at http://localhost:3000 with hot reload enabled.
# Development
npm run dev # Start Vite dev server with hot reload
npm run build # Build for production
npm run preview # Preview production build locally
# Code Quality
npm run type-check # TypeScript type checking
npm run lint # ESLint with auto-fix
npm run lint --fix # Fix ESLint issues automatically
# Testing
npm run test # Run tests with Vitest
npm run test:ui # Run tests with Vitest UI
npm run coverage # Generate test coverage report
The frontend integrates with the Go backend build system via the root Makefile:
# Development workflow
make backend-dev # Build backend in development mode
make frontend-dev # Start frontend dev server
# Production build
make build # Build both frontend and backend
make frontend-build # Build frontend only
Development Mode (make backend-dev):
frontend/dist/:3000 with hot reload:8080Production Mode (make build):
/ui/ routeDisplays server status with actions:
Global notification system:
Application navigation:
servers.ts - Server Management:
const serversStore = useServersStore()
await serversStore.fetchServers()
serversStore.enableServer('server-name')
tools.ts - Tool Discovery:
const toolsStore = useToolsStore()
await toolsStore.searchTools('create issue')
system.ts - Global State:
const systemStore = useSystemStore()
systemStore.showToast('Success!', 'success')
The api.ts service provides typed methods for backend communication:
import apiService from '@/services/api'
// Get all servers
const response = await apiService.getServers()
if (response.success) {
console.log(response.data.servers)
}
// Search tools
const results = await apiService.searchTools('github', 5)
Server-Sent Events provide live updates:
// Auto-reconnecting SSE client
const eventSource = apiService.subscribeToEvents((event) => {
if (event.type === 'server_status') {
serversStore.updateServerStatus(event.data)
}
})
import { mount } from '@vue/test-utils'
import { createPinia } from 'pinia'
import ServerCard from '@/components/ServerCard.vue'
test('displays server info', () => {
const wrapper = mount(ServerCard, {
props: { server: mockServer },
global: { plugins: [createPinia()] }
})
expect(wrapper.text()).toContain('Connected')
})
import { vi } from 'vitest'
import apiService from '@/services/api'
test('makes API request', async () => {
global.fetch = vi.fn().mockResolvedValue({
ok: true,
json: () => ({ success: true, data: [] })
})
const result = await apiService.getServers()
expect(result.success).toBe(true)
})
interface APIResponse<T> {
success: boolean
data?: T
error?: string
}
interface Server {
name: string
protocol: 'http' | 'stdio' | 'streamable-http'
enabled: boolean
connected: boolean
tool_count: number
url?: string
}
interface ServerCardProps {
server: Server
showActions?: boolean
}
The frontend is embedded into the Go binary during production builds:
npm run build creates optimized bundles in dist/dist/ to web/frontend/dist///go:embed all:frontend/dist includes files in binary/ui/ routeDevelopment:
VITE_API_BASE_URL: Backend API URL (default: http://localhost:8080)Production:
vite.config.tstailwind.config.cjsvitest.config.tssrc/components/src/types/src/services/api.ts for new endpoints__tests__/ directories<script setup> syntaxnpm run test)npm run type-check)npm run lint)npm run build)For backend integration details, see the main project README.md and CLAUDE.md.