codemap_search_elements

Search for DOM elements in template files (Vue, HTML, etc.). Separate from symbol search.

searchelementsdomtemplate

Parameters

Name	Type	Required	Description
`query`	`string`	✅ Required	Search query for element names or tags
`tag`	`string`	❌ Optional	Filter by HTML tag (e.g., 'div', 'span', 'button')
`hasId`	`boolean`	❌ Optional	Filter by elements with explicit IDs (true) or auto-numbered (false)
`maxResults`	`number`	❌ Optional	Maximum number of results to return (default: 20)

Usage Examples

MCP Usage (for AI Agents like Claude)

json

{
  "name": "codemap_search_elements",
  "arguments": {
    "query": "button"
  }
}

Example Output

JSON Response

json

{
  "success": true,
  "results": [
    {
      "element": {
        "tag": "button",
        "id": "submit-btn",
        "classes": [
          "btn",
          "btn-primary"
        ]
      },
      "file": {
        "relativePath": "src/components/LoginForm.vue",
        "name": "LoginForm.vue"
      }
    }
  ],
  "totalMatches": 1,
  "query": {
    "query": "button"
  }
}

ℹ️When to Use This Tool

Find DOM elements in templates
Locate UI components by element
Audit element usage
Find elements for styling
Navigate Vue/HTML templates

💡Common Patterns

Find by Element Type

const buttons = await codemap.search.searchElements({ query: 'button' });

Filter by Tag

const divs = await codemap.search.searchElements({
  query: 'container',
  tag: 'div'
});

💡Pro Tips

Separate from symbol search - This searches DOM elements, not code symbols
Use for templates - Works with Vue, HTML, and other template files
Filter by ID - Use hasId to find only elements with explicit IDs

✅Best Practices

Search broadly first - Start with general terms
Use tag filters - Narrow by specific HTML tags
Check element structure - Review id/classes for specificity

⚠️Common Mistakes

❌ Mistake: Searching for code symbols

await codemap.search.searchElements({ query: 'function' });

✅ Instead: Use search for symbols

await codemap.search.search({ query: 'function', mode: 'symbol' });