feat: add .env and Claude config downloads to API key reveal

After creating a key, two download buttons appear:
- 'Download .env' — pre-filled FABLE_URL + FABLE_API_KEY
- 'Download Claude config' — ready-to-paste mcpServers JSON block

Also adds Future Task A (in-app install instructions) and Future Task B
(Forgejo MCP) to the implementation plan.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-23 21:44:34 -04:00
parent 66571e16c1
commit 6180ee65c3
2 changed files with 67 additions and 1 deletions
+37 -1
View File
@@ -94,6 +94,38 @@ async function copyApiKey() {
setTimeout(() => { apiKeyCopied.value = false; }, 2000);
}
function _downloadFile(filename: string, content: string, mimeType = 'text/plain') {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
function downloadEnvFile() {
const baseUrl = window.location.origin;
const content = `FABLE_URL=${baseUrl}\nFABLE_API_KEY=${newKeyValue.value}\n`;
_downloadFile('fable-mcp.env', content);
}
function downloadMcpConfig() {
const baseUrl = window.location.origin;
const config = {
mcpServers: {
fable: {
command: 'fable-mcp',
env: {
FABLE_URL: baseUrl,
FABLE_API_KEY: newKeyValue.value,
},
},
},
};
_downloadFile('fable-mcp-config.json', JSON.stringify(config, null, 2), 'application/json');
}
// Groups management
const groups = ref<GroupEntry[]>([]);
const groupsLoading = ref(false);
@@ -1537,7 +1569,11 @@ function formatUserDate(iso: string): string {
<code class="api-key-value">{{ newKeyValue }}</code>
<button @click="copyApiKey" class="btn btn-secondary btn-sm">{{ apiKeyCopied ? 'Copied!' : 'Copy' }}</button>
</div>
<button @click="newKeyValue = ''" class="btn btn-secondary" style="margin-top: 0.5rem;">Done</button>
<div style="display:flex; gap:0.5rem; margin-top: 0.5rem;">
<button @click="downloadEnvFile" class="btn btn-secondary btn-sm">Download .env</button>
<button @click="downloadMcpConfig" class="btn btn-secondary btn-sm">Download Claude config</button>
<button @click="newKeyValue = ''" class="btn btn-secondary">Done</button>
</div>
</div>
<!-- Keys table -->