← AppsAI

Canvas Tools

25 tools for React/Next.js frontend development — manage components, styles, and assets.

File Operations

canvas_SET_RAW_FILE

Write or update any file in the frontend codebase

Params: projectId, filePath, content

canvas_READ_RAW_FILE

Read the contents of any frontend file

Params: projectId, filePath

canvas_LIST_FILES

List all files in the frontend project

Params: projectId, path?

canvas_GREP_RAW_FILES

Search for text patterns across frontend files

Params: projectId, pattern, path?

Element Operations

canvas_GET_ELEMENT_TREE

Get the component tree for a file as structured data

Params: projectId, filePath

canvas_GET_ELEMENT

Get details of a specific element by ID

Params: projectId, filePath, elementId

canvas_SEARCH_ELEMENTS

Search for elements by tag, class, or text content

Params: projectId, query

canvas_SET_ELEMENT

Create or update a React element in a component

Params: projectId, filePath, elementId, element

Styling

canvas_SET_CSS_VARIABLE

Set a CSS custom property (design token)

Params: projectId, name, value

canvas_SET_BASE_STYLE

Set base/reset styles for HTML elements

Params: projectId, selector, styles

canvas_SET_RAW_CSS

Write raw CSS to a stylesheet

Params: projectId, filePath, css

canvas_SET_UTILITY_CLASS

Create a reusable utility CSS class

Params: projectId, className, styles

canvas_SET_CUSTOM_STYLE

Create a custom component style

Params: projectId, name, styles

canvas_SET_FONT

Add or configure a font family

Params: projectId, fontFamily, config

canvas_SET_THEME

Update theme configuration (colors, spacing, etc.)

Params: projectId, theme

Imports & Dependencies

canvas_SET_IMPORT

Add an import statement to a file

Params: projectId, filePath, importStatement

canvas_SET_DEPENDENCY

Add or update an npm package dependency

Params: projectId, package, version

canvas_UPDATE_NEXT_CONFIG

Update next.config.js settings

Params: projectId, config

canvas_SET_ENV_VARIABLE

Set an environment variable

Params: projectId, key, value

Asset Generation

canvas_CREATE_IMAGE

Generate an image using AI (costs credits)

Params: projectId, prompt, options?

canvas_CREATE_VIDEO

Generate a video using AI (costs credits)

Params: projectId, prompt, options?

canvas_ADD_UI_COMPONENT

Add a pre-built UI component from the library

Params: projectId, componentName, targetPath

Backend Integration

canvas_GET_BACKEND_SHAPE

Get the shape/schema of backend cloud functions

Params: projectId

Common Patterns

Adding a new component

  1. 1Use canvas_SET_RAW_FILE to create the component file
  2. 2Use canvas_SET_IMPORT to add necessary imports
  3. 3Use canvas_SET_ELEMENT to add it to a parent component

Updating styles

  1. 1Use canvas_GET_ELEMENT to see current element props
  2. 2Use canvas_SET_ELEMENT to update className or style
  3. 3Or use canvas_SET_CSS_VARIABLE for global design tokens

Finding code

  1. 1Use canvas_GREP_RAW_FILES to search across files
  2. 2Use canvas_SEARCH_ELEMENTS to find specific components
  3. 3Use canvas_GET_ELEMENT_TREE to understand file structure