diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue index 4f009e8..c87fde8 100644 --- a/frontend/src/views/SettingsView.vue +++ b/frontend/src/views/SettingsView.vue @@ -116,17 +116,41 @@ const mcpUrlCopied = ref(false); const mcpClientTab = ref<'claude-code' | 'claude-desktop'>('claude-code'); const copiedSnippetKey = ref(null); +// Configurable per-browser: the local name Claude uses for this server, and the +// scope of the `claude mcp add` call. Persisted to localStorage so the user's +// preferences carry across visits without needing a server-side setting. +const _MCP_NAME_KEY = 'mcp_server_name'; +const _MCP_SCOPE_KEY = 'mcp_scope'; +const _DEFAULT_MCP_NAME = 'scribe'; +const _isValidScope = (v: unknown): v is 'user' | 'project' | 'local' => + v === 'user' || v === 'project' || v === 'local'; + +const mcpServerName = ref( + localStorage.getItem(_MCP_NAME_KEY) || _DEFAULT_MCP_NAME, +); +const _storedScope = localStorage.getItem(_MCP_SCOPE_KEY); +const mcpScope = ref<'user' | 'project' | 'local'>( + _isValidScope(_storedScope) ? _storedScope : 'user', +); + +watch(mcpServerName, (v) => { + const clean = (v || '').trim() || _DEFAULT_MCP_NAME; + localStorage.setItem(_MCP_NAME_KEY, clean); +}); +watch(mcpScope, (v) => localStorage.setItem(_MCP_SCOPE_KEY, v)); + +const effectiveMcpName = computed(() => (mcpServerName.value || '').trim() || _DEFAULT_MCP_NAME); const effectiveApiKey = computed(() => newKeyValue.value || ''); const claudeCodeCommand = computed(() => { - return `claude mcp add --transport http --scope user fable \\ + return `claude mcp add --transport http --scope ${mcpScope.value} ${effectiveMcpName.value} \\ --url ${mcpUrl.value} \\ --header "Authorization: Bearer ${effectiveApiKey.value}"`; }); const mcpConfigSnippet = computed(() => JSON.stringify({ mcpServers: { - fable: { + [effectiveMcpName.value]: { url: mcpUrl.value, headers: { Authorization: `Bearer ${effectiveApiKey.value}`, @@ -2480,7 +2504,7 @@ function formatUserDate(iso: string): string {

MCP Access

- Connect Claude (Code or Desktop) to this Fable instance. Claude reads and writes your notes, + Connect Claude (Code or Desktop) to this Scribe instance. Claude reads and writes your notes, tasks, projects, events, and people via the built-in MCP endpoint below.

@@ -2566,6 +2590,35 @@ function formatUserDate(iso: string): string { token value, or copy the snippet now and paste your own where it says <your-token>.

+ +
+ + +
+
-

- --scope user makes fable available across all your projects. Use --scope project to write it into the current repo's .mcp.json instead, or --scope local for this machine and repo only. -

  • - Verify the connection by running /mcp inside Claude Code — fable should appear as connected. + Verify the connection by running /mcp inside Claude Code — {{ effectiveMcpName }} should appear as connected.
  • @@ -2616,7 +2666,7 @@ function formatUserDate(iso: string): string {
  • - Restart Claude Desktop. The Fable tools should appear in the available tools list. + Restart Claude Desktop. The Scribe tools should appear in the available tools list.
  • @@ -4221,6 +4271,24 @@ function formatUserDate(iso: string): string { opacity: 0.7; margin-bottom: 0.25rem; } +.mcp-client-config { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + margin: 1rem 0 1.5rem; +} +@media (max-width: 640px) { + .mcp-client-config { grid-template-columns: 1fr; } +} +.mcp-config-field { + display: flex; + flex-direction: column; + gap: 0.25rem; +} +.mcp-config-label { + font-size: 0.85rem; + opacity: 0.7; +} .mcp-code-row { display: flex; align-items: stretch;