This guide walks you through setting up Claude (Desktop app or web) with MCP servers for professional Svelte 5 development. By the end, Claude will be able to read and write files directly in your project, query your Supabase database for context, access up-to-date Svelte 5 documentation, and validate code before sending it to you.

What We’re Building

Here’s the complete setup:

┌─────────────────────────────────────────────────────────────┐
│  Claude Desktop / Claude.ai                                 │
│                                                             │
│  Connected MCP Servers:                                     │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐           │
│  │ Svelte MCP  │ │ Context-    │ │ Supabase    │           │
│  │             │ │ Coder       │ │             │           │
│  │ • Docs      │ │ • Read files│ │ • Query DB  │           │
│  │ • Autofixer │ │ • Write     │ │ • Schema    │           │
│  │ • Validate  │ │ • Edit      │ │             │           │
│  └─────────────┘ └─────────────┘ └─────────────┘           │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────┐
│  Your Svelte Project                                        │
│  Claude reads/writes files directly here                    │
└─────────────────────────────────────────────────────────────┘

Two Ways to Use Claude with MCP

There are two main ways to connect Claude to MCP servers, and the setup differs for each:

Platform	MCP Type	Setup Method
Claude Desktop (app)	Local MCP servers	Edit `claude_desktop_config.json`
Claude.ai (web)	Remote MCP servers	Settings → Connectors

This guide covers both approaches.

Prerequisites

Before starting, make sure you have Node.js 18+ installed (run node --version to check), a Svelte/SvelteKit project to work with, and either the Claude Desktop app or a paid Claude.ai account (Pro, Max, Team, or Enterprise for web connectors).

Part 1: Claude Desktop Setup

If you’re using the Claude Desktop app, follow this section.

Step 1: Download and Install

Download Claude Desktop from https://claude.ai/download. It’s available for macOS, Windows, and Linux. After installation, open the app and sign in with your Anthropic account.

Step 2: Open Developer Settings

To configure MCP servers, you need to edit a JSON configuration file. Here’s how to access it:

Click the Claude menu in your system’s menu bar (on macOS, this is at the top of your screen, not inside the app window)
Select “Settings…”
In the Settings window, click “Developer” in the left sidebar
Click the “Edit Config” button

This opens your claude_desktop_config.json file. The file is located at:

