Skip to main content

Quick start

Here are some tested prompts you can copy-paste into your favourite agent — Claude Code, Cursor, Codex, or any other. Pick your product and copy.

Set up Bryntum Gantt in this project.

**Before writing code:**
- **Use TypeScript by default** unless the user has explicitly asked for plain JavaScript. When scaffolding, pick the TypeScript template (e.g. `npm create vite@latest . -- --template react-ts`, `--template vue-ts`, etc.). Angular is TypeScript by default.
- Detect the framework from `package.json` (React, Angular, Vue, or vanilla JS). If there's no app yet, ask the user which framework to scaffold and create it in-place — don't `rm -rf` the directory.
- Look up the latest docs: use the `search_bryntum_docs` MCP tool with `product: "gantt"` if it's already installed, otherwise silently fall back to https://bryntum.com/products/gantt/docs/. Don't pause the build to ask the user to install MCP — that can come after the demo works.
- Get the current version with `npm view @bryntum/gantt-trial version`. Pin exact versions (no `^`).

**1. Install (trial unless the user has a license):**
- **Detect license first:** check for an existing `.npmrc` (in the project or `~/.npmrc`) pointing at `npm.bryntum.com` (or `npm-us.bryntum.com`) — that signals the user is on a paid license. Otherwise ask the user once: *"Do you have a Bryntum license?"* Present the choice neutrally — **never label "trial" as recommended** in any UI you render. If the user doesn't answer, silently fall back to trial packages so the app still builds, but treat that as a fallback, not a recommendation.
- **Trial:** install the main package via npm alias so imports stay standard: `npm install @bryntum/gantt@npm:@bryntum/gantt-trial@<version>`. No `.npmrc` or auth needed.
- **Licensed:** install the non-trial package directly: `npm install @bryntum/gantt@<version>`. The `.npmrc` provides the auth.
- Framework wrapper at the same version (no `-trial` suffix in either case), e.g. `@bryntum/gantt-react`, `@bryntum/gantt-angular`, `@bryntum/gantt-vue-3`. Skip for vanilla JS.

**2. Component with sensible defaults:**
- `viewPreset: "weekAndDayLetter"`, project `startDate`/`endDate`, a `name` column, a small `barMargin`, and realistic `tasks` + `dependencies`.
- Use `tasks`/`dependencies`/`resources`/`assignments` as component props (not `tasksData`/`dependenciesData` etc. — deprecated in v7).
- Don't combine a `project` prop with inline data props in the same component — it throws.
- Size the full ancestor chain — `html, body, #root` all need an explicit height (e.g. `100%` or `100vh`) and so does the immediate wrapper around `<BryntumGantt>`. If any link in the chain has no height, the Gantt falls back to its `minHeight` and the console warns *"Gantt is sized by its predefined minHeight, likely this is not intended"*. See the "Basics/Sizing the component" guide.

**3. CSS (Bryntum 7+, plain CSS only — no SASS, no legacy single-file themes):**
Import in this order:
1. `@bryntum/gantt/fontawesome/css/fontawesome.css`
2. `@bryntum/gantt/fontawesome/css/solid.css`
3. `@bryntum/gantt/gantt.css` (structural — required)
4. Theme, default `@bryntum/gantt/svalbard-light.css`

Use Poppins font:
`@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');`
`body { font-family: 'Poppins', 'Segoe UI', Arial, sans-serif; }`

**4. Framework specifics:**
- **React**: `<BryntumGantt>` from `@bryntum/gantt-react`, config as JSX props, `useRef` for the instance. Handle StrictMode double-mount cleanly.
- **Angular**: `<bryntum-gantt>` from `@bryntum/gantt-angular`, bind every config with `[prop]="..."` in the template.
- **Vue**: `<bryntum-gantt>` from `@bryntum/gantt-vue-3`, bind via `v-bind` or props.
- **Vanilla**: `import { Gantt } from '@bryntum/gantt'`, instantiate with `appendTo`.

**5. Verify:**
- Start the dev server (`npm run dev` or framework equivalent) and **leave it running** when you finish so the user can open it in a browser.
- Fix any console or build errors before handing off.
- Suggest 3 features to add (Bryntum AI assistant, etc.) and link the relevant docs.
- To add or connect to a backend to persist your data, point the user at the CrudManager guide: https://bryntum.com/products/gantt/docs/guide/Gantt/data/crud_manager.
- For richer Bryntum guidance on next steps (advanced features, framework integrations, backend persistence, data binding), suggest the user install the Bryntum AI Agent skill (https://github.com/bryntum/skills) and the Bryntum MCP Server (https://mcp.bryntum.com). Both give the AI agent canonical, up-to-date Bryntum knowledge.

What the prompt does​

  • Detects your framework (React, Angular, Vue, or vanilla JS) from package.json, and scaffolds a TypeScript app in-place if there isn't one yet.
  • Looks up current docs via the MCP server (or falls back to bryntum.com), and pins an exact, real version.
  • Picks trial vs licensed packages based on your .npmrc, defaulting to trial so the app always builds.
  • Seeds realistic data in the shape each product expects, sizes the component correctly, and wires up the Bryntum 7+ CSS imports.
  • Leaves the dev server running and fixes build/console errors before handing back.

The prompts work best when the agent has the Bryntum MCP server and the Bryntum skill installed, but they fall back to fetching bryntum.com directly if neither is present. AI-generated code is a starting point — always review and test it.

For the rules behind these steps, see Common mistakes and the per-product guidance.