Add Website Designer contracts, MCP tools, and ai-elements UI (chat + preview + export)

[Copilot]

This PR implements the Website Designer flow described in the plan: a strict shared design contract (DesignSpec/DesignIntent), MCP-style tools to generate/iterate/export specs, and a two-pane ai-elements UI that turns prompts into a live themed preview.

• Data contracts (Phase 1)

  • Added packages/elements/src/types/designer.ts with strongly typed interfaces for:
    • DesignSpec (theme, layout, sections, intent)
    • DesignIntent
    • section variants (hero, features, pricing, footer)
  • Added Zod validation schemas for all contracts to enforce deterministic shape at tool boundaries.

• MCP-style design tools (Phase 2)

  • Added packages/elements/src/mcp/designer-tools.ts:
    • generateDesignSpec(prompt)
    • iterateDesignSpec({ prompt, currentSpec, targetSectionId? })
    • generateCodeExport({ spec })
  • Added and exported input schemas for each tool.
  • Wired tools into docs chat tool registry in apps/docs/app/api/chat/tools.ts as:
    • generate_design_spec
    • iterate_design_spec
    • generate_code_export

• Website Designer UI (Phase 3/4)

  • Added packages/elements/src/components/WebsiteDesigner/website-designer.tsx and preview-renderer.tsx.
  • Implemented two-pane layout:
    • Left: chat + properties tabs, undo history, export action
    • Right: live preview renderer with section block mapping and theme-driven CSS vars
  • Added loading skeletons during tool execution and iterative update loop behavior (initial generate vs mutate existing spec).

• Package/docs integration

  • Added packages/elements/src/website-designer.tsx export surface for the new feature.
  • Added docs route apps/docs/app/[lang]/website-designer/page.tsx to render and interact with the component directly.

• Focused coverage for new behavior

  • Added:
    • packages/elements/__tests__/designer-tools.test.ts
    • packages/elements/__tests__/website-designer.test.tsx

// MCP tool wiring in docs chat API
export const createTools = (writer: UIMessageStreamWriter) =>
  ({
    generate_design_spec: tool({
      inputSchema: GenerateDesignSpecInputSchema,
      execute: async ({ prompt }) => generateDesignSpec({ prompt }),
    }),
    iterate_design_spec: tool({
      inputSchema: IterateDesignSpecInputSchema,
      execute: async ({ currentSpec, prompt, targetSectionId }) =>
        iterateDesignSpec({ currentSpec, prompt, targetSectionId }),
    }),
    generate_code_export: tool({
      inputSchema: GenerateCodeExportInputSchema,
      execute: async ({ spec }) => generateCodeExport({ spec }),
    }),
    // existing tools...
  }) satisfies ToolSet;

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• example.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl 0/dist/node-gyp-bin/sh (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl b8a74d4d3a59b0349073bd67e610d/19cf0bd0e52-1064/node_modules/.bin/oxfmt (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl @1.55.0/node_modules/oxlint/bin/oxlint (dns block)
• fonts.googleapis.com
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/ai-elements/ai-elements/apps/docs/node_modules/.bin/../next/dist/bin/next build (dns block)
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/ai-elements/ai-elements/apps/docs/node_modules/.bin/../next/dist/bin/next build git conf�� --local credential.username b8a74d4d3a59b0349073bd67e610d/19cf0bd0e52-1064/node_modules/.bin/oxfmt (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/ai-elements/ai-elements/node_modules/.pnpm/[email protected]_@babel+[email protected]_@opentelemetry+[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/lib/start-server.js (dns block)
• models.dev
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl 0/dist/node-gyp-bin/sh (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl b8a74d4d3a59b0349073bd67e610d/19cf0bd0e52-1064/node_modules/.bin/oxfmt (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1208/chrome-headless-shell-linux64/chrome-headless-shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AvoidUnnecessaryBeforeUnloadCheckSync,BoundaryEventDispatchTracksNodeRemoval,DestroyProfileOnBrowserClose,DialMediaRouteProvider,GlobalMediaControls,HttpsUpgrades,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Transl @1.55.0/node_modules/oxlint/bin/oxlint (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.