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 mcpClientTab = ref<'claude-code' | 'claude-desktop'>('claude-code');
|
||||||
const copiedSnippetKey = ref<string | null>(null);
|
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 effectiveApiKey = computed(() => newKeyValue.value || '<your-token>');
|
||||||
|
|
||||||
const claudeCodeCommand = computed(() => {
|
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} \\
|
--url ${mcpUrl.value} \\
|
||||||
--header "Authorization: Bearer ${effectiveApiKey.value}"`;
|
--header "Authorization: Bearer ${effectiveApiKey.value}"`;
|
||||||
});
|
});
|
||||||
|
|
||||||
const mcpConfigSnippet = computed(() => JSON.stringify({
|
const mcpConfigSnippet = computed(() => JSON.stringify({
|
||||||
mcpServers: {
|
mcpServers: {
|
||||||
fable: {
|
[effectiveMcpName.value]: {
|
||||||
url: mcpUrl.value,
|
url: mcpUrl.value,
|
||||||
headers: {
|
headers: {
|
||||||
Authorization: `Bearer ${effectiveApiKey.value}`,
|
Authorization: `Bearer ${effectiveApiKey.value}`,
|
||||||
@@ -2480,7 +2504,7 @@ function formatUserDate(iso: string): string {
|
|||||||
<section class="settings-section full-width">
|
<section class="settings-section full-width">
|
||||||
<h2>MCP Access</h2>
|
<h2>MCP Access</h2>
|
||||||
<p class="settings-description">
|
<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.
|
tasks, projects, events, and people via the built-in MCP endpoint below.
|
||||||
</p>
|
</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>.
|
token value, or copy the snippet now and paste your own where it says <code><your-token></code>.
|
||||||
</p>
|
</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">
|
<div class="mcp-client-tabs" role="tablist">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -2593,12 +2646,9 @@ function formatUserDate(iso: string): string {
|
|||||||
{{ copiedSnippetKey === 'cc-add' ? 'Copied' : 'Copy' }}
|
{{ copiedSnippetKey === 'cc-add' ? 'Copied' : 'Copy' }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
||||||
<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>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
|
|
||||||
@@ -2616,7 +2666,7 @@ function formatUserDate(iso: string): string {
|
|||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
@@ -4221,6 +4271,24 @@ function formatUserDate(iso: string): string {
|
|||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
margin-bottom: 0.25rem;
|
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 {
|
.mcp-code-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|||||||
Reference in New Issue
Block a user