add api docs link in developer settings

Author: 0xGingi

bun.lock

@@ -21,7 +21,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^2.0.0",
 		"@eslint/js": "^9.39.2",
-		"@iconify/json": "^2.2.425",
+		"@iconify/json": "^2.2.426",
 		"@playwright/test": "^1.57.0",
 		"@shikijs/langs": "^3.21.0",
 		"@shikijs/markdown-it": "^3.21.0",
@@ -38,7 +38,7 @@
 		"dotenv": "^17.2.3",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.13.1",
+		"eslint-plugin-svelte": "^3.14.0",
 		"globals": "^17.0.0",
 		"melt": "^0.44.0",
 		"mode-watcher": "^1.1.0",

package.json

@@ -7,10 +7,13 @@
 	import PlusIcon from '~icons/lucide/plus';
 	import TrashIcon from '~icons/lucide/trash-2';
 	import CopyIcon from '~icons/lucide/copy';
+	import ExternalLinkIcon from '~icons/lucide/external-link';
 	import { invalidateAll } from '$app/navigation';
 
 	let { data } = $props();
 
+	const API_DOCS_URL = 'https://github.com/nanogpt-community/nanochat/blob/main/api-docs.md';
+
 	let newKeyName = $state('');
 	let newlyCreatedKey = $state<string | null>(null);
 	let creating = $state(false);
@@ -81,6 +84,15 @@
 		Personal Access Tokens for API authentication. Use these keys with the
 		<code class="bg-muted rounded px-1">Authorization: Bearer &lt;KEY&gt;</code> header.
 	</p>
+	<a
+		href={API_DOCS_URL}
+		target="_blank"
+		rel="noopener noreferrer"
+		class="text-primary hover:text-primary/80 mt-2 inline-flex items-center gap-1 text-sm font-medium underline-offset-4 hover:underline"
+	>
+		View API Documentation
+		<ExternalLinkIcon class="size-4" />
+	</a>
 </div>
 
 <Card.Root class="mt-8">
@@ -94,11 +106,7 @@
 	<Card.Content>
 		<!-- Create new key form -->
 		<div class="mb-6 flex gap-2">
-			<Input
-				bind:value={newKeyName}
-				placeholder="Key name (e.g., CLI Script)"
-				class="flex-1"
-			/>
+			<Input bind:value={newKeyName} placeholder="Key name (e.g., CLI Script)" class="flex-1" />
 			<Button onclick={createKey} disabled={creating || !newKeyName.trim()}>
 				<PlusIcon class="mr-1 size-4" />
 				Generate Key
@@ -117,12 +125,7 @@
 						<CopyIcon class="size-4" />
 					</Button>
 				</div>
-				<Button
-					variant="ghost"
-					size="sm"
-					class="mt-2"
-					onclick={() => (newlyCreatedKey = null)}
-				>
+				<Button variant="ghost" size="sm" class="mt-2" onclick={() => (newlyCreatedKey = null)}>
 					Dismiss
 				</Button>
 			</div>
@@ -157,12 +160,14 @@
 		<Card.Title>Usage Example</Card.Title>
 	</Card.Header>
 	<Card.Content>
-		<pre class="bg-muted overflow-x-auto rounded-lg p-4 text-sm"><code>curl -X POST https://your-domain.com/api/generate-message \
+		<pre class="bg-muted overflow-x-auto rounded-lg p-4 text-sm"><code
+				>curl -X POST https://your-domain.com/api/generate-message \
   -H "Authorization: Bearer nc_your_api_key_here" \
   -H "Content-Type: application/json" \
   -d '{'{'}
     "message": "Hello!",
     "model_id": "gpt-4o"
-  {'}'}'</code></pre>
+  {'}'}'</code
+			></pre>
 	</Card.Content>
 </Card.Root>