Validate Polaris Web Components for App Home Surface

[billfienberg]

References

• WIP Refactor tools to better detect/correct hallucinations within code blocks #51

[nelsonwittwer]

🔥

Looking great so far! I dropped a few notes as you are iterating here 😎

[nelsonwittwer]

If you haven't done so already in a local branch, we should specify in our get_started txt response how to structure codeblocks to add more consistency here.

We'll still need to detect all codeblocks just incase LLMs forget that instruction but it will help. We do a similar pattern with GQL codeblocks with admin if you wanted to steal our homework :)

[nelsonwittwer]

I'd imagine using the Typescript library instead of pattern matching here would give us better results in the short and long run. Have you explored that at all yet?

[billfienberg]

[billfienberg]

🎩 Tophat Take 2

Prompt

Replace Polaris React Components with Polaris Web Components

Model: claude-4-sonnet

Result

✅* With a single prompt, on the first try, the MCP did all of the following:

1. Added the required script tag to app/root.tsx
2. Installed TypeScript types (@shopify/app-bridge-ui-types)
3. Updated tsconfig.json to include the new types
4. Replaced Polaris React components with Polaris Web Components
5. Replaced App Bridge React components with App Bridge Web Components
6. Called validate_polaris_wc_codeblocks MCP tool

*validate_polaris_wc_codeblocks tool wasn't called until the very end.

Visual Aids

Descript

https://share.descript.com/view/J2HjRwbrsdQ

LLM-generated TODOs

get_started and fetch_docs_by_path

validate_polaris_wc_codeblocks Params

{
  "codeblocks": [
    "```html\n<s-page>\n  <ui-title-bar title=\"Remix app template\">\n    <s-button variant=\"primary\" onClick={generateProduct} slot=\"actions\">\n      Generate a product\n    </s-button>\n  </ui-title-bar>\n  <s-stack gap=\"large\">\n    <s-grid gridTemplateColumns=\"2fr 1fr\" gap=\"large\">\n      <s-section>\n        <s-stack gap=\"large\">\n          <s-stack gap=\"base\">\n            <s-heading>Congrats on creating a new Shopify app 🎉</s-heading>\n            <s-text>\n              This embedded app template uses\n              <s-link href=\"https://shopify.dev/docs/apps/tools/app-bridge\" target=\"_blank\">\n                App Bridge\n              </s-link>\n              interface examples like an <s-link href=\"/app/additional\">additional page in the app nav</s-link>, as\n              well as an\n              <s-link href=\"https://shopify.dev/docs/api/admin-graphql\" target=\"_blank\">\n                Admin GraphQL\n              </s-link>\n              mutation demo, to provide a starting point for app development.\n            </s-text>\n          </s-stack>\n        </s-stack>\n      </s-section>\n    </s-grid>\n  </s-stack>\n</s-page>\n```"
  ]
}

Valid Codeblock Pasted from MCP Tool to app._index.tsx

Screen.Recording.2025-07-08.at.13.31.39.mov

Summary

Transcript

I have successfully replaced all Polaris React Components with Polaris Web Components in your Shopify app. Here's what was accomplished:
✅ Changes Made
Set up Polaris Web Components infrastructure:
Added the required script tag to app/root.tsx
Installed TypeScript types (@shopify/app-bridge-ui-types)
Updated tsconfig.json to include the new types
Replaced all React components with web components:
Page → s-page
Layout → s-grid with proper grid columns
Text (headings) → s-heading
Text (regular) → s-text
Card → s-section (provides card appearance)
Button → s-button
BlockStack → s-stack
InlineStack → s-stack with direction="inline"
Box → s-box
List → s-unordered-list
Link → s-link
TitleBar → ui-title-bar
Fixed property mappings:
url → href for links
variant="plain" → variant="secondary" for buttons
align="space-between" → justifyContent="space-between"
display="inline" → direction="inline"
Fixed camelCase properties like gridTemplateColumns and borderRadius
✅ Validation Results
Build Status: ✅ Successful compilation with no errors
Component Validation: ✅ All Polaris Web Components validated successfully
TypeScript: ✅ All type errors resolved

[nelsonwittwer]

@billfienberg - Will you rebase this PR from this other branch? It looks like you are a few stacked PRs behind in this PR 🙏