DesignLayer

Fetch a component from chat

Last updated: October 16, 2026

From a connected Cursor or Claude Code, search with search_catalog and fetch one section with get_component.

What you'll end with

A section in the repository, fetched by id, without opening the site. The payload is the same job as Copy for Cursor.

A successful get_component spends a copy under the same rules as the button. Plus and Pro have unlimited component copies. search_catalog does not spend a copy.

Before you start

Connect Cursor and Claude Code is done, and DesignLayer is Connected.

Step 1: Search

Ask for a role or a word.

text
Use DesignLayer search_catalog to find a pricing section. List each candidate's id and previewUrl.

What search_catalog accepts

  • query: a string such as sakura, hero, footer, or pricing

  • kind: hero, section, motion, or navigation

  • category: hero, footer, pricing, gallery, and the rest listed in Component ids and categories

  • limit: 1 to 40

The result includes ids, short descriptions, preview URLs, and page URLs. It does not include files.

Step 2: Fetch one

When you have an id, have the agent call get_component. The id is the last segment of the component page URL.

text
Use DesignLayer get_component for sakura-editorial-poster and mount it on app/page.tsx.
Write each files[].source to files[].path, and install npmDependencies if present.
Match the previewUrl motion and spacing.

What comes back

get_component is the same job as Copy for Cursor on the site. The JSON at the end has files (path and source) and npmDependencies. Above that are the preview URL and the integrate instructions.

Do not let the agent invent the files instead of reading the JSON. After it writes them, check with Match the live preview.

The tool that fetches a full-page Template is not enabled.

Fetch a component from chat | DesignLayer