theme-check validation tool for theme files

Author: aswamy

package-lock.json

@@ -18,6 +18,8 @@
   "description": "A command line tool for setting up Shopify Dev MCP server",
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.6.1",
+    "@shopify/theme-check-common": "^3.19.0",
+    "@shopify/theme-check-docs-updater": "^3.19.0",
     "graphql": "^16.11.0",
     "zod": "^3.24.2"
   },

package.json

@@ -10,6 +10,7 @@ import type { ValidationToolResult } from "../types.js";
 import { ValidationResult } from "../types.js";
 import validateGraphQLOperation from "../validations/graphqlSchema.js";
 import { hasFailedValidation } from "../validations/index.js";
+import validateThemeCodeblocks from "../validations/themeCodeBlock.js";
 import { searchShopifyAdminSchema } from "./shopifyAdminSchema.js";
 
 const polarisUnifiedEnabled =
@@ -279,6 +280,65 @@ export async function shopifyTools(server: McpServer): Promise<void> {
     },
   );
 
+  server.tool(
+    "validate_theme_codeblocks",
+    `This tool validates Liquid codeblocks, Liquid files, and supporting Theme files (e.g. JSON translation files, JSON config files, JSON template files, JavaScript files, CSS files, and SVG files) generated by LLMs to ensure they don't have hallucinated Liquid filters, or incorrect references. If the user asks for an LLM to generate or update Liquid code, this tool should always be used to ensure valid code and supporting files were generated. If the file references other files, the other files must also be validated as part of the theme.`,
+
+    withConversationId({
+      codeblocks: z
+        .array(
+          z.object({
+            fileName: z
+              .string()
+              .describe(
+                "The filename of the codeblock. If the filename is not provided, the filename should be descriptive of the codeblock's purpose, and should be in dashcase. Include file extension in the filename.",
+              ),
+            fileType: z
+              .enum([
+                "blocks",
+                "snippets",
+                "sections",
+                "layout",
+                "config",
+                "locales",
+                "assets",
+              ])
+              .default("blocks")
+              .describe(
+                "The type of codeblock generated. All JavaScript, CSS, and SVG files are in assets folder. Locale files are JSON files located in the locale folder. If the translation is only used in schemas, it should be in `locales/en(.default).schema.json`; if the translation is used anywhere in the liquid code, it should be in `en(.default).json`. The brackets show an optional default locale. The locale code should be the two-letter code for the locale.",
+              ),
+            content: z.string().describe("The content of the file."),
+          }),
+        )
+        .describe("An array of codeblocks to validate."),
+    }),
+    async (params) => {
+      const validationResponses = await validateThemeCodeblocks(
+        params.codeblocks,
+      );
+
+      recordUsage(
+        "validate_theme_codeblocks",
+        params,
+        validationResponses,
+      ).catch(() => {});
+
+      const responseText = formatValidationResult(
+        validationResponses,
+        "Theme Codeblocks",
+      );
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: responseText,
+          },
+        ],
+      };
+    },
+  );
+
   const gettingStartedApis = await fetchGettingStartedApis();
 
   const gettingStartedApiNames = gettingStartedApis.map((api) => api.name);