feat: introduce UI5 Web Components for React MCP Server

docs/ProjectTemplates.mdx

@@ -1,9 +1,18 @@
-import { Footer, LabelWithWrapping, ProjectTemplate, TableOfContent } from '@sb/components';
+import { Footer, ProjectTemplate, TableOfContent } from '@sb/components';
 import NextLogo from '@sb/images/logo-nextjs.svg';
 import ReactRouterLogo from '@sb/images/logo-react-router.svg';
 import ViteLogo from '@sb/images/logo-vitejs.svg';
 import { Meta } from '@storybook/addon-docs/blocks';
 import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
+import projectTemplates from './project-templates.json';
+
+export const logos = {
+  nextjs: NextLogo,
+  vite: ViteLogo,
+  'react-router': ReactRouterLogo,
+};
+
+export const repoBase = 'https://github.com/UI5/webcomponents-react/tree/main/';
 
 <Meta title="Project Templates & Examples" />
 
@@ -18,113 +27,52 @@ A curated list of minimal project templates and examples to get started using UI
 <br />
 
 <FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>
-  <ProjectTemplate
-    title={'Next.js'}
-    subtitle={'App Router'}
-    logo={NextLogo}
-    logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/templates/nextjs-app'}
-    stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/nextjs-app"
-    isTypeScript
-    isTemplate
-  />
-  <ProjectTemplate
-    title={'Next.js'}
-    subtitle={'Pages Router'}
-    logo={NextLogo}
-    logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/templates/nextjs-pages'}
-    isTypeScript
-    isTemplate
-  />
-  <ProjectTemplate
-    title={'Vite.js'}
-    logo={ViteLogo}
-    logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/templates/vite-ts'}
-    isTypeScript
-    isTemplate
-    stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/vite-ts?file=src%2FApp.tsx"
-  />
+  {projectTemplates
+    .filter((t) => t.type === 'template')
+    .map((t) => (
+      <ProjectTemplate
+        key={t.path}
+        title={t.name}
+        subtitle={t.variant}
+        logo={logos[t.logo]}
+        logoAttribution={t.logoAttribution}
+        href={`${repoBase}${t.path}`}
+        stackBlitzHref={t.stackBlitz}
+        isTypeScript={t.typescript}
+        isTemplate
+      />
+    ))}
 </FlexBox>
 
 ## Examples
 
 <br />
 
 <FlexBox wrap={FlexBoxWrap.Wrap} style={{ width: '100%', gap: '1rem' }} justifyContent={FlexBoxJustifyContent.Start}>
-  <ProjectTemplate
-    title={'Next.js'}
-    subtitle={'App Router'}
-    logo={NextLogo}
-    logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/examples/nextjs-app'}
-    stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/examples/nextjs-app"
-    isTypeScript
-  >
-    <ul>
-      <li>
-        <Label>Next.js Template using the App Router</Label>
-      </li>
-      <li>
-        <Label>Data Fetching using React Server Components</Label>
-      </li>
-    </ul>
-  </ProjectTemplate>
-  <ProjectTemplate
-    title={'Next.js'}
-    subtitle={'Pages Router'}
-    logo={NextLogo}
-    logoAttribution={'Next.js Logo. Original Source: https://vercel.com/design/brands#next-js'}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/examples/nextjs-pages'}
-    isTypeScript
-  >
-    <ul>
-      <li>
-        <Label>Next.js Template using the Pages Router</Label>
-      </li>
-      <li>
-        <Label>API Routes</Label>
-      </li>
-    </ul>
-  </ProjectTemplate>
-  <ProjectTemplate
-    title={'Vite.js'}
-    logo={ViteLogo}
-    logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/examples/vite-ts'}
-    isTypeScript
-    stackBlitzHref="https://stackblitz.com/github/UI5/webcomponents-react/tree/main/examples/vite-ts?file=src%2Fmain.tsx"
-  >
-    <ul>
-      <li>
-        <LabelWithWrapping>{`Routing and Data Fetching using the createBrowserRouter of React Router v7`}</LabelWithWrapping>
-      </li>
-      <li>
-        <Label>Cypress Component & E2E Test setup</Label>
-      </li>
-      <li>
-        <Label>Theming</Label>
-      </li>
-    </ul>
-  </ProjectTemplate>
-  <ProjectTemplate
-    title={'React Router v7'}
-    subtitle={'Previously: Remix Template'}
-    logo={ReactRouterLogo}
-    logoAttribution={'React Router Logo. Original Source: https://reactrouter.com'}
-    href={'https://github.com/UI5/webcomponents-react/tree/main/examples/react-router-ts'}
-    isTypeScript
-  >
-    <ul>
-      <li>
-        <Label>{`React Router v7 with server side rendering`}</Label>
-      </li>
-      <li>
-        <Label>Theming</Label>
-      </li>
-    </ul>
-  </ProjectTemplate>
+  {projectTemplates
+    .filter((t) => t.type === 'example')
+    .map((t) => (
+      <ProjectTemplate
+        key={t.path}
+        title={t.name}
+        subtitle={t.variant}
+        logo={logos[t.logo]}
+        logoAttribution={t.logoAttribution}
+        href={`${repoBase}${t.path}`}
+        stackBlitzHref={t.stackBlitz}
+        isTypeScript={t.typescript}
+      >
+        {t.features && (
+          <ul>
+            {t.features.map((f) => (
+              <li key={f}>
+                <Label>{f}</Label>
+              </li>
+            ))}
+          </ul>
+        )}
+      </ProjectTemplate>
+    ))}
 </FlexBox>
 
 <Footer />

