mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-09 19:09:45 +00:00
Merge pull request #142 from siteboon/feature/mcp-project
feat: Local/Project MCPs and Import from JSON
This commit is contained in:
viper151
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "claude-code-ui",
|
||||
"version": "1.5.0",
|
||||
"version": "1.6.0",
|
||||
"description": "A web-based UI for Claude Code CLI",
|
||||
"type": "module",
|
||||
"main": "server/index.js",
|
||||
|
||||
@@ -58,16 +58,16 @@ router.get('/cli/list', async (req, res) => {
|
||||
// POST /api/mcp/cli/add - Add MCP server using Claude CLI
|
||||
router.post('/cli/add', async (req, res) => {
|
||||
try {
|
||||
const { name, type = 'stdio', command, args = [], url, headers = {}, env = {} } = req.body;
|
||||
const { name, type = 'stdio', command, args = [], url, headers = {}, env = {}, scope = 'user', projectPath } = req.body;
|
||||
|
||||
console.log('➕ Adding MCP server using Claude CLI (user scope):', name);
|
||||
console.log(`➕ Adding MCP server using Claude CLI (${scope} scope):`, name);
|
||||
|
||||
const { spawn } = await import('child_process');
|
||||
|
||||
let cliArgs = ['mcp', 'add'];
|
||||
|
||||
// Always add with user scope (global availability)
|
||||
cliArgs.push('--scope', 'user');
|
||||
// Add scope flag
|
||||
cliArgs.push('--scope', scope);
|
||||
|
||||
if (type === 'http') {
|
||||
cliArgs.push('--transport', 'http', name, url);
|
||||
@@ -96,9 +96,17 @@ router.post('/cli/add', async (req, res) => {
|
||||
|
||||
console.log('🔧 Running Claude CLI command:', 'claude', cliArgs.join(' '));
|
||||
|
||||
const process = spawn('claude', cliArgs, {
|
||||
// For local scope, we need to run the command in the project directory
|
||||
const spawnOptions = {
|
||||
stdio: ['pipe', 'pipe', 'pipe']
|
||||
});
|
||||
};
|
||||
|
||||
if (scope === 'local' && projectPath) {
|
||||
spawnOptions.cwd = projectPath;
|
||||
console.log('📁 Running in project directory:', projectPath);
|
||||
}
|
||||
|
||||
const process = spawn('claude', cliArgs, spawnOptions);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
@@ -133,7 +141,7 @@ router.post('/cli/add', async (req, res) => {
|
||||
// POST /api/mcp/cli/add-json - Add MCP server using JSON format
|
||||
router.post('/cli/add-json', async (req, res) => {
|
||||
try {
|
||||
const { name, jsonConfig } = req.body;
|
||||
const { name, jsonConfig, scope = 'user', projectPath } = req.body;
|
||||
|
||||
console.log('➕ Adding MCP server using JSON format:', name);
|
||||
|
||||
@@ -172,8 +180,8 @@ router.post('/cli/add-json', async (req, res) => {
|
||||
|
||||
const { spawn } = await import('child_process');
|
||||
|
||||
// Build the command: claude mcp add-json --scope user <name> '<json>'
|
||||
const cliArgs = ['mcp', 'add-json', '--scope', 'user', name];
|
||||
// Build the command: claude mcp add-json --scope <scope> <name> '<json>'
|
||||
const cliArgs = ['mcp', 'add-json', '--scope', scope, name];
|
||||
|
||||
// Add the JSON config as a properly formatted string
|
||||
const jsonString = JSON.stringify(parsedConfig);
|
||||
@@ -181,9 +189,17 @@ router.post('/cli/add-json', async (req, res) => {
|
||||
|
||||
console.log('🔧 Running Claude CLI command:', 'claude', cliArgs[0], cliArgs[1], cliArgs[2], cliArgs[3], cliArgs[4], jsonString);
|
||||
|
||||
const process = spawn('claude', cliArgs, {
|
||||
// For local scope, we need to run the command in the project directory
|
||||
const spawnOptions = {
|
||||
stdio: ['pipe', 'pipe', 'pipe']
|
||||
});
|
||||
};
|
||||
|
||||
if (scope === 'local' && projectPath) {
|
||||
spawnOptions.cwd = projectPath;
|
||||
console.log('📁 Running in project directory:', projectPath);
|
||||
}
|
||||
|
||||
const process = spawn('claude', cliArgs, spawnOptions);
|
||||
|
||||
let stdout = '';
|
||||
let stderr = '';
|
||||
|
||||
@@ -635,6 +635,7 @@ function AppContent() {
|
||||
<ToolsSettings
|
||||
isOpen={showToolsSettings}
|
||||
onClose={() => setShowToolsSettings(false)}
|
||||
projects={projects}
|
||||
/>
|
||||
|
||||
{/* Version Upgrade Modal */}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from './ui/button';
|
||||
import { Input } from './ui/input';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import { Badge } from './ui/badge';
|
||||
import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Play, Globe, Terminal, Zap } from 'lucide-react';
|
||||
import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen } from 'lucide-react';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
|
||||
function ToolsSettings({ isOpen, onClose }) {
|
||||
function ToolsSettings({ isOpen, onClose, projects = [] }) {
|
||||
const { isDarkMode, toggleDarkMode } = useTheme();
|
||||
const [allowedTools, setAllowedTools] = useState([]);
|
||||
const [disallowedTools, setDisallowedTools] = useState([]);
|
||||
@@ -17,14 +16,14 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
const [saveStatus, setSaveStatus] = useState(null);
|
||||
const [projectSortOrder, setProjectSortOrder] = useState('name');
|
||||
|
||||
// MCP server management state
|
||||
const [mcpServers, setMcpServers] = useState([]);
|
||||
const [showMcpForm, setShowMcpForm] = useState(false);
|
||||
const [editingMcpServer, setEditingMcpServer] = useState(null);
|
||||
const [mcpFormData, setMcpFormData] = useState({
|
||||
name: '',
|
||||
type: 'stdio',
|
||||
scope: 'user', // Always use user scope
|
||||
scope: 'user',
|
||||
projectPath: '', // For local scope
|
||||
config: {
|
||||
command: '',
|
||||
args: [],
|
||||
@@ -42,7 +41,6 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
const [mcpToolsLoading, setMcpToolsLoading] = useState({});
|
||||
const [activeTab, setActiveTab] = useState('tools');
|
||||
const [jsonValidationError, setJsonValidationError] = useState('');
|
||||
|
||||
// Common tool patterns
|
||||
const commonTools = [
|
||||
'Bash(git log:*)',
|
||||
@@ -153,6 +151,8 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
body: JSON.stringify({
|
||||
name: serverData.name,
|
||||
type: serverData.type,
|
||||
scope: serverData.scope,
|
||||
projectPath: serverData.projectPath,
|
||||
command: serverData.config?.command,
|
||||
args: serverData.config?.args || [],
|
||||
url: serverData.config?.url,
|
||||
@@ -285,8 +285,9 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
setProjectSortOrder('name');
|
||||
}
|
||||
|
||||
// Load MCP servers from API
|
||||
// Load MCP servers and projects from API
|
||||
await fetchMcpServers();
|
||||
await fetchAvailableProjects();
|
||||
} catch (error) {
|
||||
console.error('Error loading tool settings:', error);
|
||||
// Set defaults on error
|
||||
@@ -354,7 +355,8 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
setMcpFormData({
|
||||
name: '',
|
||||
type: 'stdio',
|
||||
scope: 'user', // Always use user scope for global availability
|
||||
scope: 'user', // Default to user scope
|
||||
projectPath: '',
|
||||
config: {
|
||||
command: '',
|
||||
args: [],
|
||||
@@ -378,8 +380,11 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
name: server.name,
|
||||
type: server.type,
|
||||
scope: server.scope,
|
||||
projectPath: server.projectPath || '',
|
||||
config: { ...server.config },
|
||||
raw: server.raw // Store raw config for display
|
||||
raw: server.raw, // Store raw config for display
|
||||
importMode: 'form', // Always use form mode when editing
|
||||
jsonInput: ''
|
||||
});
|
||||
} else {
|
||||
resetMcpForm();
|
||||
@@ -404,7 +409,9 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: mcpFormData.name,
|
||||
jsonConfig: mcpFormData.jsonInput
|
||||
jsonConfig: mcpFormData.jsonInput,
|
||||
scope: mcpFormData.scope,
|
||||
projectPath: mcpFormData.projectPath
|
||||
})
|
||||
});
|
||||
|
||||
@@ -972,39 +979,12 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 ml-4">
|
||||
<Button
|
||||
onClick={() => handleMcpTest(server.id, server.scope)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={mcpTestResults[server.id]?.loading}
|
||||
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
|
||||
title="Test connection"
|
||||
>
|
||||
{mcpTestResults[server.id]?.loading ? (
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
|
||||
) : (
|
||||
<Play className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => handleMcpToolsDiscovery(server.id, server.scope)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={mcpToolsLoading[server.id]}
|
||||
className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
|
||||
title="Discover tools"
|
||||
>
|
||||
{mcpToolsLoading[server.id] ? (
|
||||
<div className="w-4 h-4 animate-spin rounded-full border-2 border-purple-600 border-t-transparent" />
|
||||
) : (
|
||||
<Settings className="w-4 h-4" />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => openMcpForm(server)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
|
||||
title="Edit server"
|
||||
>
|
||||
<Edit3 className="w-4 h-4" />
|
||||
</Button>
|
||||
@@ -1013,6 +993,7 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
|
||||
title="Delete server"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
@@ -1042,7 +1023,8 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleMcpSubmit} className="p-4 space-y-4">
|
||||
{/* Import Mode Toggle */}
|
||||
|
||||
{!editingMcpServer && (
|
||||
<div className="flex gap-2 mb-4">
|
||||
<button
|
||||
type="button"
|
||||
@@ -1067,6 +1049,104 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
JSON Import
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show current scope when editing */}
|
||||
{mcpFormData.importMode === 'form' && editingMcpServer && (
|
||||
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Scope
|
||||
</label>
|
||||
<div className="flex items-center gap-2">
|
||||
{mcpFormData.scope === 'user' ? <Globe className="w-4 h-4" /> : <FolderOpen className="w-4 h-4" />}
|
||||
<span className="text-sm">
|
||||
{mcpFormData.scope === 'user' ? 'User (Global)' : 'Project (Local)'}
|
||||
</span>
|
||||
{mcpFormData.scope === 'local' && mcpFormData.projectPath && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
- {mcpFormData.projectPath}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
Scope cannot be changed when editing an existing server
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scope Selection - Moved to top, disabled when editing */}
|
||||
{mcpFormData.importMode === 'form' && !editingMcpServer && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Scope *
|
||||
</label>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMcpFormData(prev => ({...prev, scope: 'user', projectPath: ''}))}
|
||||
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
mcpFormData.scope === 'user'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
<span>User (Global)</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMcpFormData(prev => ({...prev, scope: 'local'}))}
|
||||
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
mcpFormData.scope === 'local'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<FolderOpen className="w-4 h-4" />
|
||||
<span>Project (Local)</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2">
|
||||
{mcpFormData.scope === 'user'
|
||||
? 'User scope: Available across all projects on your machine'
|
||||
: 'Local scope: Only available in the selected project'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Project Selection for Local Scope */}
|
||||
{mcpFormData.scope === 'local' && !editingMcpServer && (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">
|
||||
Project *
|
||||
</label>
|
||||
<select
|
||||
value={mcpFormData.projectPath}
|
||||
onChange={(e) => setMcpFormData(prev => ({...prev, projectPath: e.target.value}))}
|
||||
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
|
||||
required={mcpFormData.scope === 'local'}
|
||||
>
|
||||
<option value="">Select a project...</option>
|
||||
{projects.map(project => (
|
||||
<option key={project.name} value={project.path || project.fullPath}>
|
||||
{project.displayName || project.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{mcpFormData.projectPath && (
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Path: {mcpFormData.projectPath}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@@ -1104,7 +1184,6 @@ function ToolsSettings({ isOpen, onClose }) {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scope is fixed to user - no selection needed */}
|
||||
|
||||
{/* Show raw configuration details when editing */}
|
||||
{editingMcpServer && mcpFormData.raw && mcpFormData.importMode === 'form' && (
|
||||
|
||||
Reference in New Issue
Block a user