theme-check validation tool entire theme

Author: aswamy

package-lock.json

@@ -20,6 +20,7 @@
     "@modelcontextprotocol/sdk": "^1.15.1",
     "@shopify/theme-check-common": "^3.19.0",
     "@shopify/theme-check-docs-updater": "^3.19.0",
+    "@shopify/theme-check-node": "^3.19.0",
     "graphql": "^16.11.0",
     "zod": "^3.24.2"
   },

package.json

@@ -5,6 +5,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 validateTheme from "../validations/theme.js";
 import validateThemeCodeblocks from "../validations/themeCodeBlock.js";
 import { introspectGraphqlSchema } from "./introspectGraphqlSchema.js";
 import { shopifyDevFetch } from "./shopifyDevFetch.js";
@@ -569,13 +570,14 @@ function liquidMcpTools(server: McpServer) {
               ),
             fileType: z
               .enum([
+                "assets",
                 "blocks",
-                "snippets",
-                "sections",
-                "layout",
                 "config",
+                "layout",
                 "locales",
-                "assets",
+                "sections",
+                "snippets",
+                "templates",
               ])
               .default("blocks")
               .describe(
@@ -613,4 +615,38 @@ function liquidMcpTools(server: McpServer) {
       };
     },
   );
+
+  server.tool(
+    "validate_theme",
+    `This tool MUST run if the user asks the LLM to create or modify Liquid code inside their Theme repository. A theme repository is a directory that MUST contain the following directories: snippets, sections, config, templates. It can optionally contain assets, locales, blocks, layouts.
+    
+    Only fix the errors in the files that are directly related to the user's prompt. Offer to fix other errors if the user asks for it.`,
+
+    withConversationId({
+      absoluteThemePath: z
+        .string()
+        .describe("The absolute path to the theme directory"),
+    }),
+
+    async (params) => {
+      const validationResponse = await validateTheme(params.absoluteThemePath);
+
+      recordUsage("validate_theme", params, validationResponse).catch(() => {});
+
+      const responseText = formatValidationResult(
+        [validationResponse],
+        "Theme",
+      );
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: responseText,
+          },
+        ],
+        isError: validationResponse.result === ValidationResult.FAILED,
+      };
+    },
+  );
 }

src/tools/index.ts

@@ -0,0 +1,77 @@
+import { mkdir, mkdtemp, rm, writeFile } from "fs/promises";
+import { tmpdir } from "os";
+import { join } from "path";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { ValidationResult } from "../types.js";
+import validateTheme from "./theme.js";
+
+describe("validateTheme", () => {
+  let tempThemeDirectory: string;
+  let snippetsDirectory: string;
+  let localesDirectory: string;
+
+  beforeEach(async () => {
+    tempThemeDirectory = await mkdtemp(join(tmpdir(), "theme-test-"));
+
+    snippetsDirectory = join(tempThemeDirectory, "snippets");
+    localesDirectory = join(tempThemeDirectory, "locales");
+
+    [snippetsDirectory, localesDirectory].forEach(async (directory) => {
+      await mkdir(directory, { recursive: true });
+    });
+  });
+
+  afterEach(async () => {
+    await rm(tempThemeDirectory, { recursive: true, force: true });
+  });
+
+  it("should successfully validate a theme", async () => {
+    // Create the test.liquid file with the specified content
+    const liquidFile = join(snippetsDirectory, "test.liquid");
+    await writeFile(liquidFile, "{{ 'hello' }}");
+
+    // Run validateTheme on the temporary directory
+    const result = await validateTheme(tempThemeDirectory);
+
+    // Assert the response was a success
+    expect(result.result).toBe(ValidationResult.SUCCESS);
+    expect(result.resultDetail).toBe(
+      `Theme at ${tempThemeDirectory} passed all checks from Shopify's Theme Check.`,
+    );
+  });
+
+  it("should fail to validate a theme", async () => {
+    // Create the test.liquid file with the specified content
+    const liquidFile = join(snippetsDirectory, "test.liquid");
+    await writeFile(liquidFile, "{{ 'hello' | non-existent-filter }}");
+
+    // Run validateTheme on the temporary directory
+    const result = await validateTheme(tempThemeDirectory);
+
+    // Assert the response was a success
+    expect(result.result).toBe(ValidationResult.FAILED);
+    expect(result.resultDetail).toBe(
+      `Theme at ${tempThemeDirectory} failed to validate:
+
+file://${tempThemeDirectory}/snippets/test.liquid: Unknown filter 'non-existent-filter' used.`,
+    );
+  });
+
+  it("should successfully validate a theme with an unknown filter if its check is exempted", async () => {
+    // Create the test.liquid file with the specified content
+    const liquidFile = join(snippetsDirectory, "test.liquid");
+    await writeFile(liquidFile, "{{ 'hello' | non-existent-filter }}");
+
+    const themeCheckYml = join(tempThemeDirectory, ".theme-check.yml");
+    await writeFile(themeCheckYml, "ignore:\n- snippets/test.liquid");
+
+    // Run validateTheme on the temporary directory
+    const result = await validateTheme(tempThemeDirectory);
+
+    // Assert the response was a success
+    expect(result.result).toBe(ValidationResult.SUCCESS);
+    expect(result.resultDetail).toBe(
+      `Theme at ${tempThemeDirectory} passed all checks from Shopify's Theme Check.`,
+    );
+  });
+});

src/validations/theme.test.ts

@@ -0,0 +1,49 @@
+import { themeCheckRun } from "@shopify/theme-check-node";
+import { access } from "fs/promises";
+import { join } from "path";
+import { ValidationResponse, ValidationResult } from "../types.js";
+
+/**
+ * Validates Shopify Theme
+ * @param absoluteThemePath - The path to the theme directory
+ * @returns ValidationResponse containing the success of running theme-check for the whole theme
+ */
+export default async function validateTheme(
+  absoluteThemePath: string,
+): Promise<ValidationResponse> {
+  try {
+    let configPath: string | undefined = join(
+      absoluteThemePath,
+      "theme-check.yml",
+    );
+
+    try {
+      await access(configPath);
+    } catch {
+      configPath = undefined;
+    }
+
+    const results = await themeCheckRun(
+      absoluteThemePath,
+      configPath,
+      (message) => console.error(message),
+    );
+
+    if (results.offenses.length > 0) {
+      return {
+        result: ValidationResult.FAILED,
+        resultDetail: `Theme at ${absoluteThemePath} failed to validate:\n\n${results.offenses.map((offense) => `${offense.uri}: ${offense.message}`).join("\n\n")}`,
+      };
+    }
+
+    return {
+      result: ValidationResult.SUCCESS,
+      resultDetail: `Theme at ${absoluteThemePath} passed all checks from Shopify's Theme Check.`,
+    };
+  } catch (error) {
+    return {
+      result: ValidationResult.FAILED,
+      resultDetail: `Validation error: Could not validate ${absoluteThemePath}. Details: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  }
+}

src/validations/theme.ts

@@ -16,13 +16,14 @@ import { ValidationResponse, ValidationResult } from "../types.js";
 type ThemeCodeblock = {
   fileName: string;
   fileType:
+    | "assets"
     | "blocks"
-    | "snippets"
-    | "sections"
-    | "layout"
     | "config"
+    | "layout"
     | "locales"
-    | "assets";
+    | "sections"
+    | "snippets"
+    | "templates";
   content: string;
 };