OS	Config File Location
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json`
Linux	`~/.config/Claude/claude_desktop_config.json`

If the file doesn’t exist, clicking “Edit Config” will create it for you.

Step 3: Add MCP Servers to Config

Replace the contents of claude_desktop_config.json with the following configuration. This example includes context-coder for file access, Supabase for database queries, and the Svelte MCP for documentation:

{
	"mcpServers": {
		"context-coder": {
			"command": "npx",
			"args": ["-y", "supergateway", "--streamableHttp", "http://localhost:3001/mcp"]
		},
		"supabase": {
			"command": "npx",
			"args": [
				"-y",
				"@modelcontextprotocol/server-postgres",
				"postgresql://postgres:postgres@127.0.0.1:54322/postgres"
			]
		},
		"svelte": {
			"command": "npx",
			"args": ["-y", "@sveltejs/mcp"]
		}
	}
}

Save the file after editing.

Step 4: Start Required Services

Before Claude can use these MCP servers, you need to start the services they connect to.

For context-coder, open a terminal in your Svelte project directory and run:

cd ~/projects/my-svelte-app
npx context-coder --edit-file-mode

You should see output like:

Context-Coder MCP server running on http://localhost:3001/mcp
Working directory: /Users/you/projects/my-svelte-app
Edit mode: enabled

Keep this terminal open while working.

For Supabase (if you’re using it), start the local Supabase instance:

supabase start

Step 5: Restart Claude Desktop

Quit Claude Desktop completely (make sure it’s not running in the background) and reopen it. This is required for Claude to load the new MCP server configuration.

Step 6: Verify the Connection

After restarting, you’ll see an + (plus icon) in the bottom-left corner of the conversation input box. Click this indicator to see the list of available tools from your connected MCP servers. on biottom you see connectors option. when you open it, you will see the MCP servers listed. You can switch these on or off as needed. for more informations about this check official doc

You should see tools from context-coder, Supabase, and Svelte MCP listed. If you don’t see them, double-check your config file for syntax errors and ensure the services are running.

Part 2: What Each MCP Server Does

Here’s a breakdown of the tools each MCP server provides:

Context-Coder (File Access)

This MCP server lets Claude read and write files in your project:

Tool	Purpose
`get_codebase`	Read your entire project (paginated)
`get_codebase_size`	Check project size before reading
`write_file`	Create or overwrite files
`edit_file`	Make targeted line-based edits
`read_file`	Read a specific file
`create_directory`	Create folders
`remove_file`	Delete files
`execute_command`	Run shell commands

Supabase (Database Access)

This MCP server lets Claude query your PostgreSQL database:

Tool	Purpose
`query`	Run read-only SQL queries

Use it to explore your schema, query data for context, or help Claude understand your data model.

Svelte MCP (Documentation & Validation)

This MCP server provides up-to-date Svelte documentation and code validation:

Tool	Purpose
`list-sections`	List all available documentation
`get-documentation`	Fetch docs for specific topics
`svelte-autofixer`	Validate Svelte code for errors
`playground-link`	Generate shareable playground URLs

The svelte-autofixer is particularly valuable. Claude uses it to validate code before sending it to you, catching syntax errors and deprecated patterns (like Svelte 4 syntax in Svelte 5 projects).

Part 3: Project Setup Files

To get the best results from Claude, add these files to your project.

File 1: `PROJECT.md`

Create PROJECT.md in your project root. This gives Claude context about your project architecture and patterns:

EXAMPLE PROJECT.md

Project: Field Service SaaS

Overview

Field service management app (like Jobber) for small service operators.

MVP Scope: Ireland, Landscaping trade, English only
Goal: Clients → Jobs → Invoices workflow

Tech Stack

Layer	Choice
Framework	SvelteKit 2.27+
UI	Svelte 5 with Runes
Database	Supabase PostgreSQL
Auth	Supabase Auth
Validation	Valibot
Storage	Supabase Storage
Payments	Stripe

Architecture

Multi-Tenancy (Critical!)

Every database query MUST filter by company_id:

const { data } = await supabase
	.from('clients')
	.select('*')
	.eq('company_id', companyId) // Always required
	.is('deleted_at', null)

Data Loading

Need	Use
Initial page data, SSR	`+page.server.ts` load
Form with validation	Remote Function `form`
Button action	Remote Function `command`
On-demand fetch	Remote Function `query`

File Structure

src/routes/(app)/[entity]/
  +page.svelte        # UI
  +page.server.ts     # Initial data (optional)
  data.remote.ts      # Remote Functions

Auth Helper

// src/lib/server/auth.ts
import { getRequestEvent } from '$app/server'
import { error } from '@sveltejs/kit'

export async function requireAuth() {
	const { locals } = getRequestEvent()
	if (!locals.user) error(401, 'Unauthorized')
	return locals.user
}

export async function getCompanyId() {
	const user = await requireAuth()
	return user.company_id
}

Database

Tables

companies, users, clients, jobs, job_services, invoices, invoice_line_items

Conventions

All tables: company_id, created_at, updated_at
Soft delete: deleted_at (nullable)

Status Flows

Job: Draft → Scheduled → In Progress → Completed → Invoiced

Invoice: Draft → Sent → Viewed → Paid / Overdue

Business Rules

Tax (Ireland)

Standard VAT: 23%

Pricing

Starter: €29/mo (50 clients, 100 jobs/mo)
Pro: €59/mo (unlimited)

Type Definitions

// src/app.d.ts
declare global {
	namespace App {
		interface Locals {
			user: {
				id: string
				email: string
				company_id: string
				role: 'owner' | 'admin' | 'employee' | 'viewer'
			} | null
		}
	}
}
export {}

MVP Checklist

Notes for Claude

Use Svelte 5 runes
Always filter by company_id
Use Valibot for validation
Run svelte-autofixer before sending code

File 2: `.cocoignore`

from documentation of context-coder you see that you can create .cocoignore in your project root to exclude files not needed for context. This keeps the context small and focused:

# Dependencies
node_modules/

# Build outputs
.svelte-kit/
build/
dist/

# Environment files
.env
.env.*

# Lock files
package-lock.json
pnpm-lock.yaml

# Large assets
static/images/
static/fonts/

# IDE
.vscode/
.idea/

Part 5: add Prompt for Claude

Now when we have stablished our coneection between claude and our project using MCP servers and we have added project context files is time give claude instructions on how to build our project.

open Claude App
Create a new project
Name it “Field Service SaaS Platform”
in instruction write your task as example below:

EXAMPLE - INSTRUCTIONS

You are helping build a Field Service SaaS platform. Full spec is in project knowledge.

## Svelte MCP Tools Available

You have access to Svelte MCP tools. Use them:

- **list-sections** — Find available docs
- **get-documentation** — Fetch docs for specific topics
- **svelte-autofixer** — Validate Svelte code before sending (use this!)
- **playground-link** — Generate shareable playground

When writing Svelte code:
1. Use svelte-autofixer to check code before sending
2. Look up docs if unsure about APIs
3. Don't guess Svelte 5 syntax — verify it

## Project Constraints

- SvelteKit + Remote Functions (no separate backend)
- Svelte 5 runes (not stores)
- Supabase for everything
- Multi-tenant: always filter by company_id
- MVP: Ireland, Landscaping (as initial service), English

In the project “files”, add prompt as file or paste your text directly. This gives Claude detailed instructions on building the platform:

EXAMPLE - PROMPT

Field Service SaaS Platform - Comprehensive Development Guide

I want to build a field service SaaS platform similar to Jobber, targeting small service operators (landscapers, plumbers, electricians) starting in Ireland, with multi-country, multi-trade, and multi-language future support. The platform must allow users to manage clients, jobs, custom services, dynamic fields, and generate legal invoices including tax calculations, and also handle subscription plans with capability enforcement. The goal is to reach ~€5,000/month revenue.

I want you to act as a full-stack SaaS architecture and development expert. Your goal is to generate practical, step-by-step guidance, code snippets, schemas, and design patterns to implement this platform.

Tech Stack

Database: PostgreSQL (Supabase) with Row Level Security
Auth: Supabase Auth
Backend: SvelteKit Remote Functions (no separate API server needed)
Frontend: SvelteKit with Svelte 5 Runes
Validation: Valibot (lighter than Zod, native Remote Functions support)
Payments: Stripe (subscriptions + payment collection)
File Storage: Supabase Storage
Email: Resend or Postmark (via Supabase Edge Functions)
PDF Generation: Supabase Edge Functions with pdf-lib
Hosting: Vercel or Cloudflare Pages

1. Core Domain & Data Model

Provide a fully normalized PostgreSQL schema for:
- companies, users, user_roles
- clients, client_contacts
- quotes, quote_services
- jobs, job_services, job_service_attributes
- recurring_job_templates
- invoices, invoice_line_items, invoice_tax
- payments (client payments, not subscriptions)
- subscriptions, subscription_plans
- files/attachments
- audit_logs
Explain multi-tenant design using company_id for scoping with Row Level Security (RLS) in Supabase
Show how to store snapshots for invoices and quotes using JSONB to ensure immutability
Provide examples of custom fields per service, including field types (text, number, boolean, select, date, file), validation, and storage
Include soft delete strategy (deleted_at timestamps) for data recovery

2. Authentication & Authorization

Implement authentication flow using Supabase Auth:
- Email/password signup with email verification
- Magic link login option
- Password reset flow
- Session management and refresh tokens
Design role-based access control (RBAC):
- Roles: Owner, Admin, Employee, Viewer
- Permission matrix for each entity (clients, jobs, invoices, settings)
- Row Level Security policies in PostgreSQL
Show invite flow for adding team members to a company
Show how to access auth context in Remote Functions using getRequestEvent()

3. Backend with SvelteKit Remote Functions

Use SvelteKit Remote Functions (available since SvelteKit 2.27) as the primary backend layer. Remote Functions provide type-safe RPC without building separate API endpoints.

Remote Function Types

Show examples using all four remote function types:

query - Read data (clients, jobs, invoices)
query.batch - Batched reads solving n+1 problems
form - Form submissions with built-in validation
command - Mutations from event handlers
prerender - Static config data (countries, plans, trade templates)

File Structure

src/routes/
  (app)/
    clients/
      +page.svelte
      data.remote.ts      ← Client operations
    jobs/
      +page.svelte
      [id]/
        +page.svelte
      data.remote.ts      ← Job operations
    invoices/
      +page.svelte
      data.remote.ts      ← Invoice operations
    settings/
      data.remote.ts      ← Company settings

Example Remote Functions

Provide complete .remote.ts files for:

Clients: CRUD operations with company scoping
Jobs: Create with services, status transitions, scheduling
Invoices: Generate from job, calculate tax, create snapshot
Quotes: CRUD, convert to job
Recurring Jobs: Template management, job generation
Payments: Record payment, payment history
Reports: Revenue, job stats (Pro plan only)

Validation with Valibot

Show Valibot schema validation integrated with Remote Functions:

import * as v from 'valibot'
import { form } from '$app/server'

export const createClient = form(
	v.object({
		name: v.pipe(v.string(), v.nonEmpty('Name is required')),
		email: v.pipe(v.string(), v.email('Invalid email')),
		phone: v.optional(v.string())
	}),
	async (data) => {
		// Implementation here
	}
)

Auth Context in Remote Functions

Show how to use getRequestEvent() for:

Getting current user/company
Multi-tenant data scoping
Permission checks

import { getRequestEvent } from '$app/server'
import { error } from '@sveltejs/kit'

async function requireAuth() {
	const { locals } = getRequestEvent()
	if (!locals.user) error(401, 'Unauthorized')
	return locals.user
}

Single-Flight Mutations

Show optimistic UI patterns with withOverride:

await addLike(item.id).updates(getLikes(item.id).withOverride((n) => n + 1))

Supabase Edge Functions

Use Supabase Edge Functions only for:

PDF generation (invoices, quotes)
Stripe webhooks
Scheduled jobs (recurring invoice generation)
Email sending

4. Frontend (SvelteKit + Svelte 5 Runes)

Required Svelte 5 Features

Use these modern Svelte 5 features:

$state - Reactive state
$state.raw - For large arrays/objects (performance)
$derived - Computed values
$derived overrides - Optimistic UI (Svelte 5.25+)
$effect - Side effects
$effect.pending() - Async loading indicators (Svelte 5.36+)
$props - Component props
$props.id() - Unique IDs for form accessibility (Svelte 5.20+)
await in templates - Direct async rendering (Svelte 5.36+, experimental)
<svelte:boundary> - Error boundaries and loading states (Svelte 5.3+)

SvelteKit Folder Structure

src/
  routes/
    (auth)/               # login, signup, forgot-password
      login/
      signup/
      forgot-password/
    (app)/                # authenticated app routes
      +layout.svelte      # app shell with nav
      +layout.server.ts   # auth guard
      dashboard/
      clients/
      quotes/
      jobs/
      invoices/
      calendar/
      settings/
      reports/
  lib/
    components/
      ui/                 # buttons, inputs, modals, cards
      forms/              # FieldRenderer, dynamic forms
      invoices/           # invoice preview, PDF viewer
      calendar/           # job scheduling
    server/
      db.ts               # Supabase client
      auth.ts             # Auth helpers with getRequestEvent
      tax.ts              # Tax calculation
      capabilities.ts     # Plan capability checks
    utils/
    config/
      trades/             # Trade templates (prerender)
      countries/          # Country configs (prerender)
      plans/              # Subscription plans (prerender)
    i18n/

Dynamic FieldRenderer Component

Provide a FieldRenderer component that:

Renders forms based on service templates
Supports all field types (text, number, boolean, select, date, textarea, file)
Integrates with Remote Function form fields
Uses $props.id() for accessible form labels
Handles validation with error display

Using Remote Functions in Components

Show patterns for:

Reading data with await in templates:

<script>
	import { getClients } from './data.remote'
</script>

<svelte:boundary>
	<ul>
		{#each await getClients() as client}
			<li>{client.name}</li>
		{/each}
	</ul>

	{#snippet pending()}
		<p>Loading clients...</p>
	{/snippet}

	{#snippet failed(error, reset)}
		<p>Error: {error.message}</p>
		<button onclick={reset}>Retry</button>
	{/snippet}
</svelte:boundary>

Form submissions with validation:

<script>
	import { createClient } from './data.remote'
</script>

<form {...createClient}>
	<label>
		Name
		<input {...createClient.fields.name.as('text')} />
		{#each createClient.fields.name.issues() as issue}
			<span class="error">{issue.message}</span>
		{/each}
	</label>

	<button>Create</button>
</form>

Commands with loading state:

<script>
	import { deleteClient, getClients } from './data.remote'

	let deleting = $state(false)

	async function handleDelete(id: string) {
		deleting = true
		try {
			await deleteClient(id).updates(getClients())
		} finally {
			deleting = false
		}
	}
</script>

State Management Patterns

Show Svelte 5 runes patterns for:

Auth state using $app/state page object
Current company context
Plan capabilities with can('feature') helper
i18n with reactive locale switching

Components to Build

Provide components for:

Quote/Invoice preview - Reading JSON snapshot
Calendar view - Job scheduling with drag-and-drop
File upload - Drag-and-drop, progress, preview
Search/filter - Global search, list filtering
Dashboard - Key metrics widgets
Data tables - Sortable, filterable lists

Mobile-Responsive Design

Include mobile-first considerations:

Touch-friendly controls
Responsive navigation
Offline-aware UI indicators

5. Custom Fields / Trade Templates

Show trade template config structure for Landscaping, Plumbing, Electricians
Use prerender remote functions for static trade configs:

import { prerender } from '$app/server'
import { tradeTemplates } from '$lib/config/trades'

export const getTradeTemplate = prerender(v.string(), async (tradeId) => tradeTemplates[tradeId])

Include dynamic attributes for services with:
- Field type definitions
- Validation rules (required, min, max, pattern)
- Conditional visibility
- Default values
- Unit types (hours, sqm, items)
Explain how to add new fields per trade without DB migration (config-driven)
Show shared Valibot schemas for frontend and backend validation

6. Quotes & Jobs Workflow

Provide quote workflow:
- Create quote with services and pricing
- PDF generation (Edge Function)
- Email to client
- Convert approved quote to job
Provide job workflow:
- Job statuses: Draft → Scheduled → In Progress → Completed → Invoiced
- Assignment to team members
- Scheduling with date/time
- Job notes and photos
- Completion checklist
Show recurring jobs:
- Template definition (frequency, services, client)
- Automatic job generation (Edge Function scheduled task)
- Skip/reschedule individual occurrences

7. Invoicing & Tax

Show workflow for job → invoice using Remote Functions:
- Pre-invoice validations
- Creating invoice with snapshot
- Status transitions: Draft → Sent → Viewed → Paid → Overdue
- Locking invoices after sending
- Sequential invoice numbering per company
Explain tax calculation based on country rules:
- Ireland VAT rates (standard 23%, reduced 13.5%, zero)
- Tax-exempt handling
- Use prerender for country tax configs
Provide invoice snapshot stored as JSONB:
- Complete client details at time of invoice
- All line items with prices, quantities, tax
- Company details and branding
- Payment terms and bank details
Show payment recording:
- Manual payment entry
- Stripe payment links
- Partial payments
Show PDF generation via Supabase Edge Function

8. Pricing & Subscriptions

Provide plans with capability maps:

// Use prerender for static plan config
export const getPlans = prerender(async () => ({
	starter: {
		price: 29,
		users: 1,
		clients: 50,
		jobsPerMonth: 20,
		features: ['invoicing', 'clients', 'jobs']
	},
	pro: {
		price: 79,
		users: 5,
		clients: -1, // unlimited
		jobsPerMonth: -1,
		features: ['invoicing', 'clients', 'jobs', 'quotes', 'recurring', 'reports', 'branding']
	}
}))

Show centralized capability enforcement:
- can(company, 'feature') - boolean check
- limit(company, 'resource') - numeric limit
- usage(company, 'resource') - current usage count
- Implement in $lib/server/capabilities.ts
Show soft limits enforcement:
- Backend: Check in Remote Functions before operations
- Frontend: Disable UI, show upgrade CTA
Show Stripe integration:
- Checkout session creation (Remote Function command)
- Webhook handling (Supabase Edge Function)
- Plan mapping and syncing
- Trial period handling

9. Notifications

Design notification system for:
- Invoice sent to client (email)
- Payment received (email, in-app)
- Job reminder (email)
- Quote expiring (email)
- Subscription payment failed (email)
- Team member invited (email)
Use Supabase Edge Functions for email sending with Resend/Postmark
Show email templates structure
Include notification preferences per user

10. Client Portal

Design lightweight client portal (Phase 2 feature):
- Client views their quotes, jobs, invoices
- Approve quotes online
- Pay invoices via Stripe
- No login required (secure magic link tokens)
Show secure token-based access implementation

11. Onboarding Flow

Provide step-by-step onboarding flow (target: first invoice in 5 minutes):
1. Signup with email + company name
2. Welcome screen with value prop
3. Add first client (simplified form)
4. Create first job with pre-filled sample service
5. Mark job complete
6. Preview invoice (wow moment!)
7. Send invoice or download PDF
8. Show upgrade CTA if hitting limits
Use <svelte:boundary> for smooth loading states during onboarding
Include progress indicator and skip options
Include sample data option to explore with demo content
Include UI/UX best practices for conversion:
- Single column forms
- Inline validation with Remote Function form fields
- Clear CTAs
- Celebration moments

12. Multi-Country & Multi-Language Support

Provide config-driven structure for countries using prerender:

export const getCountryConfig = prerender(
	v.string(),
	async (countryCode) => countryConfigs[countryCode]
)

Show i18n implementation:
- UI label translations
- Date/number formatting
- Field labels in trade templates
- Invoice templates per locale
Explain how future trades & countries can be added without schema changes

13. Files & Attachments

Design file storage system:
- Supabase Storage for file hosting
- File association with entities (jobs, invoices, clients)
- Image compression for photos
Show file upload component with:
- Drag and drop
- Multiple file selection
- Progress indicator using $effect.pending()
- Preview for images
Include storage limits per subscription plan

14. Search & Filtering

Implement search functionality:
- Global search using query remote function
- Full-text search in PostgreSQL
- Recent items quick access
Show filtering and sorting for list views with reactive $derived state

15. Reporting & Analytics

Provide core reports (Pro plan only):
- Revenue by period
- Jobs completed by status
- Outstanding invoices / aging report
- Client lifetime value
Show dashboard widgets with <svelte:boundary> for loading states
Include export to CSV functionality

16. Security & Compliance

Implement security best practices:
- Input validation via Valibot in all Remote Functions
- Row Level Security in PostgreSQL
- CSRF protection (built into Remote Functions)
- Rate limiting on auth
Address GDPR compliance (required for Ireland/EU):
- Privacy policy requirements
- Data export command
- Data deletion command
- Cookie consent
Show audit logging:
- Who did what, when
- Changes to sensitive data
- Login history

17. Error Handling & Monitoring

Implement error handling with <svelte:boundary>:
- Error boundaries per section
- User-friendly error messages
- Retry functionality with reset
Show handleValidationError hook for Remote Function validation errors
Set up monitoring:
- Error tracking (Sentry)
- Structured logging
- Uptime monitoring

18. Project Architecture & Dev Flow

Show full project structure:

/
  src/
    routes/           # SvelteKit routes + Remote Functions
    lib/
      components/     # Svelte 5 components
      server/         # Server-only modules
      config/         # Trade/country/plan configs
      i18n/           # Translations
    hooks.server.ts   # Auth, error handling
    hooks.client.ts   # Client error handling
    app.d.ts          # Type definitions
  supabase/
    migrations/       # Database migrations
    functions/        # Edge Functions (PDF, webhooks, scheduled)
    seed.sql          # Development seed data
  static/
  tests/

Include CI/CD recommendations:
- GitHub Actions for testing and deployment
- Preview deployments for PRs
- Database migration strategy
Include testing strategy:
- Unit tests for business logic
- Component tests with Svelte Testing Library
- E2E tests for critical flows (Playwright)

19. MVP to Launch Roadmap

Phase 1: Core MVP (Weeks 1-6) - Ireland, Landscaping, English

Week 1-2: Foundation

Database schema and Supabase setup
Authentication flow with Supabase Auth
Company and user management
Basic client CRUD with Remote Functions

Week 3-4: Jobs & Services

Trade template for Landscaping
Job creation with dynamic fields
Job status workflow
Basic calendar view

Week 5-6: Invoicing

Invoice generation from job
Tax calculation (Ireland VAT)
PDF generation (Edge Function)
Invoice email sending
Onboarding flow

Phase 2: Payment & Polish (Weeks 7-10)

Week 7-8: Subscriptions

Stripe integration
Plan capability enforcement
Upgrade/downgrade flows

Week 9-10: Polish & Launch

Bug fixes and UX improvements
Error handling and monitoring
Landing page
Beta launch to 10-20 users

Phase 3: Growth (Weeks 11-16)

Recurring jobs
Quotes module
Client portal
Additional trades (Plumbing, Electrical)
Reports and analytics
Additional countries (UK)

Revenue Milestones

Timeline	Target
Month 1-2	10 beta users (free)
Month 3	20 paying customers × €30 = €600/month
Month 6	80 customers × €45 avg = €3,600/month
Month 9	130 customers × €50 avg = €6,500/month

Configuration Requirements

svelte.config.js

Enable experimental features:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		experimental: {
			remoteFunctions: true
		}
	},
	compilerOptions: {
		experimental: {
			async: true // Enable await in templates
		}
	}
}

export default config

Output Requirements

Provide code snippets using:
- SQL for database schema
- TypeScript for all code
- Svelte 5 runes syntax ($state, $derived, $effect, $props)
- Remote Functions (query, form, command, prerender)
- Valibot for validation schemas
No legacy patterns:
- No Svelte stores (use runes)
- No +page.server.ts load functions where Remote Functions work better
- No separate API routes (use Remote Functions)
Provide clear, actionable instructions
Include TypeScript types/interfaces for all major entities
Structure response so a solo developer can follow end-to-end

Extra Notes

Prioritize simplicity and maintainability
Use Remote Functions as primary data layer
Use Supabase Edge Functions only for webhooks, PDFs, scheduled tasks
Ensure all flows are multi-tenant safe with RLS
Focus on MVP for Ireland, English only, Landscaping first
Plan for future trades, countries, and languages via config
Mobile-first design for field workers
Consider offline support as future enhancement

Your task is to act as a full-stack SaaS product architect and engineer and generate a comprehensive guide with examples and code snippets to build this platform using the latest Svelte 5 and SvelteKit features. Make it detailed enough that a solo developer could follow it end-to-end to launch a working MVP and scale later.

Part 6: Daily Workflow

Here’s how to use the setup day-to-day.

Starting Your Session (Claude Desktop)

First, open your project in a terminal and start context-coder:

cd ~/projects/my-svelte-app
npx context-coder --edit-file-mode

If you’re using Supabase, start it in another terminal:

supabase start

Then open Claude Desktop. The MCP servers will connect automatically. You can verify by clicking the slider icon in the input area to see available tools.

Starting Your Session (Claude)

Open Claude App and start chatting — Claude will use the tools automatically when relevant. If connection between your local project and Claude app is not establised you will see an error message when trying to use the tools as toasts.

Example Prompts

Here are some example prompts to try:

Read and understand the project:

Q: “Read my codebase and summarize the structure”

Create a new page:

Q: “Create a clients list page at src/routes/(app)/clients with search and pagination”

Query the database for context:

Q: “Show me the clients table schema, then create a TypeScript type for it”

Fix an issue:

Q: “Read src/routes/(app)/dashboard/+page.svelte and fix the TypeScript errors”

Validate code:

Q: “Use svelte-autofixer to validate the component I just asked you to create”

Ending Your Session

When you’re done working, stop context-coder by pressing Ctrl+C in its terminal. If you’re using Supabase, run supabase stop. Then close Claude Desktop or your browser.

Part 6: Troubleshooting

MCP Server Not Appearing (Claude Desktop)

If the slider icon doesn’t appear or shows no tools:

Make sure you’ve restarted Claude Desktop completely after editing the config
Check that your claude_desktop_config.json has valid JSON syntax (no trailing commas)
Verify the services are running (context-coder terminal should show “running”)
Check the logs for errors:

# macOS/Linux
tail -n 20 -f ~/Library/Logs/Claude/mcp*.log

# Windows
type %APPDATA%\Claude\logs\mcp.log

Context-Coder Won’t Connect

If Claude can’t access your files:

Verify context-coder is running in the correct directory (your Svelte project)
Make sure it’s running on port 3001
Check for error messages in the context-coder terminal

Supabase Connection Fails

If database queries don’t work:

Make sure Supabase is running: supabase status
Verify the connection string in your config matches your setup
Check the port (default is 54322 for the local Supabase database)

Claude Generates Svelte 4 Code

If Claude uses legacy syntax like export let, $:, or on:click:

Add to PROJECT.md: “Always use Svelte 5 runes, never legacy syntax”
Ask explicitly: “Use svelte-autofixer to validate this code”
Remind Claude: “Convert this to Svelte 5 runes syntax”

Part 7: Quick Reference

Config File Location (Claude Desktop)

OS	Path
macOS	`~/Library/Application Support/Claude/claude_desktop_config.json`
Windows	`%APPDATA%\Claude\claude_desktop_config.json`
Linux	`~/.config/Claude/claude_desktop_config.json`

Log File Location (Claude Desktop)

OS	Path
macOS	`~/Library/Logs/Claude/mcp*.log`
Windows	`%APPDATA%\Claude\logs\`

Commands

Action	Command
Start context-coder	`npx context-coder --edit-file-mode`
Start Supabase	`supabase start`
Stop Supabase	`supabase stop`
Check Supabase status	`supabase status`

Project Files

File	Purpose
`PROJECT.md`	Project context for Claude
`.cocoignore`	Files to exclude from context

Summary

You now have a complete AI-assisted development environment. For Claude Desktop users, you have context-coder for file access, Supabase MCP for database queries, and Svelte MCP for documentation and validation. For Claude.ai users, you have the Svelte MCP connector with its documentation and autofixer capabilities.

The daily workflow is straightforward: start your services, open Claude, and start coding. Claude will read your codebase, understand your patterns from PROJECT.md, and generate validated Svelte 5 code that follows modern best practices.

Happy coding! 🚀

What We’re Building

Two Ways to Use Claude with MCP

Prerequisites

Part 1: Claude Desktop Setup

Step 1: Download and Install

Step 2: Open Developer Settings

Step 3: Add MCP Servers to Config

Step 4: Start Required Services

Step 5: Restart Claude Desktop

Step 6: Verify the Connection

Part 2: What Each MCP Server Does

Context-Coder (File Access)

Supabase (Database Access)

Svelte MCP (Documentation & Validation)

Part 3: Project Setup Files

File 1: PROJECT.md

EXAMPLE PROJECT.md

Project: Field Service SaaS

Overview

Tech Stack

Architecture

Multi-Tenancy (Critical!)

Data Loading

File Structure

Auth Helper

Database

Tables

Conventions

Status Flows

Business Rules

Tax (Ireland)

Pricing

Type Definitions

MVP Checklist

Notes for Claude

File 2: .cocoignore

Part 5: add Prompt for Claude

EXAMPLE - INSTRUCTIONS

EXAMPLE - PROMPT

Field Service SaaS Platform - Comprehensive Development Guide

Tech Stack

1. Core Domain & Data Model

2. Authentication & Authorization

3. Backend with SvelteKit Remote Functions

Remote Function Types

File Structure

Example Remote Functions

Validation with Valibot

Auth Context in Remote Functions

Single-Flight Mutations

Supabase Edge Functions

4. Frontend (SvelteKit + Svelte 5 Runes)

Required Svelte 5 Features

SvelteKit Folder Structure

Dynamic FieldRenderer Component

Using Remote Functions in Components

State Management Patterns

Components to Build

Mobile-Responsive Design

5. Custom Fields / Trade Templates

6. Quotes & Jobs Workflow

7. Invoicing & Tax

8. Pricing & Subscriptions

9. Notifications

10. Client Portal

11. Onboarding Flow

12. Multi-Country & Multi-Language Support

13. Files & Attachments

14. Search & Filtering

15. Reporting & Analytics

16. Security & Compliance

17. Error Handling & Monitoring

18. Project Architecture & Dev Flow

19. MVP to Launch Roadmap

Phase 1: Core MVP (Weeks 1-6) - Ireland, Landscaping, English

Phase 2: Payment & Polish (Weeks 7-10)

Phase 3: Growth (Weeks 11-16)

Revenue Milestones

Configuration Requirements

svelte.config.js

File 1: `PROJECT.md`

File 2: `.cocoignore`