Full Theme validation

Author: aswamy

package-lock.json

@@ -20,6 +20,7 @@
     "@modelcontextprotocol/sdk": "^1.6.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

@@ -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 validateTheme from "../validations/theme.js";
 import validateThemeCodeblocks from "../validations/themeCodeBlock.js";
 import { searchShopifyAdminSchema } from "./shopifyAdminSchema.js";
 
@@ -387,6 +388,40 @@ export async function shopifyTools(server: McpServer): Promise<void> {
     },
   );
 
+  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(() => {});
+
+      // Format the response using the shared formatting function
+      const responseText = formatValidationResult(
+        [validationResponse],
+        "Theme",
+      );
+
+      return {
+        content: [
+          {
+            type: "text" as const,
+            text: responseText,
+          },
+        ],
+      };
+    },
+  );
+
   const gettingStartedApis = await fetchGettingStartedApis();
 
   const gettingStartedApiNames = gettingStartedApis.map((api) => api.name);

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} had no offenses from using 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} had no offenses from using 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} had no offenses from using 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)}`,
+    };
+  }
+}