# mcp MCP server The official Svelte MCP server providing docs and autofixing tools for Svelte development ## Links - Registry page: https://www.getdrio.com/mcp/dev-svelte-mcp - Repository: https://github.com/sveltejs/mcp - Website: https://svelte.dev/docs/mcp/overview ## Install - Command: `npx -y @sveltejs/mcp` - Endpoint: https://mcp.svelte.dev/mcp - Auth: Not captured ## Setup notes - Package: Npm @sveltejs/mcp v0.1.9 - Remote endpoint: https://mcp.svelte.dev/mcp ## Tools - get-documentation (Retrieves full documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "cli/overview"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list-sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on. Before calling this tool, try to implement Svelte components using your own knowledge and the `svelte-autofixer` tool, since calling this tool is token intensive.) - Retrieves full documentation content for Svelte 5 or SvelteKit sections. Supports flexible search by title (e.g., "$state", "routing") or file path (e.g., "cli/overview"). Can accept a single section name or an array of sections. Before running this, make sure to analyze the users query, as well as the output from list-sections (which should be called first). Then ask for ALL relevant sections the user might require. For example, if the user asks to build anything interactive, you will need to fetch all relevant runes, and so on. Before calling this tool, try to implement Svelte components using your own knowledge and the `svelte-autofixer` tool, since calling this tool is token intensive. Endpoint: https://mcp.svelte.dev/mcp - list-sections (Lists all available Svelte 5 and SvelteKit documentation sections in a structured format. Each section includes a "use_cases" field that describes WHEN this documentation would be useful. You should carefully analyze the use_cases field to determine which sections are relevant for the user's query. The use_cases contain comma-separated keywords describing project types (e.g., "e-commerce", "blog"), features (e.g., "authentication", "forms"), components (e.g., "slider", "modal"), development stages (e.g., "deployment", "testing"), or "always" for fundamental concepts. Match these use_cases against the user's intent - for example, if building an e-commerce site, fetch sections with use_cases containing "e-commerce", "product listings", "shopping cart", etc. If building a slider, look for "slider", "carousel", "animation", etc. Returns sections as "* title: [section_title], use_cases: [use_cases], path: [file_path]". Always run list-sections FIRST for any Svelte query, then analyze ALL use_cases to identify relevant sections, and finally use get_documentation to fetch ALL relevant sections at once.) - Lists all available Svelte 5 and SvelteKit documentation sections in a structured format. Each section includes a "use_cases" field that describes WHEN this documentation would be useful. You should carefully analyze the use_cases field to determine which sections are relevant for the user's query. The use_cases contain comma-separated keywords describing project types (e.g., "e-commerce", "blog"), features (e.g., "authentication", "forms"), components (e.g., "slider", "modal"), development stages (e.g., "deployment", "testing"), or "always" for fundamental concepts. Match these use_cases against the user's intent - for example, if building an e-commerce site, fetch sections with use_cases containing "e-commerce", "product listings", "shopping cart", etc. If building a slider, look for "slider", "carousel", "animation", etc. Returns sections as "* title: [section_title], use_cases: [use_cases], path: [file_path]". Always run list-sections FIRST for any Svelte query, then analyze ALL use_cases to identify relevant sections, and finally use get_documentation to fetch ALL relevant sections at once. Endpoint: https://mcp.svelte.dev/mcp - playground-link (Generates a Playground link given a Svelte code snippet. Once you have the final version of the code you want to send to the user, ALWAYS ask the user if it wants a playground link to allow it to quickly check the code in the playground before calling this tool. NEVER use this tool if you have written the component to a file in the user project. The playground accept multiple files so if are importing from other files just include them all at the root level.) - Generates a Playground link given a Svelte code snippet. Once you have the final version of the code you want to send to the user, ALWAYS ask the user if it wants a playground link to allow it to quickly check the code in the playground before calling this tool. NEVER use this tool if you have written the component to a file in the user project. The playground accept multiple files so if are importing from other files just include them all at the root level. Endpoint: https://mcp.svelte.dev/mcp - svelte-autofixer (Svelte Autofixer) - Given a svelte component or module returns a list of suggestions to fix any issues it has. This tool MUST be used whenever the user is asking to write svelte code before sending the code back to the user Endpoint: https://mcp.svelte.dev/mcp ## Resources - ui://svelte/playground-link - UI resource for the Svelte Playground widget UI resource for the Svelte Playground widget - svelte://ai/overview.md - Overview use title and path to estimate use case - svelte://ai/instructions.md - AGENTS.md use title and path to estimate use case - svelte://ai/mcp.md - Overview use title and path to estimate use case - svelte://ai/local-setup.md - Local setup use title and path to estimate use case - svelte://ai/remote-setup.md - Remote setup use title and path to estimate use case - svelte://ai/tools.md - Tools use title and path to estimate use case - svelte://ai/resources.md - Resources use title and path to estimate use case - svelte://ai/prompts.md - Prompts use title and path to estimate use case - svelte://ai/cli.md - CLI use title and path to estimate use case - svelte://ai/skills.md - Overview use title and path to estimate use case - svelte://ai/subagent.md - Overview use title and path to estimate use case - svelte://ai/claude-plugin.md - Claude Code use title and path to estimate use case - svelte://ai/opencode-plugin.md - OpenCode use title and path to estimate use case - svelte://ai/cursor-plugin.md - Cursor use title and path to estimate use case - svelte://cli/overview.md - Overview project setup, creating new svelte apps, scaffolding, cli tools, initializing projects - svelte://cli/faq.md - Frequently asked questions project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration - svelte://cli/sv-create.md - sv create project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template - svelte://cli/sv-add.md - sv add project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters - svelte://cli/sv-check.md - sv check code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds - svelte://cli/sv-migrate.md - sv migrate migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis - svelte://cli/better-auth.md - better-auth use title and path to estimate use case - svelte://cli/drizzle.md - drizzle database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries - svelte://cli/eslint.md - eslint code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects - svelte://cli/mcp.md - mcp use title and path to estimate use case - svelte://cli/mdsvex.md - mdsvex blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages - svelte://cli/paraglide.md - paraglide internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content - svelte://cli/playwright.md - playwright browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows - svelte://cli/prettier.md - prettier code formatting, project setup, code style consistency, team collaboration, linting configuration - svelte://cli/storybook.md - storybook component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase - svelte://cli/sveltekit-adapter.md - sveltekit-adapter deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify - svelte://cli/tailwind.md - tailwindcss project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte - svelte://cli/vitest.md - vitest testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development - svelte://cli/community.md - [create your own] use title and path to estimate use case - svelte://cli/sv.md - sv use title and path to estimate use case - svelte://cli/sv-utils.md - sv-utils use title and path to estimate use case - svelte://kit/introduction.md - Introduction learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps - svelte://kit/creating-a-project.md - Creating a project project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects - svelte://kit/project-types.md - Project types deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers - svelte://kit/project-structure.md - Project structure project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics - svelte://kit/web-standards.md - Web standards always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms - svelte://kit/routing.md - Routing routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always - svelte://kit/load.md - Loading data data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering - svelte://kit/form-actions.md - Form actions forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors - svelte://kit/page-options.md - Page options prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization - svelte://kit/state-management.md - State management sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle - svelte://kit/remote-functions.md - Remote functions data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates - svelte://kit/building-your-app.md - Building your app production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment - svelte://kit/adapters.md - Adapters deployment, production builds, hosting setup, choosing deployment platform, configuring adapters - svelte://kit/adapter-auto.md - Zero-config deployments deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration - svelte://kit/adapter-node.md - Node servers deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services - svelte://kit/adapter-static.md - Static site generation static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites - svelte://kit/single-page-apps.md - Single-page apps spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages - svelte://kit/adapter-cloudflare.md - Cloudflare deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing - svelte://kit/adapter-cloudflare-workers.md - Cloudflare Workers deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings - svelte://kit/adapter-netlify.md - Netlify deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting - svelte://kit/adapter-vercel.md - Vercel deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables - svelte://kit/writing-adapters.md - Writing adapters custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments - svelte://kit/advanced-routing.md - Advanced routing advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation - svelte://kit/hooks.md - Hooks authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management - svelte://kit/errors.md - Errors error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors - svelte://kit/link-options.md - Link options routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior - svelte://kit/service-workers.md - Service workers offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps - svelte://kit/server-only-modules.md - Server-only modules api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation - svelte://kit/snapshots.md - Snapshots forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys - svelte://kit/shallow-routing.md - Shallow routing modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus - svelte://kit/observability.md - Observability performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations - svelte://kit/packaging.md - Packaging building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution - svelte://kit/auth.md - Auth authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks - svelte://kit/performance.md - Performance performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times - svelte://kit/icons.md - Icons icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management - svelte://kit/images.md - Images image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management - svelte://kit/accessibility.md - Accessibility always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites - svelte://kit/seo.md - SEO seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization - svelte://kit/faq.md - Frequently asked questions troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration - svelte://kit/integrations.md - Integrations project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting - svelte://kit/debugging.md - Breakpoint Debugging debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution - svelte://kit/migrating-to-sveltekit-2.md - Migrating to SvelteKit v2 migration, upgrading from sveltekit 1 to 2, breaking changes, version updates - svelte://kit/migrating.md - Migrating from Sapper migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization - svelte://kit/additional-resources.md - Additional resources troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support - svelte://kit/glossary.md - Glossary rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development - svelte://kit/@sveltejs-kit.md - @sveltejs/kit forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities - svelte://kit/@sveltejs-kit-hooks.md - @sveltejs/kit/hooks middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation - svelte://kit/@sveltejs-kit-node-polyfills.md - @sveltejs/kit/node/polyfills node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements - svelte://kit/@sveltejs-kit-node.md - @sveltejs/kit/node node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node - svelte://kit/@sveltejs-kit-vite.md - @sveltejs/kit/vite project setup, vite configuration, initial sveltekit setup, build tooling - svelte://kit/$app-environment.md - $app/environment always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection - svelte://kit/$app-forms.md - $app/forms forms, user input, data submission, progressive enhancement, custom form handling, form validation - svelte://kit/$app-navigation.md - $app/navigation routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions - svelte://kit/$app-paths.md - $app/paths static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation - svelte://kit/$app-server.md - $app/server remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries - svelte://kit/$app-state.md - $app/state routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing - svelte://kit/$app-stores.md - $app/stores legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates - svelte://kit/$app-types.md - $app/types routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps - svelte://kit/$env-dynamic-private.md - $env/dynamic/private api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling - svelte://kit/$env-dynamic-public.md - $env/dynamic/public environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps - svelte://kit/$env-static-private.md - $env/static/private server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens - svelte://kit/$env-static-public.md - $env/static/public environment variables, public config, client-side data, api endpoints, build-time configuration, public constants - svelte://kit/$lib.md - $lib project setup, component organization, importing shared components, reusable ui elements, code structure - svelte://kit/$service-worker.md - $service-worker offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps - svelte://kit/configuration.md - Configuration project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup - svelte://kit/cli.md - Command Line Interface project setup, typescript configuration, generated types, ./$types imports, initial project configuration - svelte://kit/types.md - Types typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup - svelte://svelte/overview.md - Overview always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics - svelte://svelte/getting-started.md - Getting started project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration - svelte://svelte/svelte-files.md - .svelte files always, any svelte project, component creation, project setup, learning svelte basics - svelte://svelte/svelte-js-files.md - .svelte.js and .svelte.ts files shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities - svelte://svelte/what-are-runes.md - What are runes? always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4 - svelte://svelte/$state.md - $state always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components - svelte://svelte/$derived.md - $derived always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values - svelte://svelte/$effect.md - $effect canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking - svelte://svelte/$props.md - $props always, any svelte project, passing data to components, component communication, reusable components, component props - svelte://svelte/$bindable.md - $bindable forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields - svelte://svelte/$inspect.md - $inspect debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues - svelte://svelte/$host.md - $host custom elements, web components, dispatching custom events, component library, framework-agnostic components - svelte://svelte/basic-markup.md - Basic markup always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering - svelte://svelte/if.md - {#if ...} always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation - svelte://svelte/each.md - {#each ...} always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds - svelte://svelte/key.md - {#key ...} animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state - svelte://svelte/await.md - {#await ...} async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports - svelte://svelte/snippet.md - {#snippet ...} reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication - svelte://svelte/@render.md - {@render ...} reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse - svelte://svelte/@html.md - {@html ...} rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content - svelte://svelte/@attach.md - {@attach ...} tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components - svelte://svelte/@const.md - {@const ...} computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering - svelte://svelte/@debug.md - {@debug ...} debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection - svelte://svelte/bind.md - bind: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking - svelte://svelte/use.md - use: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks - svelte://svelte/transition.md - transition: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes - svelte://svelte/in-and-out.md - in: and out: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications - svelte://svelte/animate.md - animate: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering - svelte://svelte/style.md - style: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling - svelte://svelte/class.md - class always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design - svelte://svelte/await-expressions.md - await async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading - svelte://svelte/scoped-styles.md - Scoped styles always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes - svelte://svelte/global-styles.md - Global styles global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles - svelte://svelte/custom-properties.md - Custom properties theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization - svelte://svelte/nested-style-elements.md - Nested