FAQ
Common questions about integration, features, and the philosophy behind precision tooling.
How is Caliper different from Chrome DevTools?
Specialized for design engineering. Unlike DevTools, it handles simultaneous multi-element measurement, keyboard-driven precision, and visual projection tools for layout alignment.
Does it work with my framework?
Yes. Caliper is framework-agnostic. It runs as a standalone DOM overlay, fully compatible with Next.js, Vite, Astro, Nuxt, Vue, and plain HTML.
What is the Agent Bridge?
A high-speed link that exposes your local browser state to AI agents. It enables AI to visually audit your UI instead of guessing from code.
Does it work if I have multiple tabs open?
Gracefully. Each tab is assigned a unique session ID. Caliper tracks focus and only syncs the active tab’s state to your agent.
Is it safe for production?
Yes. When initialized inside a development check (e.g., process.env.NODE_ENV === 'development'), it is completely stripped from production bundles.
My AI Agent can't connect. What should I check?
Usually a port conflict. Ensure the bridge port is not being used by another process and verify the MCP relay is running in your terminal.
Where does my data go?
Nowhere. All processing is local. No UI data, source code, or telemetry is transmitted to external servers. Your privacy is a priority.
Can I customize the overlay?
Yes. Pass a configuration object to init() to override the default theme (colors) or command shortcuts (keys) to match your personal preference or brand.
Why do you use a custom MCP instead of a browser extension?
Extensions are sandboxed. Our MCP relay allows the AI agent to communicate directly with the browser's live layout engine without sandbox restrictions.