feat: automatic prompt sync with docs

.changeset/common-vans-poke.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/mcp': patch
+---
+
+fix: minor tweaks to the prompt to allow for automatic sync

.github/workflows/update-prompt-docs.yml

@@ -0,0 +1,78 @@
+name: Update Prompt Documentation
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/mcp-server/src/mcp/handlers/prompts/**'
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  update-docs:
+    # prevents this action from running on forks
+    if: github.repository == 'sveltejs/mcp'
+    name: Update Prompt Documentation
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version: 24
+          package-manager-cache: false # pnpm is not installed yet
+
+      - name: Install pnpm
+        shell: bash
+        run: |
+          PNPM_VER=$(jq -r '.packageManager | if .[0:5] == "pnpm@" then .[5:] else "packageManager in package.json does not start with pnpm@\n" | halt_error(1)  end' package.json)
+          echo installing pnpm version $PNPM_VER
+          npm i -g pnpm@$PNPM_VER
+
+      - name: Setup Node.js with pnpm cache
+        uses: actions/setup-node@v5
+        with:
+          node-version: 24
+          package-manager-cache: true # caches pnpm via packageManager field in package.json
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline --ignore-scripts
+
+      - name: Generate prompt documentation
+        run: pnpm generate-prompt-docs
+
+      - name: Check for changes
+        id: git-check
+        run: |
+          git diff --exit-code documentation/docs/30-capabilities/30-prompts.md || echo "changed=true" >> $GITHUB_OUTPUT
+
+      - name: Create Pull Request
+        if: steps.git-check.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v7
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: 'docs: update prompts documentation'
+          branch: docs/update-prompt-docs
+          delete-branch: true
+          title: 'docs: update prompt documentation'
+          body: |
+            ## Summary
+            Automatically generated documentation update for MCP prompts.
+
+            This PR was triggered by changes to the prompts folder in `packages/mcp-server/src/mcp/handlers/prompts/`.
+
+            ## Changes
+            - Updated `documentation/docs/30-capabilities/30-prompts.md` with latest prompt definitions
+
+            ## Generated by
+            GitHub Action: Update Prompt Documentation
+          labels: |
+            documentation
+            automated

.vscode/mcp-snippets.code-snippets

@@ -30,4 +30,62 @@
 		],
 		"description": "Create a setup export for an autofixer",
 	},
+	"Prompt Generator": {
+		"scope": "javascript,typescript",
+		"prefix": "!prompt",
+		"body": [
+			"import type { SvelteMcp } from '../../index.js';",
+			"",
+			"/**",
+			" *  Function that actually generates the prompt string. You can use this in the MCP server handler to generate the prompt, it can accept arguments",
+			" *  if needed (it will always be invoked manually so it's up to you to provide the arguments).",
+			" */",
+			"function ${1:prompt_name}() {",
+			"\treturn `$0`;",
+			"}",
+			"",
+			"/**",
+			" * This function is used to generate the prompt to update the docs in the script `/scripts/update-docs-prompts.ts` it should use the default export",
+			" * function and pass in the arguments. Since it will be included in the documentation if it's an argument that the MCP will expose it should",
+			" * be in the format [NAME_OF_THE_ARGUMENT] to signal the user that it can substitute it.",
+			" * ",
+			" * The name NEEDS to be `generate_for_docs`.",
+			" */",
+			"export async function generate_for_docs() {",
+			"\treturn ${1:prompt_name}();",
+			"}",
+			"",
+			"/**",
+			" * Human readable description of what the prompt does. It will be included in the documentation.",
+			" * ",
+			" * The name NEEDS to be `docs_description`.",
+			" */",
+			"export const docs_description = '';",
+			"",
+			"export function setup_${1:prompt_name}(server: SvelteMcp) {",
+			"\tserver.prompt(",
+			"\t\t{",
+			"\t\t\tname: '${1:prompt_name}',",
+			"\t\t\ttitle: '${2:title}',",
+			"\t\t\tdescription:",
+			"\t\t\t\t'${3:llm_description}',",
+			"\t\t},",
+			"\t\tasync () => {",
+			"\t\t\treturn {",
+			"\t\t\t\tmessages: [",
+			"\t\t\t\t\t{",
+			"\t\t\t\t\t\trole: 'assistant',",
+			"\t\t\t\t\t\tcontent: {",
+			"\t\t\t\t\t\t\ttype: 'text',",
+			"\t\t\t\t\t\t\ttext: ${1:prompt_name}(),",
+			"\t\t\t\t\t\t},",
+			"\t\t\t\t\t},",
+			"\t\t\t\t],",
+			"\t\t\t};",
+			"\t\t},",
+			"\t);",
+			"}",
+		],
+		"description": "Create a setup export for a prompt generator",
+	},
 }

package.json

