Skip to main content

Example prompts

Copy-paste prompts you can give to your agent. They assume the Bryntum skill and MCP server are installed. Adjust the framework, product, and data shape to your project.

The pattern that makes these work: state the framework, the product, the version, the data, and tell the agent to verify with the MCP server before writing code.

Scaffold a component​

Add a Bryntum Gantt to this React + Vite app. Use the trial package at version 7.2.0 via the npm alias pattern. Seed it with ~8 tasks across 3 levels of nesting and a couple of dependencies. Theme: svalbard-light, font: Poppins. Size it to fill the viewport. Look up the current Gantt config with the Bryntum MCP server before writing code.

Add a feature to an existing component​

The Scheduler in src/Schedule.tsx needs resource grouping and a custom event renderer that shows the assignee's initials. Use the MCP server to confirm the current config names for grouping and event rendering at our installed version before editing. Don't guess API names.

Wire up a backend (CrudManager)​

Add a CrudManager to this Scheduler talking to our Express backend. loadUrl is GET /api/load, syncUrl is POST /api/sync. Use an assignments store rather than resourceId on events. On the backend, handle phantom IDs: insert events first, map $PhantomId to real IDs, resolve assignment references, and return the mapping. Build partial UPDATE statements dynamically from only the fields present in each sync request.

Theming and fonts​

Restyle this Bryntum Grid to match our brand. Switch to the stockholm-light theme. Set the widget font to Inter (load it from Google Fonts and override .b-widget). Use CSS variables like --b-widget-background for color tweaks rather than overriding individual class styles. Remember there is no --b-font-family variable.

Debugging​

The Bryntum Calendar renders as a thin strip about 10em tall. Diagnose and fix the sizing — the parent containers probably don't have an explicit height. Then verify the fix fills the viewport.

Our sync requests are wiping out fields that weren't edited. Review the backend UPDATE logic — Bryntum only sends changed fields in updated, so a fixed SET clause overwrites the rest with null. Rebuild the SET clause dynamically.

Migration​

We're on Bryntum Grid v6 and upgrading to v7. Use the MCP server to look up the v6→v7 CSS migration. Replace the legacy single-file theme imports with the v7 pattern (FontAwesome + structural grid.css + svalbard-light.css), and remove any SASS.

Tips for writing your own​

  • Name the product and framework explicitly — "Bryntum Scheduler in Angular", not just "a scheduler".
  • Pin the version so the agent looks up the right docs.
  • Tell it to use the MCP server for anything it's unsure about.
  • Describe the data shape (how many resources/events/tasks, the fields you care about) so the seed data is useful.
  • Ask it to size the component and pick a theme, or it'll leave defaults.