MCP Server Integration for Cursor | Windsurf

Here we are using jsrepo to integrate MCP Server to your project.

Cursor Usage

Add the following code to your .cursor/mcp.json file:

Terminal

{ "mcpServers": { "jsrepo": { "command": "npx", "args": ["jsrepo", "mcp"] } } }

Windsurf Usage

Add the following code to your .codeium/windsurf/mcp_config.json file:

Terminal

{ "mcpServers": { "jsrepo": { "command": "npx", "args": ["jsrepo", "mcp"] } } }

Add Cursor Rules

Create new file in .cursor/rules folder and create new file svelte-blocks.mdc and add the following code:

Terminal

--- description: Svelte Marketing Blocks globs: alwaysApply: true --- # Svelte Marketing Blocks ## Project Description You are working with Svelte Marketing Blocks, a collection of 100+ beautifully crafted components built with: - Svelte 5 - Tailwind CSS 4 - shadcn-svelte components These components are ideal for building high-converting marketing, landing, and product pages, and cover: Hero, Feature, Content, Testimonial, Pricing, FAQ, CTA, Integration, Header, Footer, and more. ## General Instructions - Use components from this library unless explicitly asked otherwise. - Use Svelte 5 and support for children snippet, props, and actions. - Style exclusively with Tailwind CSS 4, no inline styles. - Use shadcn-svelte for buttons, cards, modals, accordions, and UI primitives. - Ensure accessibility with proper roles, labels, alt text, and keyboard navigation where applicable. ## What Users Want - Users are building beautiful, functional, responsive marketing pages. - Pages should convert, look modern, and follow UI best practices. - Components should be easy to customize, with clear slots and props. - Code must be modular, clean, and production-ready. - Use Images from Unsplash if not present or has static image. ## Component Usage Guidelines - Component names follow the format: , , etc. - Every component is a Svelte file with full props and children support. - Support custom colors, spacing, and content via Tailwind utility classes or props. ### Sample Prompts ```prompt Create a hero section using `@sv/cnblocks` with a compelling title, subheading, CTA, and image. ``` ```prompt Create a Marketing page which include Hero in Notion Mist Style, Content, Feature, CTA and Footer with Responsive UI and Notion style theme using `@sv/cnblocks` from `jsrepo` ```

Install jsrepo & Run MCP Server

Terminal

npm install -g jsrepo # Run MCP Server jsrepo mcp

Create jsrepo.json

Create a new file in the root of your project named jsrepo.json and add the following code:

Terminal

{ "$schema": "https://unpkg.com/jsrepo@1.47.0/schemas/project-config.json", "repos": [ "github/sikandarjodd/cnblocks" ], "includeTests": false, "watermark": true, "configFiles": {}, "paths": { "*": "$lib/components/blocks", "mist": "$lib/components/mist", "magic": "$lib/components/magic", "ui": "$lib/components/ui", "hooks": "$lib/hooks", "utils": "$lib/utils" } }

Example Prompt

Terminal

Hey can you create a Notion Style Landing page using `jsrepo` and using `@sv/cnblocks` which should include Hero Four, Content Setion, Feature Section, Footer related to Image as service with good Content and Images. Use images from Unsplash related to SASS Product.