@@ -17,6 +17,7 @@
 		"test:watch": "npm run test:unit -- --watch",
 		"inspect": "pnpm mcp-inspector",
 		"generate-summaries": "pnpm --filter @sveltejs/mcp-server run generate-summaries",
+		"generate-prompt-docs": "node --import node-resolve-ts/register scripts/update-docs-prompts.ts",
 		"debug:generate-summaries": "pnpm --filter @sveltejs/mcp-server run debug:generate-summaries",
 		"release": "pnpm --filter @sveltejs/mcp run build && changeset publish",
 		"changeset:version": "changeset version && pnpm --filter @sveltejs/mcp run update:version && git add --all"
@@ -39,6 +40,7 @@
 		"eslint-plugin-import": "^2.32.0",
 		"eslint-plugin-svelte": "^3.12.3",
 		"globals": "^16.0.0",
+		"node-resolve-ts": "^1.0.2",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"publint": "^0.3.13",

packages/mcp-server/src/mcp/handlers/prompts/index.ts

@@ -1 +1 @@
-export * from './svelte-task.js';
+export { setup_svelte_task } from './svelte-task.js';

packages/mcp-server/src/mcp/handlers/prompts/svelte-task.ts

@@ -2,16 +2,68 @@ import type { SvelteMcp } from '../../index.js';
 import * as v from 'valibot';
 import { format_sections_list } from '../../utils.js';
 
+/**
+ *  Function that actually generates the prompt string. You can use this in the MCP server handler to generate the prompt, it can accept arguments
+ *  if needed (it will always be invoked manually so it's up to you to provide the arguments).
+ */
+function svelte_task(available_docs: string, task: string) {
+	return `You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool \`get_documentation\` with one of the following paths:
+<available-docs>
+
+${available_docs}
+
+</available-docs>
+
+Every time you write a Svelte component or a Svelte module you MUST invoke the \`svelte-autofixer\` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.
+
+This is the task you will work on:
+
+<task>
+${task}
+</task>
+
+If you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the \`playground-link\` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called \`App.svelte\` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.`;
+}
+
+/**
+ * This function is used to generate the prompt to update the docs in the script `/scripts/update-docs-prompts.ts` it should use the default export
+ * function and pass in the arguments. Since it will be included in the documentation if it's an argument that the MCP will expose it should
+ * be in the format [NAME_OF_THE_ARGUMENT] to signal the user that it can substitute it.
+ *
+ * The name NEEDS to be `generate_for_docs`.
+ */
+export async function generate_for_docs() {
+	const available_docs = await format_sections_list();
+	return svelte_task(available_docs, '[YOUR TASK HERE]');
+}
+
+/**
+ * Human readable description of what the prompt does. It will be included in the documentation.
+ *
+ * The name NEEDS to be `docs_description`.
+ */
+export const docs_description =
+	'This prompt should be used whenever you are asking the model to work on a Svelte-related task. It will instruct the LLM which documentation sections are available, which tools to invoke, when to invoke them, and how to interpret the results.';
+
 export function setup_svelte_task(server: SvelteMcp) {
 	server.prompt(
 		{
-			name: 'svelte-task-prompt',
+			name: 'svelte-task',
 			title: 'Svelte-Task-Prompt',
 			description:
 				'Use this Prompt to ask for any svelte related task. It will automatically instruct the LLM on how to best use the autofixer and how to query for documentation pages.',
 			schema: v.object({
 				task: v.pipe(v.string(), v.description('The task to be performed')),
 			}),
+			complete: {
+				task() {
+					return {
+						completion: {
+							values: [''],
+						},
+					};
+				},
+			},
 		},
 		async ({ task }) => {
 			const available_docs = await format_sections_list();
@@ -22,21 +74,7 @@ export function setup_svelte_task(server: SvelteMcp) {
 						role: 'user',
 						content: {
 							type: 'text',
-							text: `You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool \`get_documentation\` with one of the following paths:
-<available-docs>
-${available_docs}
-</available-docs>
-
-Every time you write a Svelte component or a Svelte module you MUST invoke the \`svelte-autofixer\` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.
-
-This is the task you will work on:
-
-<task>
-${task}
-</task>
-
-If you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the \`playground-link\` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called \`App.svelte\` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.
-`,
+							text: svelte_task(available_docs, task),
 						},
 					},
 				],

packages/mcp-server/src/mcp/utils.ts

@@ -51,6 +51,6 @@ export async function get_sections() {
 export async function format_sections_list() {
 	const sections = await get_sections();
 	return sections
-		.map((s) => `* title: ${s.title}, use_cases: ${s.use_cases}, path: ${s.slug}`)
+		.map((s) => `- title: ${s.title}, use_cases: ${s.use_cases}, path: ${s.slug}`)
 		.join('\n');
 }