Skip to main content
Commands give you precise control over edits without writing long prompts. Type / to run screen-aware shortcuts on whatever page is open, or type @ to lock edits to a specific file, folder, or task. Both run from the chat input and are only available in the web browser editor.
Commands use fewer tokens than open-ended prompts. Quoting exact text or naming the area you want to change avoids follow-up messages.

​
How commands work

/ commands@ commands
What they doScreen-aware shortcuts that update the page you have openScope edits to a specific file, folder, or task
How to triggerType / in chat and browse or filter the popup menuType @ in chat and pick a target from the picker
TargetingAutomatically targets the current open screenLocks scope to your selected file, folder, or task
Best forLayout fixes, content changes, theme updates, integrationsPrecise edits to known files, isolated component changes
After a command runs, you see a short summary and a preview link to review the changes.

​
/ commands

Slash commands automatically target whatever page or screen you have open. You do not need to specify a file.
1

Open the screen you want to edit

Navigate to the page or screen you want to change. / commands automatically target whatever is currently open.
2

Type `/` in the chat input

A popup menu appears with all available commands. Browse the list or start typing to filter.
Slash command menu open in Rocket chat showing available commands.Slash command menu open in Rocket chat showing available commands.
3

Select a command and describe what you want

Pick a command from the menu, then write your instruction in natural language. Reference sections, elements, or quote exact text for the most accurate result.
Slash command result shown in chat after applying a command.Slash command result shown in chat after applying a command.

​
Phrasing patterns

These patterns work well with most / commands. Replace something:
  • /Update Content change "Old text" to "New text" in [section name]
Insert something new:
  • /Add Element add [element description] to [area]
Fix a specific issue:
  • /Fix Layout Issues in [area or breakpoint]
Examples:
  • /Update Content change "Get started" to "Launch now" in hero section
  • /Remove Element testimonial card three in reviews section
  • /Generate Image replace team photo in About section with a modern workspace photo
  • /Fix Layout Issues in pricing grid

​
Available / commands

Browse the full command catalog below. Commands are organized by platform (Web or Mobile) and category.
Purpose: Change the app name in titles, UI, and metadata.Examples:
  • /Update App Name Nova Suite
  • /Update App Name Atlas
For custom text blocks that still show the old name, use /Update Content.
Purpose: Apply a new color scheme across your entire web app.Examples:
  • /Change App Theme switch to a light theme with navy primary and soft gray background
  • /Change App Theme primary color #4F46E5 and accent #F97316
If colors look off after a big change, follow up with /Fix Theme Switching.
Purpose: Add coordinated light and dark theme options to your app.Examples:
  • /Add Light/Dark Theme
  • /Add Light/Dark Theme with higher contrast dark mode for text and buttons
Use /Fix Theme Switching if toggling between modes does not update all areas.
Purpose: Create custom AI-generated SVG illustrations, hero visuals, section graphics, icons, and diagrams tailored to your app. SVGs are vector-based, so they scale to any size without losing quality.Examples:
  • /Generate SVG Illustration replace the hero image with a custom drawing of a rocket launching from servers
  • /Generate SVG Illustration add a process flow illustration showing fresh farms to cleaning to factory processing
  • /Generate SVG Illustration create an animated notification bell icon with a gentle swing animation, duotone style, for the subscribe section
Describe the style (isometric, geometric, line art, gradient), intended placement (hero, section, icon), and colors for best results.

​
@ commands

Use @ commands to scope edits to a specific file, folder, or task. This is useful when you know exactly which part of the codebase you want to change.
1

Trigger the picker

Start your message with @, or insert it anywhere in your sentence. The picker opens in chat with Files & Folders and Tasks options.
@ command picker open in Rocket chat showing Files & Folders and Tasks options.@ command picker open in Rocket chat showing Files & Folders and Tasks options.
2

Select your target

Choose Files & Folders to scope edits to a file or folder, or choose Tasks to bring in context from a previous task. Your selection appears in the chat input.
3

Write your instruction

Continue typing. The scope is locked to your selection, so Rocket only modifies the targeted file or folder.
Selecting Tasks from the @ picker links a previous task and brings its context into the current conversation. See cross-task context for details on how this works.

​
Example patterns

Restructure content: @pages/faq.jsx Reorder questions so payments and refunds appear first. Keep answers unchanged. Improve guidance: @pages/onboarding.jsx Rewrite tips to be friendlier and shorter. Keep the same steps. Replace visuals: @assets/screenshots Replace getting-started.png with the latest capture. Update the caption to match. Clarify microcopy: @components/empty-state Rewrite the message to set expectations and add a single call to action. Localize a section: @pages/about.jsx Translate the team bio section to Spanish. Keep names and roles in English.

​
Guidelines

​
Referencing elements

  • Use clear terms like “hero section”, “footer”, “primary CTA button”, or “pricing image row”
  • Quote exact text for copy changes: "Get started" to "Launch now"
  • For @ commands, use exact paths: @pages/home.tsx, @components/card, or @docs/faq.md

​
Workflow tips

  • Make content changes first. If reflow causes issues, run /Fix Layout Issues
  • State locations for clarity: “in hero”, “in pricing”, “navigation bar”
  • Keep instructions specific. Small, focused edits work best

​
Troubleshooting

Nothing changed:
  • Confirm you are on the correct screen
  • For text changes: quote the exact phrase you want changed
  • For image changes: name the area precisely
Mobile layout issues:
  • Try /Fix Layout Issues for mobile breakpoints
  • If problems persist, run /Fix Layout Issues for tablet and mobile breakpoints
Cannot find the right file (@ commands):
  • Start typing the exact file name in the picker. Include the folder path if you know it.
Edit feels too broad (@ commands):
  • Split the request into smaller @ command messages, each scoped to a single file or folder

​
What’s next?

Chat with Rocket

Use chat alongside commands for full control over your Build project.

Visual edit

Click any element to change it directly without writing a prompt.

Code tab

Browse and edit your project source files directly.

Versions

Compare, roll back, and launch specific versions of your app.