feat(ui): configurable MCP server name + scope; start Scribe rebrand
Settings → MCP Access now lets you tune the generated snippet:
- Server name input (default: 'scribe', stored per browser in
localStorage). The name appears both in the claude mcp add
command and as the JSON key in claude_desktop_config.json's
mcpServers map.
- Scope dropdown: user / project / local. Drives the --scope
flag in the claude mcp add snippet. Picks 'project' to commit
the server into the current repo's .mcp.json.
User-visible 'Fable' → 'Scribe' in MCP Access tab copy (lead text,
Claude Desktop step). Branding pivot in the rest of the app
(assistant_name placeholder, SMTP defaults, version line, etc.) is
deferred — chat/journal copy is going away in Phase 7 anyway.
Deliberately NOT touched:
- Tool names (fable_*) — protocol-level identifiers; renaming
breaks any Claude session, agent, or automation that referenced
them. Warrants its own phase.
- mcp/server.py: FastMCP('fable', ...) server name — same reason.
- Internal package name fabledassistant — per the project's
naming convention (CLAUDE.md memory), internal stays.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -116,17 +116,41 @@ const mcpUrlCopied = ref(false);
|
||||
const mcpClientTab = ref<'claude-code' | 'claude-desktop'>('claude-code');
|
||||
const copiedSnippetKey = ref<string | null>(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<string>(
|
||||
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 || '<your-token>');
|
||||
|
||||
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 {
|
||||
<section class="settings-section full-width">
|
||||
<h2>MCP Access</h2>
|
||||
<p class="settings-description">
|
||||
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.
|
||||
</p>
|
||||
|
||||
@@ -2566,6 +2590,35 @@ function formatUserDate(iso: string): string {
|
||||
token value, or copy the snippet now and paste your own where it says <code><your-token></code>.
|
||||
</p>
|
||||
|
||||
<!-- Per-client config: server name + scope (persisted to localStorage) -->
|
||||
<div class="mcp-client-config">
|
||||
<label class="mcp-config-field">
|
||||
<span class="mcp-config-label">Server name</span>
|
||||
<input
|
||||
v-model="mcpServerName"
|
||||
type="text"
|
||||
placeholder="scribe"
|
||||
class="settings-input"
|
||||
spellcheck="false"
|
||||
/>
|
||||
<span class="mcp-hint">
|
||||
Local label Claude uses for this server. Examples: <code>scribe</code>, <code>scribe-dev</code>.
|
||||
</span>
|
||||
</label>
|
||||
<label class="mcp-config-field">
|
||||
<span class="mcp-config-label">Scope</span>
|
||||
<select v-model="mcpScope" class="settings-input">
|
||||
<option value="user">user — available across all projects</option>
|
||||
<option value="project">project — write to current repo's .mcp.json</option>
|
||||
<option value="local">local — this machine + repo only</option>
|
||||
</select>
|
||||
<span class="mcp-hint">
|
||||
Where Claude Code stores the server registration. Pick <code>project</code> to commit it
|
||||
to a specific repo's <code>.mcp.json</code>.
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mcp-client-tabs" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
@@ -2593,12 +2646,9 @@ function formatUserDate(iso: string): string {
|
||||
{{ copiedSnippetKey === 'cc-add' ? 'Copied' : 'Copy' }}
|
||||
</button>
|
||||
</div>
|
||||
<p class="mcp-hint">
|
||||
<code>--scope user</code> makes <code>fable</code> available across all your projects. Use <code>--scope project</code> to write it into the current repo's <code>.mcp.json</code> instead, or <code>--scope local</code> for this machine and repo only.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
Verify the connection by running <code>/mcp</code> inside Claude Code — <code>fable</code> should appear as connected.
|
||||
Verify the connection by running <code>/mcp</code> inside Claude Code — <code>{{ effectiveMcpName }}</code> should appear as connected.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
@@ -2616,7 +2666,7 @@ function formatUserDate(iso: string): string {
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
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.
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user