docs/project-templates.json

@@ -0,0 +1,82 @@
+[
+  {
+    "name": "Next.js",
+    "variant": "App Router",
+    "framework": "nextjs",
+    "type": "template",
+    "path": "templates/nextjs-app",
+    "typescript": true,
+    "stackBlitz": "https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/nextjs-app",
+    "logo": "nextjs",
+    "logoAttribution": "Next.js Logo. Original Source: https://vercel.com/design/brands#next-js"
+  },
+  {
+    "name": "Next.js",
+    "variant": "Pages Router",
+    "framework": "nextjs",
+    "type": "template",
+    "path": "templates/nextjs-pages",
+    "typescript": true,
+    "logo": "nextjs",
+    "logoAttribution": "Next.js Logo. Original Source: https://vercel.com/design/brands#next-js"
+  },
+  {
+    "name": "Vite.js",
+    "framework": "vite",
+    "type": "template",
+    "path": "templates/vite-ts",
+    "typescript": true,
+    "stackBlitz": "https://stackblitz.com/github/UI5/webcomponents-react/tree/main/templates/vite-ts?file=src%2FApp.tsx",
+    "logo": "vite",
+    "logoAttribution": "Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg"
+  },
+  {
+    "name": "Next.js",
+    "variant": "App Router",
+    "framework": "nextjs",
+    "type": "example",
+    "path": "examples/nextjs-app",
+    "typescript": true,
+    "stackBlitz": "https://stackblitz.com/github/UI5/webcomponents-react/tree/main/examples/nextjs-app",
+    "logo": "nextjs",
+    "logoAttribution": "Next.js Logo. Original Source: https://vercel.com/design/brands#next-js",
+    "features": ["Next.js Template using the App Router", "Data Fetching using React Server Components"]
+  },
+  {
+    "name": "Next.js",
+    "variant": "Pages Router",
+    "framework": "nextjs",
+    "type": "example",
+    "path": "examples/nextjs-pages",
+    "typescript": true,
+    "logo": "nextjs",
+    "logoAttribution": "Next.js Logo. Original Source: https://vercel.com/design/brands#next-js",
+    "features": ["Next.js Template using the Pages Router", "API Routes"]
+  },
+  {
+    "name": "Vite.js",
+    "framework": "vite",
+    "type": "example",
+    "path": "examples/vite-ts",
+    "typescript": true,
+    "stackBlitz": "https://stackblitz.com/github/UI5/webcomponents-react/tree/main/examples/vite-ts?file=src%2Fmain.tsx",
+    "logo": "vite",
+    "logoAttribution": "Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg",
+    "features": [
+      "Routing and Data Fetching using the createBrowserRouter of React Router v7",
+      "Cypress Component & E2E Test setup",
+      "Theming"
+    ]
+  },
+  {
+    "name": "React Router v7",
+    "variant": "Previously: Remix Template",
+    "framework": "react-router",
+    "type": "example",
+    "path": "examples/react-router-ts",
+    "typescript": true,
+    "logo": "react-router",
+    "logoAttribution": "React Router Logo. Original Source: https://reactrouter.com",
+    "features": ["React Router v7 with server side rendering", "Theming"]
+  }
+]

eslint.config.mjs

@@ -20,6 +20,8 @@ const ignorePatterns = {
     'packages/compat/dist',
     'packages/main/dist',
     'packages/main/wrappers',
+    'packages/mcp-server/dist',
+    'packages/mcp-server/scripts',
     'packages/main/src/i18n/i18n-defaults.ts',
     'packages/main/src/generated',
     'packages/cypress-commands/dist',
@@ -60,7 +62,7 @@ const config = tseslint.config(
 
       parserOptions: {
         projectService: {
-          allowDefaultProject: ['packages/*/postcss.config.mjs'],
+          allowDefaultProject: ['packages/*/postcss.config.mjs', 'packages/*/ava.config.js'],
           // eslint-disable-next-line camelcase
           maximumDefaultProjectFileMatchCount_THIS_WILL_SLOW_DOWN_LINTING: 1000,
         },
@@ -253,7 +255,7 @@ const config = tseslint.config(
   },
 
   {
-    files: ['packages/cli/**/*', 'scripts/**/*', '.github/**/*', 'config/**/*'],
+    files: ['packages/cli/**/*', 'packages/mcp-server/**/*', 'scripts/**/*', '.github/**/*', 'config/**/*'],
     languageOptions: {
       globals: {
         ...globals.node,

package.json

@@ -36,7 +36,8 @@
     "create-cypress-commands-docs": "documentation build ./packages/cypress-commands/src/commands.ts -f json -o ./packages/cypress-commands/api-commands.json && documentation build ./packages/cypress-commands/src/queries.ts -f json -o ./packages/cypress-commands/api-queries.json",
     "sb:prepare-cem": "node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents --out ./.storybook/custom-element-manifests/main.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-fiori --out ./.storybook/custom-element-manifests/fiori.json && node packages/cli/dist/bin/index.js resolve-cem --packageName @ui5/webcomponents-ai --out ./.storybook/custom-element-manifests/ai.json",
     "create-theming-parameters": "node scripts/generate-theming-parameters.js",
-    "create-exports": "node --experimental-strip-types scripts/create-export-paths.ts"
+    "create-exports": "node --experimental-strip-types scripts/create-export-paths.ts",
+    "build:mcp": "yarn workspace @ui5/webcomponents-react-mcp update"
   },
   "dependencies": {
     "@stackblitz/sdk": "1.11.0",