feat(web-mcp): add optional WebMCP resource/plugin, demo & tests

[ghiscoding]

vibe coded with copilot using Claude Sonnet 4.6 for brainstorming and GPT-5 mini for the rest

What

add a new Web MCP optional package/external resource (plugin)

References

• original GitHub discussion proposed by @zewa666 Future Features and Ideas (2026+) #1971 (comment)
• Ag-Grid - AI Toolkit: https://www.ag-grid.com/angular-data-grid/ai-toolkit/

Description

• Summary: Adds a new optional package that exposes a Model Context Protocol (WebMCP) surface for SlickGrid, enabling browser-based assistants/agents to safely query schema, read grid data, and apply grid state (filters/sorting/column visibility) via registered MCP tools. The implementation intentionally lives in an opt-in package so core packages remain unchanged.

• What’s included:

  • Package: Adds web-mcp — SlickWebMcpService implements ExternalResource and registers MCP tools (read, schema, getState, applyState, filter helpers).
  • Demo: Adds an interactive demo in example43.ts + example43.html showing tool usage and simulated AI actions.
  • Docs: New AI Toolkit guidance at ai-toolkit.md describing tool payloads, Playwright/MCP example, and security/consent notes.
  • Tests: Unit tests at slick-web-mcp.service.spec.ts (Vitest — existing run: 9 tests pass). E2E Cypress test added at example43.cy.ts to validate the demo flow.
  • Monorepo wiring: Updates to tsconfig.packages.json and workspace:* entries so the new package participates as an optional workspace package without altering core packages.

• Key features & API:

  • init(grid: SlickGrid, containerService: ContainerService) — initializes and registers tools with navigator.modelContext when available.
  • Public helper methods/tools: getStructuredSchema(), getGridState(), applyGridState(state), read_slickgrid_data_<uid>, get_slickgrid_schema_<uid>, get_slickgrid_state_<uid>, apply_slickgrid_state_<uid>.
  • Tools accept and return JSON-serializable payloads and include size/limit safeguards; applyGridState delegates to existing services (FilterService, SortService, GridService) via containerService so behavior matches existing patterns.

• Security & UX:

  • Package is opt-in (no changes to core). The docs call out consent, sanitization, and privacy considerations; consumers should gate tool registration behind explicit user consent in production deployments.

• Testing & verification:

  • Unit tests: run Vitest for the package:

    pnpm vitest run packages/web-mcp

    (current run: tests pass — 9 tests)
  • Demo: start dev server and open the example (root dev task):

    pnpm install
    pnpm dev
    # then open the dev site and navigate to Example 43

  • Cypress E2E (run the specific spec):

    npx cypress run --spec "test/cypress/e2e/example43.cy.ts"

• Files to review:

  • web-mcp
  • slick-web-mcp.service.ts
  • slick-web-mcp.service.spec.ts
  • ai-toolkit.md
  • example43.ts
  • example43.cy.ts
  • tsconfig.packages.json

• Reference: This PR implements the WebMCP/AI Toolkit idea discussed in the repository discussion: Future Features and Ideas (2026+) #1971 (comment)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (9dcc1ff) to head (4df3864).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2599   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         199      200    +1     
  Lines       25168    25257   +89     
  Branches     8908     8941   +33     
=======================================
+ Hits        25168    25257   +89     

Flag	Coverage Δ
angular	100.0% <ø> (ø)
universal	100.0% <100.0%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pkg-pr-new]

angular-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/angular-slickgrid@2599

aurelia-slickgrid

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/aurelia-slickgrid@2599

slickgrid-react

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-react@2599

slickgrid-vue

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/slickgrid-vue@2599

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/angular-row-detail-plugin@2599

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/aurelia-row-detail-plugin@2599

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/react-row-detail-plugin@2599

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vue-row-detail-plugin@2599

@slickgrid-universal/binding

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/binding@2599

@slickgrid-universal/common

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/common@2599

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/composite-editor-component@2599

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-footer-component@2599

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/custom-tooltip-plugin@2599

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/empty-warning-component@2599

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/event-pub-sub@2599

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/excel-export@2599

@slickgrid-universal/graphql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/graphql@2599

@slickgrid-universal/odata

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/odata@2599

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pagination-component@2599

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/pdf-export@2599

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/row-detail-view-plugin@2599

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/rxjs-observable@2599

@slickgrid-universal/sql

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/sql@2599

@slickgrid-universal/text-export

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/text-export@2599

@slickgrid-universal/utils

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/utils@2599

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-bundle@2599

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/vanilla-force-bundle@2599

@slickgrid-universal/web-mcp

npm i https://pkg.pr.new/ghiscoding/slickgrid-universal/@slickgrid-universal/web-mcp@2599

commit: 4df3864

[ghiscoding]

@zewa666 can you also review this PR when you get a chance, I wanted to do it before I lose all my tokens with the new copilot billing 😅
This PR adds a Web MCP plugin and I told it to compare against the one that Ag-Grid provides in:
https://www.ag-grid.com/angular-data-grid/ai-toolkit/

it also added a new vanilla Example 43, it's pretty basic but it follows the standardized MCP approach that would be useful for the AI since it's standardized I guess.

Anyway, let me know if that covers it, then if it does, I'll replicate the same demo in all other frameworks in the same PR but only after your confirmation

[zewa666]

thats awesome man. few things to note:

• exposing the webmcp on all examples is good bht I'd keep this one only with the buttons to not clutter the others
• the setter of the bew gridstate should have some basic validations and respond to malformed states
• as for trying out we could reference https://github.com/beaufortfrancois/model-context-tool-inspector which is a simple prompt tool that as far as I know can use also the lately shipped gemini-nano of chrome. so free executions

[ghiscoding]

@zewa666 I've asked copilot to address the last 2 but I don't really understand what you meant for the first one (it's currently only this new Example 43 in vanilla, did you mean to not create it in other frameworks or did you mean something else...?)

Could you also review the other open PR #2591, it's been opened for couple weeks waiting for your quick review since it's related to your Tree Data level depth request 😉

[zewa666]

oh I thought you want to add the ai demo buttons to all examples. so I understood it wrong. yeah it definitely makes sense adding it to all framework variants of example 43.

I'll have to review the other PR next week as I'm not next to a PC until monday.

Btw, I'm a big fan of you stating the model used for vibe coded features. its actually quite impressive seeing what those tiny models can achieve. I'm about to receive a new Spark Mini for research at work next week with 100gb unified RAM, looking forward to see whether a local agent supporting llm can work on that for agentic coding tasks.

Ps: perhaps check out https://claude.com/contact-sales/claude-for-oss for Slickgrid

[ghiscoding]

I'm about to receive a new Spark Mini for research at work next week with 100gb unified RAM, looking forward to see whether a local agent supporting llm can work on that for agentic coding tasks.

I tried qwen 3.5 7B with LM Studio and it's not that good at SlickGrid in general but regular framework coding is probably ok. I think a 7B might not be enough to have the entire SlickGrid monorepo project as context. I tried it with Grid Preset and it kept hallucinating the wrong structure and even after telling 5x times it's wrong, I just stopped lol... but 100Gb RAM that's another story 😮

Ps: perhaps check out https://claude.com/contact-sales/claude-for-oss for Slickgrid

Thanks I didn't know about this one, but it looks like I'm far from fitting in their minimum requirements 😅

... but anyway, I'm pretty much done with everything in SlickGrid, the only other thing that I might look into in the future is Ag-Grid cell Formulas and that's about it. I've done everything else 😆 ..so the free copilot is good enough for small changes