Provides tools to analyze the component dependency graph of Svelte/SvelteKit projects, including tracking imports, detecting unused components, and inspecting props and slots.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@svelte-component-graph-mcp Which components are unused in this project?"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server that exposes a Svelte/SvelteKit project's
component dependency graph over stdio, so an AI coding assistant can ask questions like
"what imports Button.svelte?", "which components are unused?", or "what does this route pull
in?" without opening an editor.
It is the command-line companion to the
Svelte Component Visualizer
VS Code extension and uses the same analysis: the Svelte compiler's AST + estree-walker to track
default and named .svelte imports, resolve static <svelte:component this={Identifier}> usage,
and flag imported-but-unused components.
A graph of every component and route in the project:
Nodes are keyed by workspace-relative path (src/lib/Button.svelte) — so two files that
share a name are never conflated — with a human-readable label, a type (component | route),
and an unused flag.
Links are import edges (source imports target).
The server is stateless across projects: every tool takes a root argument, so one running
server can answer questions about many projects (and many git worktrees) at once. Results are cached
per root and refreshed automatically when files change (checked on each call by mtime + size; only
changed files are re-parsed).
Related MCP server: CodeGraphMCPServer
This is a stdio MCP server — your MCP client launches it; you don't run it by hand. Requires Node.js ≥ 20. Pick the path that matches your setup.
Installs the MCP server and the companion /svelte-graph skill in one step:
/plugin marketplace add jamcgrath/svelte-component-graph-mcp
/plugin install svelte-component-graph@jamcgrathRestart Claude Code afterward so the server connects. Nothing to clone or build — it runs via npx.
(The two commands can be combined: /plugin install svelte-component-graph@jamcgrath/svelte-component-graph-mcp.)
claude mcp add svelte-graph --scope user -- npx -y svelte-component-graph-mcpAdd it to the client's MCP config:
{
"mcpServers": {
"svelte-graph": {
"command": "npx",
"args": ["-y", "svelte-component-graph-mcp"]
}
}
}(If you npm install -g svelte-component-graph-mcp, use "command": "svelte-component-graph-mcp" with
"args": [].)
Drive it with the MCP Inspector:
npx @modelcontextprotocol/inspector npx -y svelte-component-graph-mcproot argumentEvery tool requires root: an absolute path to the project you want analyzed. The server
validates that it exists, is a directory, and contains at least one .svelte file.
Guidance for the assistant when choosing root:
If a svelte.config.js exists in the current working directory, the project root is the cwd —
pass $PWD.
Otherwise (e.g. a monorepo, or the cwd is a subfolder), pass the project's absolute path explicitly.
A Claude Code skill (skills/svelte-graph/) teaches the assistant
when to reach for these tools (impact analysis, dead-code hunts, prop lookups) and how to resolve
root. The MCP tools work without it; the skill just makes the assistant use them more readily.
If you installed the plugin, you already have it — nothing to do. Otherwise, copy the folder into a skills directory:
# user-level (all your projects)
cp -r skills/svelte-graph ~/.claude/skills/svelte-graph
# or project-level (this repo only)
cp -r skills/svelte-graph .claude/skills/svelte-graphThen invoke it with /svelte-graph, or let the assistant trigger it automatically.
get_graph(root)The full graph.
{
"nodes": [
{ "id": "src/routes/+page.svelte", "label": "(page) /", "type": "route" },
{ "id": "src/lib/Button.svelte", "label": "Button", "type": "component" },
{ "id": "src/lib/Unused.svelte", "label": "Unused", "type": "component", "unused": true }
],
"links": [
{ "source": "src/routes/+page.svelte", "target": "src/lib/Button.svelte" }
]
}get_component(root, path)Details for one component/route, including its public API surface. path is workspace-relative
(src/lib/Button.svelte).
{
"id": "src/lib/Widget.svelte",
"label": "Widget",
"type": "component",
"unused": false,
"isRoute": false,
"parents": ["src/routes/+page.svelte"], // components that import it
"children": [], // components it imports
"props": [ // from $props()
{ "name": "size", "optional": true, "bindable": false },
{ "name": "open", "optional": true, "bindable": true },
{ "name": "title", "optional": false, "bindable": false },
{ "name": "rest", "optional": true, "bindable": false, "rest": true }
],
"slots": ["default", "footer"] // <slot> / <slot name="…">
}Props come from Svelte 5 runes ($props(), $bindable(), ...rest). Events are not a separate
concept in Svelte 5 — they are ordinary callback props, so they appear in props.
get_unused(root)Every component imported somewhere but never used in the importing file's template.
[
{ "id": "src/lib/Unused.svelte", "label": "Unused", "type": "component", "unused": true }
]get_routes(root)Every route (+page / +layout / +error) with the components it directly pulls in.
[
{
"id": "src/routes/dashboard/+page.svelte",
"label": "(page) /dashboard",
"children": ["src/lib/Icon.svelte", "src/lib/components/Button.svelte"]
}
]scan(root)Force a full re-parse (bypassing all caches) and return the resulting size.
{ "nodes": 7, "links": 5 }Relative imports (./, ../) resolve against the importing file's directory.
SvelteKit's $lib/… resolves to the nearest src/lib (monorepo-aware — it uses the importing
file's own src/, not a global root).
Other bare/aliased specifiers (custom Vite aliases beyond $lib) are kept as best-effort leaf
nodes rather than resolved to a file. As a corollary, a bare package import like
import X from 'some-pkg/Foo.svelte' is keyed by that raw path and would merge with a local file
at the same relative path (some-pkg/Foo.svelte) if one exists — an unlikely but possible collision.
<svelte:component this={…}> is resolved only when this is a plain imported identifier; dynamic
expressions (member access, conditionals) are not traced.
componentPaths / routePaths accept negation globs (!**/*.stories.svelte) to exclude files: a
file is included when it matches a positive pattern and no negation pattern.
props are read from the $props() object destructuring. A non-destructured binding
(let props = $props()) has no statically-known prop names, so props comes back empty for it.
MIT © James McGrath
Look up a single component or route by its workspace-relative path (e.g. "src/lib/Button.svelte"). Returns its parents (components that import it), children (components it imports), whether it is unused/a route, and its Svelte 5 public API surface: props (name, optional, bindable, rest) and slots.
| Name | Required | Description | Default |
|---|---|---|---|
| path | Yes | Workspace-relative path to the component, e.g. "src/lib/Button.svelte". | |
| root | Yes | Absolute path to the SvelteKit/Svelte project root to analyze. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description takes on the full burden of behavioral disclosure. It explains not only that the tool retrieves a component but also details the exact information returned: parents, children, unused/route status, and Svelte 5 API surface (props and slots). This goes beyond a basic 'get' and gives the agent a clear model of the tool's output, though it does not mention error handling or performance characteristics.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences: the first states the core purpose with an example, and the second enumerates the return value components. There is no redundancy or filler, and the most important information is front-loaded.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given there is no output schema, the description does a good job of explaining what the tool returns, listing parents, children, unused/route status, props, and slots. It could be more detailed about the structure of those return values (e.g., whether parents are paths or names), but the main categories are covered, making it sufficiently complete for an agent to select and invoke the tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already describes both parameters (path and root) with clear descriptions and an example, yielding 100% schema coverage. The description adds no additional parameter meaning beyond restating what the schema provides, so the baseline of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's function: 'Look up a single component or route by its workspace-relative path'. It specifies the resource (component or route), the identifying method (path), and provides an example. This distinguishes it from sibling tools like get_graph, get_unused, and get_routes, which target different scopes or queries.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies its use case—when you need details about a single specific component—but it does not explicitly mention when to use it over alternatives or provide exclusions. Sibling tools exist, but the description does not reference them, leaving the agent to infer the appropriate context.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Return the full Svelte component dependency graph for a project: every component/route node (workspace-relative path id + display label + type + unused flag) and every import link.
| Name | Required | Description | Default |
|---|---|---|---|
| root | Yes | Absolute path to the SvelteKit/Svelte project root to analyze. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations exist, so the description must convey behavior. It explains the output structure (nodes with workspace-relative path, label, type, unused flag, and import links), which is useful, but it provides no information about potential side effects, performance, or error cases. It is a read-only operation implied, but not explicitly stated.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that is information-dense without redundancy. It front-loads the key action and outcome.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter and no output schema, the description adequately describes the return value's composition. It could be improved by noting that the graph is computed from the project source or by clarifying the output format, but it's sufficiently complete for an agent to anticipate the result.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100% (the only parameter 'root' has a clear description). The description adds no extra meaning beyond the schema's absolute path requirement, so baseline 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses the specific verb 'Return' and clearly identifies the resource: the full Svelte component dependency graph, enumerating node fields and link types. This differentiates it from sibling tools like get_component (single component) and get_routes (routes only).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool's use case (needing the full dependency graph), but does not explicitly state when to prefer it over alternatives like get_unused or get_component. No exclusions or usage scenarios are provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Return every route node (+page/+layout/+error) with its display label and the direct child components it pulls in.
| Name | Required | Description | Default |
|---|---|---|---|
| root | Yes | Absolute path to the SvelteKit/Svelte project root to analyze. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It explicitly reveals a read-only nature ('Return') and specifies the exact types of route nodes included and the output fields, which is useful context. However, it does not discuss edge cases or potential errors, but for a simple analysis tool, the description is adequately transparent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence that includes all essential details: the scope ('every route node'), the specific node types, and the output fields. No unnecessary words or redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (one parameter, no output schema), the description adequately explains the return value. It is missing only comparative guidance on when to choose this over siblings, but for a basic route enumeration tool, the description is complete enough.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema already documents the single 'root' parameter with 100% coverage, so the description adds no additional parameter semantics. With schema coverage that high, the baseline score of 3 is appropriate even without parameter details in the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states that the tool returns every route node, specifically enumerating the node types (+page/+layout/+error) and the information provided (display label and direct child components). This specific verb and resource combination distinguishes it from sibling tools like get_graph, which likely returns a broader graph structure.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is for enumerating route nodes with labels and children, but it does not explicitly state when to use this tool versus siblings like get_graph or get_component, nor does it mention alternatives or exclusions. The usage context is clear but not comparative.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Return every component that is imported somewhere in the project but rendered nowhere (never referenced in any importer's template). Computed globally, so the result does not depend on file order.
| Name | Required | Description | Default |
|---|---|---|---|
| root | Yes | Absolute path to the SvelteKit/Svelte project root to analyze. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the behavioral disclosure burden. It adds the useful behavioral trait that the result is computed globally and independent of file order, which goes beyond the basic 'return' semantics and helps set expectations for the agent.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences long, front-loads the core purpose, and includes a meaningful additional detail about global computation. Every word earns its place, with no redundant or vague phrasing.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The tool is simple (one well-documented parameter) and the description fully specifies its purpose and key behavioral characteristic. Even without an output schema, the description is sufficient for an agent to invoke the tool and understand the expected result.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema already provides a 100% description coverage for the single 'root' parameter (absolute path to the project root). The description does not add additional parameter-specific semantics, so the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb 'Return' and a clear resource definition: 'every component that is imported somewhere in the project but rendered nowhere'. This precisely distinguishes the tool from siblings like get_component or get_routes, which target different aspects of the project.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clearly implies when to use the tool (to find unused components) and notes that it is computed globally, giving context. However, it does not explicitly mention alternatives or exclusions, so it falls short of a 5 on the usage guidelines scale.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Invalidate all caches for the project and re-parse every file from scratch. Returns a summary with the node and link counts. Use when you want to guarantee fresh results.
| Name | Required | Description | Default |
|---|---|---|---|
| root | Yes | Absolute path to the SvelteKit/Svelte project root to analyze. |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description carries the burden of disclosing behavior. It mentions cache invalidation and re-parsing every file, which implies a destructive/expensive operation. It also states the return value. It does not mention prerequisites, time cost, or potential side effects, but the core behavior is clearly disclosed.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two sentences: the first explains the action and return, the second gives the use case. Every word is purposeful, front-loaded, and there is no redundancy or filler.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (1 param, no output schema, no annotations), the description covers the essential aspects: what it does, when to use it, and what it returns. It lacks details about side effects or performance implications, but the provided information is sufficient for correct selection and invocation.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema covers the sole parameter 'root' with a clear description ('Absolute path to the SvelteKit/Svelte project root to analyze'). Since schema coverage is 100%, the description need not add parameter details. The tool description does not add extra semantics beyond the schema, which aligns with the baseline score of 3.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's action: 'Invalidate all caches for the project and re-parse every file from scratch.' This is a specific verb+resource that distinguishes it from the sibling retrieval tools (get_graph, get_component, etc.). It also mentions the return summary, making the purpose unambiguous.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides explicit guidance: 'Use when you want to guarantee fresh results.' This indicates when to choose scan over the get_* tools. However, it does not explicitly name alternatives or explain when not to use it, stopping short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections. Dates show when Glama detected each change.
v0.1.0get_componentget_graphget_routesget_unusedscanEach tool targets a distinct aspect of the component graph: global view (get_graph), per-node detail (get_component), unused analysis (get_unused), route view (get_routes), and cache refresh (scan). There is no functional overlap.
Four tools consistently follow the 'get_' prefix pattern, while 'scan' is a bare verb, which is a minor deviation but still understandable.
With five tools, the server strikes a good balance—neither too sparse nor overwhelming for its focus on graph analysis.
The tools cover all necessary operations for a read-only component graph server: fetching the full graph, drilling into a component, finding unused components, routing information, and cache invalidation. No obvious missing capability.
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
The official Svelte MCP server providing docs and autofixing tools for Svelte development
An MCP server that gives your AI access to the source code and docs of all public github repos
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Hosted MCP server connecting claude.ai, ChatGPT and other AI apps to your own computer
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/jamcgrath/svelte-component-graph-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server
