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: <HeroOne />, <FeatureTwo />, 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.