@powerfm/libretime-mcp 0.1.6 → 0.2.0

package/dist/http/admin.js

@@ -1,44 +1,34 @@
 #!/usr/bin/env node
 // HTTP MCP server — full admin access (shows + analytics + file/user management).
 // Exposes POST /mcp using MCP Streamable HTTP transport.
-// Requires Authorization: Bearer <MCP_API_KEY> on every request.
+// Requires Authorization: Bearer <MCP_API_KEY> on every MCP request.
 // Intended for network clients (e.g. powerfm-agent). For Claude Desktop use stdio/admin.ts.
-import { createRequire } from 'module';
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
-import { createMcpExpressApp } from '@modelcontextprotocol/sdk/server/express.js';
-const { version } = createRequire(import.meta.url)('../../package.json');
+import '../env.js';
+import crypto from 'node:crypto';
 import { register as registerShows } from '../tools/shows/index.js';
 import { register as registerAnalytics } from '../tools/analytics/index.js';
 import { register as registerAdmin } from '../tools/admin/index.js';
+import { register as registerFiles } from '../tools/files/index.js';
+import { registerUploadEndpoint } from './upload.js';
+import { createHttpServer } from './server.js';
 const PORT = parseInt(process.env.MCP_PORT ?? '3000', 10);
-const API_KEY = process.env.MCP_API_KEY;
-if (!API_KEY) {
-    console.error('ERROR: MCP_API_KEY environment variable is required');
-    process.exit(1);
-}
-const app = createMcpExpressApp({ host: '0.0.0.0' });
-// Simple API key middleware — checks Authorization: Bearer <key>
-app.use('/mcp', (req, res, next) => {
-    const auth = req.headers['authorization'];
-    if (!auth || auth !== `Bearer ${API_KEY}`) {
-        res.status(401).json({ error: 'Unauthorized' });
-        return;
-    }
-    next();
-});
-// Stateless transport — a fresh McpServer per request keeps things simple
-// and avoids session management complexity for now
-app.post('/mcp', async (req, res) => {
-    const server = new McpServer({ name: 'libretime-mcp-admin', version });
-    registerShows(server);
-    registerAnalytics(server);
-    registerAdmin(server);
-    const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
-    await server.connect(transport);
-    await transport.handleRequest(req, res, req.body);
-});
-app.listen(PORT, '0.0.0.0', () => {
-    console.error(`LibreTime MCP admin HTTP server listening on port ${PORT}`);
-    console.error('Endpoint: POST /mcp  (Authorization: Bearer <MCP_API_KEY>)');
+const PUBLIC_URL = process.env.MCP_PUBLIC_URL ?? `http://localhost:${PORT}`;
+// Scoped upload token — generated once at startup, rotates on restart.
+const UPLOAD_TOKEN = crypto.randomBytes(32).toString('hex');
+// uploadUrl is set by setupRoutes (which runs at startup) and read by register
+// (which runs per-request). setupRoutes always runs first, so this is safe.
+let uploadUrl;
+createHttpServer({
+    name: 'libretime-mcp-admin',
+    defaultPort: 3000,
+    setupRoutes: (app) => {
+        uploadUrl = registerUploadEndpoint(app, PUBLIC_URL, UPLOAD_TOKEN);
+        console.error(`Upload:   POST /upload  (X-Upload-Token: <per-startup token>)`);
+    },
+    register: (server) => {
+        registerShows(server);
+        registerAnalytics(server);
+        registerAdmin(server);
+        registerFiles(server, uploadUrl, UPLOAD_TOKEN);
+    },
 });

package/dist/http/client.js

@@ -3,38 +3,13 @@
 // Exposes POST /mcp using MCP Streamable HTTP transport.
 // Requires Authorization: Bearer <MCP_API_KEY> on every request.
 // Intended for network clients. For Claude Desktop use stdio/client.ts.
-import { createRequire } from 'module';
-import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
-import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
-import { createMcpExpressApp } from '@modelcontextprotocol/sdk/server/express.js';
+import '../env.js';
 import { register as registerShows } from '../tools/shows/index.js';
-const { version } = createRequire(import.meta.url)('../../package.json');
-const PORT = parseInt(process.env.MCP_PORT ?? '3001', 10);
-const API_KEY = process.env.MCP_API_KEY;
-if (!API_KEY) {
-    console.error('ERROR: MCP_API_KEY environment variable is required');
-    process.exit(1);
-}
-const app = createMcpExpressApp({ host: '0.0.0.0' });
-// Simple API key middleware — checks Authorization: Bearer <key>
-app.use('/mcp', (req, res, next) => {
-    const auth = req.headers['authorization'];
-    if (!auth || auth !== `Bearer ${API_KEY}`) {
-        res.status(401).json({ error: 'Unauthorized' });
-        return;
-    }
-    next();
-});
-// Stateless transport — a fresh McpServer per request keeps things simple
-// and avoids session management complexity for now
-app.post('/mcp', async (req, res) => {
-    const server = new McpServer({ name: 'libretime-mcp-client', version });
-    registerShows(server);
-    const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
-    await server.connect(transport);
-    await transport.handleRequest(req, res, req.body);
-});
-app.listen(PORT, '0.0.0.0', () => {
-    console.error(`LibreTime MCP client HTTP server listening on port ${PORT}`);
-    console.error('Endpoint: POST /mcp  (Authorization: Bearer <MCP_API_KEY>)');
+import { createHttpServer } from './server.js';
+createHttpServer({
+    name: 'libretime-mcp-client',
+    defaultPort: 3001,
+    register: (server) => {
+        registerShows(server);
+    },
 });

package/dist/http/server.js

@@ -0,0 +1,72 @@
+import { createRequire } from 'module';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StreamableHTTPServerTransport } from '@modelcontextprotocol/sdk/server/streamableHttp.js';
+import { createMcpExpressApp } from '@modelcontextprotocol/sdk/server/express.js';
+import cors from 'cors';
+import helmet from 'helmet';
+import rateLimit from 'express-rate-limit';
+import morgan from 'morgan';
+const { version } = createRequire(import.meta.url)('../../package.json');
+export function createHttpServer({ name, defaultPort, register, setupRoutes }) {
+    const PORT = parseInt(process.env.MCP_PORT ?? String(defaultPort), 10);
+    const API_KEY = process.env.MCP_API_KEY;
+    const AUTH_DISABLED = process.env.DISABLE_AUTH === 'true';
+    if (!AUTH_DISABLED && !API_KEY) {
+        console.error('ERROR: MCP_API_KEY environment variable is required');
+        process.exit(1);
+    }
+    const app = createMcpExpressApp({ host: '0.0.0.0' });
+    // Request logging — 'dev' in development (coloured, concise),
+    // 'combined' in production (Apache format: IP, method, path, status, size, user-agent).
+    // Runs first so every request is logged regardless of auth outcome.
+    const logFormat = process.env.NODE_ENV === 'production' ? 'combined' : 'dev';
+    app.use(morgan(logFormat));
+    // Security headers — sets ~14 protective HTTP headers automatically.
+    // contentSecurityPolicy disabled: the MCP SDK sets its own and they'd conflict.
+    app.use(helmet({ contentSecurityPolicy: false }));
+    app.use(cors({ origin: process.env.CORS_ORIGIN ?? true, credentials: true }));
+    // Rate limiting — max 120 requests per IP per minute.
+    // Protects against runaway clients and accidental hammering.
+    // /ping is excluded so uptime monitors never get blocked.
+    app.use(/^\/(mcp|upload)/, rateLimit({ windowMs: 60_000, max: 120 }));
+    // Rate limiting — max 120 requests per IP per minute.
+    // Protects against runaway clients and accidental hammering.
+    // /ping is excluded so uptime monitors never get blocked.
+    app.use(/^\/(mcp|upload)/, rateLimit({ windowMs: 60_000, max: 120 }));
+    // Health check — no auth required, used by uptime monitors and load balancers
+    app.get('/ping', (_req, res) => {
+        res.json({ status: 'ok' });
+    });
+    // Extra routes (e.g. /upload) with their own auth — must come before the MCP auth guard
+    setupRoutes?.(app);
+    // API key guard — protects all /mcp requests
+    app.use('/mcp', (req, res, next) => {
+        if (AUTH_DISABLED)
+            return next();
+        const auth = req.headers['authorization'];
+        if (!auth || auth !== `Bearer ${API_KEY}`) {
+            res.status(401).json({ error: 'Unauthorized' });
+            return;
+        }
+        next();
+    });
+    // Stateless transport — a fresh McpServer per request keeps things simple
+    // and avoids session management complexity for now.
+    app.all('/mcp', async (req, res) => {
+        // Log which MCP method and tool was called — morgan only sees POST /mcp
+        const method = req.body?.method;
+        const toolName = req.body?.params?.name;
+        if (method)
+            console.error(`[mcp] ${method}${toolName ? ` tool=${toolName}` : ''}`);
+        const server = new McpServer({ name, version });
+        register(server);
+        const transport = new StreamableHTTPServerTransport({ sessionIdGenerator: undefined });
+        await server.connect(transport);
+        await transport.handleRequest(req, res, req.body);
+    });
+    app.listen(PORT, '0.0.0.0', () => {
+        console.error(`LibreTime MCP ${name} HTTP server listening on port ${PORT}`);
+        console.error(`Health:   GET  /ping`);
+        console.error(`Endpoint: POST /mcp  (Authorization: Bearer <MCP_API_KEY>)`);
+    });
+}

package/dist/http/upload.js

@@ -0,0 +1,73 @@
+import cors from 'cors';
+/**
+ * Registers POST /upload on the given Express app.
+ *
+ * The React UI posts audio files here directly (bypassing the MCP protocol).
+ * The body is buffered in memory before forwarding to LibreTime.
+ *
+ * TODO: switch back to streaming (Readable.toWeb) for large show files once
+ * the basic flow is confirmed working end-to-end.
+ *
+ * Auth: X-Upload-Token header must match the provided uploadToken.
+ *
+ * Returns the full upload URL so callers can pass it to registerFiles().
+ */
+export function registerUploadEndpoint(app, publicUrl, uploadToken) {
+    // Explicit CORS for the upload route — must allow X-Upload-Token so the
+    // browser's preflight passes before sending the actual file.
+    const uploadCors = cors({
+        origin: process.env.CORS_ORIGIN ?? true,
+        credentials: true,
+        allowedHeaders: ['Content-Type', 'X-Upload-Token'],
+    });
+    app.options('/upload', uploadCors);
+    app.post('/upload', uploadCors, async (req, res) => {
+        const totalStart = Date.now();
+        const token = req.headers['x-upload-token'];
+        if (!token || token !== uploadToken) {
+            console.error(`[upload] status=401 total_ms=${Date.now() - totalStart}`);
+            res.status(401).json({ error: 'Unauthorized' });
+            return;
+        }
+        const BASE_URL = process.env.LIBRETIME_URL ?? '';
+        const USER = process.env.LIBRETIME_USER ?? '';
+        const PASS = process.env.LIBRETIME_PASS ?? '';
+        const libreAuth = 'Basic ' + Buffer.from(`${USER}:${PASS}`).toString('base64');
+        const libreUrl = new URL('/api/v2/files', BASE_URL).toString();
+        try {
+            const body = await new Promise((resolve, reject) => {
+                const chunks = [];
+                req.on('data', (chunk) => chunks.push(chunk));
+                req.on('end', () => resolve(Buffer.concat(chunks)));
+                req.on('error', reject);
+            });
+            const sizeMb = (body.length / 1024 / 1024).toFixed(2);
+            const libreStart = Date.now();
+            const response = await fetch(libreUrl, {
+                method: 'POST',
+                headers: {
+                    Authorization: libreAuth,
+                    Accept: 'application/json',
+                    'Content-Type': req.headers['content-type'],
+                    'Content-Length': String(body.length),
+                },
+                body: new Uint8Array(body),
+            });
+            const libreMs = Date.now() - libreStart;
+            const totalMs = Date.now() - totalStart;
+            if (!response.ok) {
+                const detail = await response.text();
+                console.error(`[upload] size=${sizeMb}mb libretime_ms=${libreMs} total_ms=${totalMs} status=${response.status} error="${detail}"`);
+                res.status(502).json({ error: `LibreTime error: ${response.status}`, detail });
+                return;
+            }
+            console.error(`[upload] size=${sizeMb}mb libretime_ms=${libreMs} total_ms=${totalMs} status=${response.status}`);
+            res.json(await response.json());
+        }
+        catch (err) {
+            console.error(`[upload] total_ms=${Date.now() - totalStart} status=500 error="${err instanceof Error ? err.message : String(err)}"`);
+            res.status(500).json({ error: err instanceof Error ? err.message : String(err) });
+        }
+    });
+    return `${publicUrl}/upload`;
+}

package/dist/tools/admin/get_users.js

@@ -8,8 +8,8 @@ export function register(server) {
     }, async () => {
         const raw = await libreGet('/api/v2/users');
         const users = z.array(UserSchema).parse(raw);
-        const trimmed = users.map(({ id, username, first_name, last_name, email, type }) => ({
-            id, username, first_name, last_name, email, role: type,
+        const trimmed = users.map(({ id, username, first_name, last_name, email, role }) => ({
+            id, username, first_name, last_name, email, role,
         }));
         return toolText(trimmed);
     });

package/dist/tools/admin/types.js

@@ -5,7 +5,7 @@ export const UserSchema = z.object({
     first_name: z.string(),
     last_name: z.string(),
     email: z.string(),
-    type: z.string(),
+    role: z.string(),
 });
 export const ShowHostSchema = z.object({
     id: z.number(),

package/dist/tools/analytics/get_listener_counts.js

@@ -4,8 +4,11 @@ import { toolText } from '../../tool-response.js';
 import { ListenerCountSchema, MountNameSchema } from './types.js';
 export function register(server) {
     server.registerTool('get_listener_counts', {
-        description: 'Get listener count history for PowerFM streams. Returns counts per mount point (stream URL) with timestamps. Useful for understanding peak listening times and audience size.',
-    }, async () => {
+        description: 'Get listener count history for PowerFM streams. Returns the most recent entries per mount point with timestamps. Useful for understanding peak listening times and audience size.',
+        inputSchema: {
+            limit: z.number().int().min(1).max(500).default(100).describe('Number of most recent entries to return (default 100, max 500)'),
+        },
+    }, async ({ limit }) => {
         const [rawCounts, rawMounts] = await Promise.all([
             libreGet('/api/v2/listener-counts'),
             libreGet('/api/v2/mount-names'),
@@ -13,7 +16,9 @@ export function register(server) {
         const counts = z.array(ListenerCountSchema).parse(rawCounts);
         const mounts = z.array(MountNameSchema).parse(rawMounts);
         const mountMap = new Map(mounts.map((m) => [m.id, m.mount_name]));
-        const enriched = counts.map(({ id, listener_count, timestamp, mount_name }) => ({
+        const enriched = counts
+            .slice(-limit)
+            .map(({ id, listener_count, timestamp, mount_name }) => ({
             id,
             listener_count,
             timestamp,

package/dist/tools/analytics/get_playout_history.js

@@ -19,8 +19,10 @@ export function register(server) {
         const history = z.array(PlayoutHistorySchema).parse(rawHistory);
         // Collect unique file IDs then fetch metadata in parallel
         const fileIds = [...new Set(history.map((h) => h.file).filter((id) => id !== null))];
-        const rawFiles = await Promise.all(fileIds.map((id) => libreGet(`/api/v2/files/${id}`)));
-        const files = rawFiles.map((f) => FileMetadataSchema.parse(f));
+        const rawFiles = await Promise.allSettled(fileIds.map((id) => libreGet(`/api/v2/files/${id}`)));
+        const files = rawFiles
+            .map((r) => r.status === 'fulfilled' ? FileMetadataSchema.safeParse(r.value) : null)
+            .flatMap((r) => (r?.success ? [r.data] : []));
         const fileMap = new Map(files.map((f) => [f.id, f]));
         const enriched = history.map(({ id, starts, ends, file, instance }) => {
             const meta = file !== null ? fileMap.get(file) : undefined;

package/dist/tools/analytics/index.js

@@ -1,6 +1,4 @@
-import { register as registerGetListenerCounts } from './get_listener_counts.js';
 import { register as registerGetPlayoutHistory } from './get_playout_history.js';
 export function register(server) {
-    registerGetListenerCounts(server);
     registerGetPlayoutHistory(server);
 }

package/dist/tools/files/index.js

@@ -1,10 +1,10 @@
-import { register as registerSearchFiles } from '../files/search_files.js';
-import { register as registerUploadFile } from '../files/upload_file.js';
-import { register as registerUpdateFileMetadata } from '../files/update_file_metadata.js';
-import { register as registerDeleteFile } from '../files/delete_file.js';
-export function register(server) {
+import { register as registerSearchFiles } from './search_files.js';
+import { register as registerUploadFile } from './upload_file.js';
+import { register as registerUpdateFileMetadata } from './update_file_metadata.js';
+import { register as registerDeleteFile } from './delete_file.js';
+export function register(server, uploadUrl, uploadToken) {
     registerSearchFiles(server);
-    registerUploadFile(server);
+    registerUploadFile(server, uploadUrl, uploadToken);
     registerUpdateFileMetadata(server);
     registerDeleteFile(server);
 }

package/dist/tools/files/types.js

@@ -1,4 +1,10 @@
 import { z } from 'zod';
+export const LibrarySchema = z.object({
+    id: z.number(),
+    name: z.string().nullable(),
+    code: z.string(),
+    enabled: z.boolean(),
+});
 export const LibreFileSchema = z.object({
     id: z.number(),
     name: z.string(),

package/dist/tools/files/upload_file.js

@@ -1,30 +1,67 @@
 import { z } from 'zod';
-import { libreUpload } from '../../libretime.js';
+import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE, } from '@modelcontextprotocol/ext-apps/server';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { libreGet, libreUpload } from '../../libretime.js';
 import { toolText } from '../../tool-response.js';
-import { LibreFileSchema } from './types.js';
-export function register(server) {
-    server.registerTool('upload_file', {
-        description: 'Upload an audio file to the LibreTime media library from a URL. If no URL is provided, returns an action signal so the client can trigger a local file upload workflow. Optionally provide metadata such as track title, artist, album, and genre.',
+import { LibreFileSchema, LibrarySchema } from './types.js';
+// When running via tsx (dev): __dirname is src/tools/files/ → walk up to project root, then into dist/
+// When running compiled:      __dirname is dist/tools/files/ → walk up two levels to dist/
+const HTML_PATH = import.meta.filename.endsWith('.ts')
+    ? path.join(import.meta.dirname, '../../../dist/apps/upload-file.html')
+    : path.join(import.meta.dirname, '../../apps/upload-file.html');
+const resourceUri = 'ui://libretime/upload-file.html';
+const metadataFields = {
+    track_title: z.string().optional().describe('Track title'),
+    artist_name: z.string().optional().describe('Artist name'),
+    album_title: z.string().optional().describe('Album title'),
+    genre: z.string().optional().describe('Genre'),
+    library: z.number().optional().describe('Track type / library ID'),
+};
+export function register(server, uploadUrl, uploadToken) {
+    registerAppTool(server, 'upload_file', {
+        description: 'Upload an audio file to the LibreTime media library. When no URL is provided, opens a file picker. Optionally pre-fill metadata such as track title, artist, album, and genre.',
         inputSchema: {
             url: z.string().optional().describe('Publicly accessible URL of the audio file to upload'),
-            track_title: z.string().optional().describe('Track title'),
-            artist_name: z.string().optional().describe('Artist name'),
-            album_title: z.string().optional().describe('Album title'),
-            genre: z.string().optional().describe('Genre'),
+            ...metadataFields,
         },
-    }, async ({ url, track_title, artist_name, album_title, genre }) => {
+        _meta: { ui: { resourceUri } },
+    }, async ({ url, track_title, artist_name, album_title, genre, library }) => {
         if (!url) {
-            return toolText({ status: 'upload_required', action: 'file_upload' });
+            // Fetch track type options for the UI dropdown
+            let libraries = [];
+            try {
+                const raw = await libreGet('/api/v2/libraries');
+                libraries = LibrarySchema.array().parse(raw);
+            }
+            catch {
+                // Non-fatal — UI will just show no dropdown
+            }
+            // No URL — hand off to the UI.
+            // If this is the HTTP server, include an upload_url so the UI can POST directly.
+            // If this is stdio, upload_url is null and the UI will ask for a URL instead.
+            return toolText({
+                status: uploadUrl ? 'upload_ready' : 'upload_required',
+                upload_url: uploadUrl ?? null,
+                upload_token: uploadToken ?? null,
+                libraries,
+            });
         }
         let fileResponse;
         try {
             fileResponse = await fetch(url);
             if (!fileResponse.ok) {
-                return toolText({ status: 'error', reason: `Could not fetch file: ${fileResponse.status} ${fileResponse.statusText}` });
+                return toolText({
+                    status: 'error',
+                    reason: `Could not fetch file: ${fileResponse.status} ${fileResponse.statusText}`,
+                });
             }
         }
         catch (err) {
-            return toolText({ status: 'error', reason: `Failed to reach URL: ${err instanceof Error ? err.message : String(err)}` });
+            return toolText({
+                status: 'error',
+                reason: `Failed to reach URL: ${err instanceof Error ? err.message : String(err)}`,
+            });
         }
         const fileName = url.split('/').pop()?.split('?')[0] || 'upload';
         const blob = await fileResponse.blob();
@@ -38,13 +75,35 @@ export function register(server) {
             formData.append('album_title', album_title);
         if (genre)
             formData.append('genre', genre);
+        if (library)
+            formData.append('library', String(library));
         try {
             const raw = await libreUpload('/api/v2/files', formData);
             const file = LibreFileSchema.parse(raw);
             return toolText({ status: 'success', file });
         }
         catch (err) {
-            return toolText({ status: 'error', reason: `LibreTime upload failed: ${err instanceof Error ? err.message : String(err)}` });
+            return toolText({
+                status: 'error',
+                reason: `LibreTime upload failed: ${err instanceof Error ? err.message : String(err)}`,
+            });
         }
     });
+    // Serve the bundled React app HTML.
+    // When an upload URL is configured, allow the iframe to connect to it (CSP connect-src).
+    registerAppResource(server, resourceUri, resourceUri, { mimeType: RESOURCE_MIME_TYPE }, async () => {
+        const html = await fs.readFile(HTML_PATH, 'utf-8');
+        return {
+            contents: [
+                {
+                    uri: resourceUri,
+                    mimeType: RESOURCE_MIME_TYPE,
+                    text: html,
+                    ...(uploadUrl && {
+                        _meta: { ui: { csp: { connectDomains: [uploadUrl] } } },
+                    }),
+                },
+            ],
+        };
+    });
 }

package/dist/tools/shows/types.js

@@ -8,12 +8,17 @@ export const ShowSchema = z.object({
 });
 export const ScheduleItemSchema = z.object({
     id: z.number(),
-    starts: z.string(),
-    ends: z.string(),
-    show_id: z.number(),
-    show_name: z.string(),
+    starts_at: z.string(),
+    ends_at: z.string(),
+    instance: z.number(),
+    file: z.number().nullable(),
     broadcasted: z.number(),
-});
-export const StreamStateSchema = z.object({
-    source_enabled: z.boolean(),
+    played: z.boolean(),
 }).passthrough();
+export const StreamStateSchema = z.object({
+    input_main_connected: z.boolean(),
+    input_main_streaming: z.boolean(),
+    input_show_connected: z.boolean(),
+    input_show_streaming: z.boolean(),
+    schedule_streaming: z.boolean(),
+});

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@powerfm/libretime-mcp",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
+  "license": "GPL-3.0",
   "description": "MCP server for LibreTime radio station — connect Claude to your broadcast schedule, media library, and analytics",
+  "keywords": [
+    "mcp",
+    "modelcontextprotocol",
+    "libretime",
+    "radio",
+    "claude"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nelsonra/libretime-mcp.git"
@@ -20,13 +28,15 @@
     "README.md"
   ],
   "scripts": {
-    "dev:client": "tsx --env-file=.env watch src/stdio/client.ts",
-    "dev:admin": "tsx --env-file=.env watch src/stdio/admin.ts",
-    "dev:client-http": "tsx --env-file=.env watch src/http/client.ts",
-    "dev:admin-http": "tsx --env-file=.env watch src/http/admin.ts",
+    "dev:client": "tsx watch --env-file=.env src/stdio/client.ts",
+    "dev:admin": "tsx watch --env-file=.env src/stdio/admin.ts",
+    "dev:client-http": "tsx watch --env-file=.env src/http/client.ts",
+    "dev:admin-http": "concurrently \"npm run watch:app\" \"tsx watch --env-file=.env src/http/admin.ts\"",
     "clean": "rm -rf dist",
-    "build": "npm run clean && tsc",
-    "prepublishOnly": "npm run build",
+    "build:app": "cross-env INPUT=apps/upload-file.html vite build",
+    "watch:app": "cross-env NODE_ENV=development INPUT=apps/upload-file.html vite build --watch",
+    "build": "npm run clean && npm run build:app && tsc",
+    "prepublishOnly": "npm run build && npm test",
     "publish:patch": "npm version patch && npm publish --access public",
     "publish:minor": "npm version minor && npm publish --access public",
     "start:client": "node --env-file=.env dist/stdio/client.js",
@@ -34,19 +44,39 @@
     "start:client-http": "node --env-file=.env dist/http/client.js",
     "start:admin-http": "node --env-file=.env dist/http/admin.js",
     "generate:key": "node -e \"console.log(require('crypto').randomBytes(32).toString('hex'))\"",
+    "inspect:client": "npx @modelcontextprotocol/inspector tsx --env-file=.env src/stdio/client.ts",
+    "inspect:admin": "npx @modelcontextprotocol/inspector tsx --env-file=.env src/stdio/admin.ts",
+    "inspect:admin-http": "npx @modelcontextprotocol/inspector --transport http --server-url http://localhost:3000/mcp --header \"Authorization: Bearer $MCP_API_KEY\"",
+    "inspect:client-http": "npx @modelcontextprotocol/inspector --transport http --server-url http://localhost:3001/mcp --header \"Authorization: Bearer $MCP_API_KEY\"",
     "test": "vitest run",
     "test:watch": "vitest"
   },
   "dependencies": {
+    "@modelcontextprotocol/ext-apps": "~1.3.2",
     "@modelcontextprotocol/sdk": "^1.0.0",
+    "cors": "~2.8.6",
     "express": "~5.2.1",
+    "express-rate-limit": "~8.3.2",
+    "helmet": "~8.1.0",
+    "morgan": "~1.10.1",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@types/cors": "~2.8.19",
     "@types/express": "~5.0.6",
+    "@types/morgan": "~1.9.10",
     "@types/node": "^22.0.0",
+    "@types/react": "~19.2.14",
+    "@types/react-dom": "~19.2.3",
+    "@vitejs/plugin-react": "~6.0.1",
+    "concurrently": "~9.2.1",
+    "cross-env": "~10.1.0",
     "tsx": "^4.19.0",
     "typescript": "^5.6.0",
+    "vite": "~8.0.3",
+    "vite-plugin-singlefile": "~2.3.2",
     "vitest": "~4.1.1"
   }
 }