Skip to main content
Glama

vibeside_inspect_component

Resolve a UI element's React or Vue component name, source file, and line number from a CSS selector to make precise source edits.

Instructions

Inspect a UI element to resolve its exact React Fiber or Vue component name, source file path, and line number for precise vibe-coding edits.

Input Schema

NameRequiredDescriptionDefault
selectorYesCSS selector of the UI element

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.17.0

TDQS

A3.8/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations exist, so the description carries the full behavioral burden. It discloses the return payload (component name, path, line), which is useful, but omits prerequisites such as an active browser connection and an element present in the DOM, and says nothing about behavior when the element is plain HTML with no framework component.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single tight sentence with the action and the payoff (exact component identity) front-loaded; no filler.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Because there is no output schema, the description usefully enumerates the returned fields. It is nearly complete for a one-parameter read tool, missing only prerequisite/connection context and fallback behavior for non-framework elements.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% for the single 'selector' parameter, so the schema already documents the CSS selector input. The description only vaguely gestures at 'a UI element' without adding format or resolution details beyond the schema, so the baseline 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Specific verb (Inspect) + resource (UI element) plus the exact outputs it resolves: React Fiber/Vue component name, source file path, and line number. This clearly distinguishes it from siblings like vibeside_inspect_contrast or vibeside_inspect_aria_element, which target different attributes.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'for precise vibe-coding edits' implies the context of use, but there is no explicit when-to-use versus alternatives such as vibeside_dom_snapshot or vibeside_extract_styles, and no exclusions or prerequisites stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Deploy Server

Other Tools