fix: use server.template with list and complete for docs resources

Author: paoloricciuti

packages/mcp-server/src/mcp/handlers/resources/list-sections.ts

@@ -4,32 +4,61 @@ import { get_sections, fetch_with_timeout } from '../../utils.js';
 export async function list_sections(server: SvelteMcp) {
 	const sections = await get_sections();
 
-	sections.forEach((section) => {
-		const section_name = section.title.toLowerCase().replace(/\s+/g, '-');
-		const resource_name = `docs/svelte/${section_name}`;
-		const resource_uri = `svelte://docs/${section_name}`;
-
-		server.resource(
-			{
-				name: resource_name,
-				enabled: () => true,
-				description: section.use_cases,
-				uri: resource_uri,
-				title: section.title,
+	server.template(
+		{
+			name: 'Svelte Doc Section',
+			description: 'A single documentation section',
+			list() {
+				return sections.map((section) => {
+					const section_name = section.slug;
+					const resource_name = section_name;
+					const resource_uri = `svelte://${section_name}.md`;
+					return {
+						name: resource_name,
+						description: section.use_cases,
+						uri: resource_uri,
+						title: section.title,
+					};
+				});
 			},
-			async (uri) => {
-				const response = await fetch_with_timeout(section.url);
-				const content = await response.text();
-				return {
-					contents: [
-						{
-							uri,
-							type: 'text',
-							text: content,
+			complete: {
+				slug: (query) => {
+					const values = sections
+						.reduce<string[]>((acc, section) => {
+							const section_name = section.slug;
+							const resource_name = section_name;
+							if (section_name.includes(query.toLowerCase())) {
+								acc.push(resource_name);
+							}
+							return acc;
+						}, [])
+						// there's a hard limit of 100 for completions
+						.slice(0, 100);
+					return {
+						completion: {
+							values,
 						},
-					],
-				};
+					};
+				},
 			},
-		);
-	});
+			uri: 'svelte://{/slug*}.md',
+		},
+		async (uri, { slug }) => {
+			const section = sections.find((section) => {
+				return slug === section.slug;
+			});
+			if (!section) throw new Error(`Section not found: ${slug}`);
+			const response = await fetch_with_timeout(section.url);
+			const content = await response.text();
+			return {
+				contents: [
+					{
+						uri,
+						type: 'text',
+						text: content,
+					},
+				],
+			};
+		},
+	);
 }