Skip to content

Commit b24f5e4

Browse files
viper151viper151
authored
Merge pull request #142 from siteboon/feature/mcp-project
feat: Local/Project MCPs and Import from JSON
2 parents 99b204f + 6d17e6d commit b24f5e4

File tree

4 files changed

+149
-53
lines changed

4 files changed

+149
-53
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "claude-code-ui",
3-
"version": "1.5.0",
3+
"version": "1.6.0",
44
"description": "A web-based UI for Claude Code CLI",
55
"type": "module",
66
"main": "server/index.js",

‎server/routes/mcp.js

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -58,16 +58,16 @@ router.get('/cli/list', async (req, res) => {
5858
// POST /api/mcp/cli/add - Add MCP server using Claude CLI
5959
router.post('/cli/add', async (req, res) => {
6060
try {
61-
const { name, type = 'stdio', command, args = [], url, headers = {}, env = {} } = req.body;
61+
const { name, type = 'stdio', command, args = [], url, headers = {}, env = {}, scope = 'user', projectPath } = req.body;
6262

63-
console.log('➕ Adding MCP server using Claude CLI (user scope):', name);
63+
console.log(`➕ Adding MCP server using Claude CLI (${scope} scope):`, name);
6464

6565
const { spawn } = await import('child_process');
6666

6767
let cliArgs = ['mcp', 'add'];
6868

69-
// Always add with user scope (global availability)
70-
cliArgs.push('--scope', 'user');
69+
// Add scope flag
70+
cliArgs.push('--scope', scope);
7171

7272
if (type === 'http') {
7373
cliArgs.push('--transport', 'http', name, url);
@@ -96,9 +96,17 @@ router.post('/cli/add', async (req, res) => {
9696

9797
console.log('🔧 Running Claude CLI command:', 'claude', cliArgs.join(' '));
9898

99-
const process = spawn('claude', cliArgs, {
99+
// For local scope, we need to run the command in the project directory
100+
const spawnOptions = {
100101
stdio: ['pipe', 'pipe', 'pipe']
101-
});
102+
};
103+
104+
if (scope === 'local' && projectPath) {
105+
spawnOptions.cwd = projectPath;
106+
console.log('📁 Running in project directory:', projectPath);
107+
}
108+
109+
const process = spawn('claude', cliArgs, spawnOptions);
102110

103111
let stdout = '';
104112
let stderr = '';
@@ -133,7 +141,7 @@ router.post('/cli/add', async (req, res) => {
133141
// POST /api/mcp/cli/add-json - Add MCP server using JSON format
134142
router.post('/cli/add-json', async (req, res) => {
135143
try {
136-
const { name, jsonConfig } = req.body;
144+
const { name, jsonConfig, scope = 'user', projectPath } = req.body;
137145

138146
console.log('➕ Adding MCP server using JSON format:', name);
139147

@@ -172,18 +180,26 @@ router.post('/cli/add-json', async (req, res) => {
172180

173181
const { spawn } = await import('child_process');
174182

175-
// Build the command: claude mcp add-json --scope user <name> '<json>'
176-
const cliArgs = ['mcp', 'add-json', '--scope', 'user', name];
183+
// Build the command: claude mcp add-json --scope <scope> <name> '<json>'
184+
const cliArgs = ['mcp', 'add-json', '--scope', scope, name];
177185

178186
// Add the JSON config as a properly formatted string
179187
const jsonString = JSON.stringify(parsedConfig);
180188
cliArgs.push(jsonString);
181189

182190
console.log('🔧 Running Claude CLI command:', 'claude', cliArgs[0], cliArgs[1], cliArgs[2], cliArgs[3], cliArgs[4], jsonString);
183191

184-
const process = spawn('claude', cliArgs, {
192+
// For local scope, we need to run the command in the project directory
193+
const spawnOptions = {
185194
stdio: ['pipe', 'pipe', 'pipe']
186-
});
195+
};
196+
197+
if (scope === 'local' && projectPath) {
198+
spawnOptions.cwd = projectPath;
199+
console.log('📁 Running in project directory:', projectPath);
200+
}
201+
202+
const process = spawn('claude', cliArgs, spawnOptions);
187203

188204
let stdout = '';
189205
let stderr = '';

‎src/App.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -635,6 +635,7 @@ function AppContent() {
635635
<ToolsSettings
636636
isOpen={showToolsSettings}
637637
onClose={() => setShowToolsSettings(false)}
638+
projects={projects}
638639
/>
639640

640641
{/* Version Upgrade Modal */}

‎src/components/ToolsSettings.jsx

Lines changed: 120 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, { useState, useEffect } from 'react';
1+
import { useState, useEffect } from 'react';
22
import { Button } from './ui/button';
33
import { Input } from './ui/input';
4-
import { ScrollArea } from './ui/scroll-area';
54
import { Badge } from './ui/badge';
6-
import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Play, Globe, Terminal, Zap } from 'lucide-react';
5+
import { X, Plus, Settings, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen } from 'lucide-react';
76
import { useTheme } from '../contexts/ThemeContext';
87

9-
function ToolsSettings({ isOpen, onClose }) {
8+
function ToolsSettings({ isOpen, onClose, projects = [] }) {
109
const { isDarkMode, toggleDarkMode } = useTheme();
1110
const [allowedTools, setAllowedTools] = useState([]);
1211
const [disallowedTools, setDisallowedTools] = useState([]);
@@ -17,14 +16,14 @@ function ToolsSettings({ isOpen, onClose }) {
1716
const [saveStatus, setSaveStatus] = useState(null);
1817
const [projectSortOrder, setProjectSortOrder] = useState('name');
1918

20-
// MCP server management state
2119
const [mcpServers, setMcpServers] = useState([]);
2220
const [showMcpForm, setShowMcpForm] = useState(false);
2321
const [editingMcpServer, setEditingMcpServer] = useState(null);
2422
const [mcpFormData, setMcpFormData] = useState({
2523
name: '',
2624
type: 'stdio',
27-
scope: 'user', // Always use user scope
25+
scope: 'user',
26+
projectPath: '', // For local scope
2827
config: {
2928
command: '',
3029
args: [],
@@ -42,7 +41,6 @@ function ToolsSettings({ isOpen, onClose }) {
4241
const [mcpToolsLoading, setMcpToolsLoading] = useState({});
4342
const [activeTab, setActiveTab] = useState('tools');
4443
const [jsonValidationError, setJsonValidationError] = useState('');
45-
4644
// Common tool patterns
4745
const commonTools = [
4846
'Bash(git log:*)',
@@ -153,6 +151,8 @@ function ToolsSettings({ isOpen, onClose }) {
153151
body: JSON.stringify({
154152
name: serverData.name,
155153
type: serverData.type,
154+
scope: serverData.scope,
155+
projectPath: serverData.projectPath,
156156
command: serverData.config?.command,
157157
args: serverData.config?.args || [],
158158
url: serverData.config?.url,
@@ -285,8 +285,9 @@ function ToolsSettings({ isOpen, onClose }) {
285285
setProjectSortOrder('name');
286286
}
287287

288-
// Load MCP servers from API
288+
// Load MCP servers and projects from API
289289
await fetchMcpServers();
290+
await fetchAvailableProjects();
290291
} catch (error) {
291292
console.error('Error loading tool settings:', error);
292293
// Set defaults on error
@@ -354,7 +355,8 @@ function ToolsSettings({ isOpen, onClose }) {
354355
setMcpFormData({
355356
name: '',
356357
type: 'stdio',
357-
scope: 'user', // Always use user scope for global availability
358+
scope: 'user', // Default to user scope
359+
projectPath: '',
358360
config: {
359361
command: '',
360362
args: [],
@@ -378,8 +380,11 @@ function ToolsSettings({ isOpen, onClose }) {
378380
name: server.name,
379381
type: server.type,
380382
scope: server.scope,
383+
projectPath: server.projectPath || '',
381384
config: { ...server.config },
382-
raw: server.raw // Store raw config for display
385+
raw: server.raw, // Store raw config for display
386+
importMode: 'form', // Always use form mode when editing
387+
jsonInput: ''
383388
});
384389
} else {
385390
resetMcpForm();
@@ -404,7 +409,9 @@ function ToolsSettings({ isOpen, onClose }) {
404409
},
405410
body: JSON.stringify({
406411
name: mcpFormData.name,
407-
jsonConfig: mcpFormData.jsonInput
412+
jsonConfig: mcpFormData.jsonInput,
413+
scope: mcpFormData.scope,
414+
projectPath: mcpFormData.projectPath
408415
})
409416
});
410417

@@ -972,39 +979,12 @@ function ToolsSettings({ isOpen, onClose }) {
972979
</div>
973980

974981
<div className="flex items-center gap-2 ml-4">
975-
<Button
976-
onClick={() => handleMcpTest(server.id, server.scope)}
977-
variant="ghost"
978-
size="sm"
979-
disabled={mcpTestResults[server.id]?.loading}
980-
className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
981-
title="Test connection"
982-
>
983-
{mcpTestResults[server.id]?.loading ? (
984-
<div className="w-4 h-4 animate-spin rounded-full border-2 border-blue-600 border-t-transparent" />
985-
) : (
986-
<Play className="w-4 h-4" />
987-
)}
988-
</Button>
989-
<Button
990-
onClick={() => handleMcpToolsDiscovery(server.id, server.scope)}
991-
variant="ghost"
992-
size="sm"
993-
disabled={mcpToolsLoading[server.id]}
994-
className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
995-
title="Discover tools"
996-
>
997-
{mcpToolsLoading[server.id] ? (
998-
<div className="w-4 h-4 animate-spin rounded-full border-2 border-purple-600 border-t-transparent" />
999-
) : (
1000-
<Settings className="w-4 h-4" />
1001-
)}
1002-
</Button>
1003982
<Button
1004983
onClick={() => openMcpForm(server)}
1005984
variant="ghost"
1006985
size="sm"
1007986
className="text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
987+
title="Edit server"
1008988
>
1009989
<Edit3 className="w-4 h-4" />
1010990
</Button>
@@ -1013,6 +993,7 @@ function ToolsSettings({ isOpen, onClose }) {
1013993
variant="ghost"
1014994
size="sm"
1015995
className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
996+
title="Delete server"
1016997
>
1017998
<Trash2 className="w-4 h-4" />
1018999
</Button>
@@ -1042,7 +1023,8 @@ function ToolsSettings({ isOpen, onClose }) {
10421023
</div>
10431024

10441025
<form onSubmit={handleMcpSubmit} className="p-4 space-y-4">
1045-
{/* Import Mode Toggle */}
1026+
1027+
{!editingMcpServer && (
10461028
<div className="flex gap-2 mb-4">
10471029
<button
10481030
type="button"
@@ -1067,6 +1049,104 @@ function ToolsSettings({ isOpen, onClose }) {
10671049
JSON Import
10681050
</button>
10691051
</div>
1052+
)}
1053+
1054+
{/* Show current scope when editing */}
1055+
{mcpFormData.importMode === 'form' && editingMcpServer && (
1056+
<div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
1057+
<label className="block text-sm font-medium text-foreground mb-2">
1058+
Scope
1059+
</label>
1060+
<div className="flex items-center gap-2">
1061+
{mcpFormData.scope === 'user' ? <Globe className="w-4 h-4" /> : <FolderOpen className="w-4 h-4" />}
1062+
<span className="text-sm">
1063+
{mcpFormData.scope === 'user' ? 'User (Global)' : 'Project (Local)'}
1064+
</span>
1065+
{mcpFormData.scope === 'local' && mcpFormData.projectPath && (
1066+
<span className="text-xs text-muted-foreground">
1067+
- {mcpFormData.projectPath}
1068+
</span>
1069+
)}
1070+
</div>
1071+
<p className="text-xs text-muted-foreground mt-2">
1072+
Scope cannot be changed when editing an existing server
1073+
</p>
1074+
</div>
1075+
)}
1076+
1077+
{/* Scope Selection - Moved to top, disabled when editing */}
1078+
{mcpFormData.importMode === 'form' && !editingMcpServer && (
1079+
<div className="space-y-4">
1080+
<div>
1081+
<label className="block text-sm font-medium text-foreground mb-2">
1082+
Scope *
1083+
</label>
1084+
<div className="flex gap-2">
1085+
<button
1086+
type="button"
1087+
onClick={() => setMcpFormData(prev => ({...prev, scope: 'user', projectPath: ''}))}
1088+
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
1089+
mcpFormData.scope === 'user'
1090+
? 'bg-blue-600 text-white'
1091+
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
1092+
}`}
1093+
>
1094+
<div className="flex items-center justify-center gap-2">
1095+
<Globe className="w-4 h-4" />
1096+
<span>User (Global)</span>
1097+
</div>
1098+
</button>
1099+
<button
1100+
type="button"
1101+
onClick={() => setMcpFormData(prev => ({...prev, scope: 'local'}))}
1102+
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
1103+
mcpFormData.scope === 'local'
1104+
? 'bg-blue-600 text-white'
1105+
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
1106+
}`}
1107+
>
1108+
<div className="flex items-center justify-center gap-2">
1109+
<FolderOpen className="w-4 h-4" />
1110+
<span>Project (Local)</span>
1111+
</div>
1112+
</button>
1113+
</div>
1114+
<p className="text-xs text-muted-foreground mt-2">
1115+
{mcpFormData.scope === 'user'
1116+
? 'User scope: Available across all projects on your machine'
1117+
: 'Local scope: Only available in the selected project'
1118+
}
1119+
</p>
1120+
</div>
1121+
1122+
{/* Project Selection for Local Scope */}
1123+
{mcpFormData.scope === 'local' && !editingMcpServer && (
1124+
<div>
1125+
<label className="block text-sm font-medium text-foreground mb-2">
1126+
Project *
1127+
</label>
1128+
<select
1129+
value={mcpFormData.projectPath}
1130+
onChange={(e) => setMcpFormData(prev => ({...prev, projectPath: e.target.value}))}
1131+
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"
1132+
required={mcpFormData.scope === 'local'}
1133+
>
1134+
<option value="">Select a project...</option>
1135+
{projects.map(project => (
1136+
<option key={project.name} value={project.path || project.fullPath}>
1137+
{project.displayName || project.name}
1138+
</option>
1139+
))}
1140+
</select>
1141+
{mcpFormData.projectPath && (
1142+
<p className="text-xs text-muted-foreground mt-1">
1143+
Path: {mcpFormData.projectPath}
1144+
</p>
1145+
)}
1146+
</div>
1147+
)}
1148+
</div>
1149+
)}
10701150

10711151
{/* Basic Info */}
10721152
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -1104,7 +1184,6 @@ function ToolsSettings({ isOpen, onClose }) {
11041184
)}
11051185
</div>
11061186

1107-
{/* Scope is fixed to user - no selection needed */}
11081187

11091188
{/* Show raw configuration details when editing */}
11101189
{editingMcpServer && mcpFormData.raw && mcpFormData.importMode === 'form' && (

0 commit comments

Comments
 (0)