# Astro Server Island Detector MCP for AI Agents MCP

> Astro Server Island Detector scans your HTML and JSX to find Astro islands. It identifies components using specific directives like server:defer or server:only. This helps you catch misconfigured SSR settings before they break your site's hydration or streaming capabilities. Perfect for developers working with Astro's islands architecture.

## Overview
- **Category:** web-development
- **Price:** Free
- **Endpoint:** https://edge.vinkius.com/vk_preview_c84U9zq1ua9numF4y9Ta4iIRfQ8UOQIWhV7czCIO/mcp
- **Tags:** astro, ssr, islands-architecture, html-parsing, web-performance

## Description

Writing Astro code involves managing complex component strategies that can easily break if a single directive is misplaced. You might spend hours debugging why a component isn't hydrating correctly or why your streaming SSR isn't behaving as expected. This MCP changes that by letting your AI client audit your code snippets instantly. Instead of manually hunting through JSX for specific tags, you can just hand the code to your agent and get an immediate report on what it found. It acts as a safety net for your component architecture. When you connect via the Vinkius catalog, you're adding a specialized validator to your development toolkit that understands exactly how islands should be structured. You stop guessing if your configuration is valid and start knowing.

## Tools

### detect_islands
Scans an HTML snippet to find Astro islands. It identifies the specific components and their associated directives.

## Prompt Examples

**Prompt:** 
```
Check this snippet for Astro islands: <div class='container'><MyComponent server:defer /></div>
```

**Response:** 
```
**Found 1 island:**

* **Component:** `MyComponent` 
* **Strategy:** `server:defer`
```

**Prompt:** 
```
Are there any islands in this code? <header><Nav server:only /></header>
```

**Response:** 
```
**Island Detection Results:**

| Component | Strategy |
| :--- | :--- |
| `Nav` | `server:only` |
```

**Prompt:** 
```
Scan this HTML for any invalid Astro strategies: <div server:invalid='true'></div>
```

**Response:** 
```
No valid islands were detected. The tool flagged an unrecognized directive in the snippet.
```

## Capabilities

### Identify server:defer components
Finds all components using the defer strategy within your code.

### Spot server:only directives
Locates components that are restricted to the client side.

### Detect invalid SSR configurations
Flags any unrecognized or broken directives in your snippets.

### Audit JSX for island architecture
Scans through large blocks of code to map out your component structure.

## Use Cases

### Broken Hydration Debugging
A developer notices a component isn't interactive. They ask their agent to check the snippet, and it finds a misconfigured server:only tag.

### Code Review Automation
During a PR review, you use your agent to scan new JSX files for any accidental changes to Astro island directives.

### SSR Strategy Validation
You're implementing complex streaming SSR and need to confirm that all components are using the correct server:defer settings.

## Benefits

- Catch misconfigured components before they break your streaming.
- Instantly identify all directives in a large JSX block.
- Prevent broken hydration by spotting invalid configurations early.
- Use the tool to audit code snippets without manual searching.
- Ensure your islands architecture remains intact during rapid development.

## How It Works

The bottom line is you get instant validation for your Astro component configurations.

1. Provide an HTML or JSX snippet to your AI client.
2. The MCP scans the code for Astro-specific directives.
3. You receive a clear breakdown of found islands and their strategies.

## Frequently Asked Questions

**How does Astro Server Island Detector help with hydration errors?**
It identifies components using incorrect directives that cause hydration to fail, allowing you to fix them before they reach production.

**Can I use Astro Server Island Detector to check my JSX files?**
Yes. You can provide any HTML or JSX snippet to your agent, and it will scan for all active Astro islands.

**Does Astro Server Island Detector work with server:defer?**
Yes, it specifically looks for the server:defer and server:only directives to ensure your streaming SSR is configured correctly.

**What happens if my code has an invalid Astro directive?**
The MCP will scan the snippet and flag any unrecognized or invalid configuration attempts that could break your component architecture.

**Is Astro Server Island Detector useful for large codebases?**
It is extremely useful for auditing specific snippets or files during development to ensure no misconfigurations have been introduced.

**What does this MCP server do?**
It scans HTML or JSX snippets to find Astro components using `server:defer` or `server:only` directives, providing a list of detected islands and their strategies.

**How can I use the detection tool?**
You can call the `detect_islands` tool by providing an `html_snippet` containing your Astro component code.

**Does it support both defer and only strategies?**
Yes, the engine is specifically designed to detect both `server:defer` and `server:only` directives within your code snippets.