create_html_page
Generate customizable HTML pages for showcasing Street View images. Compile multiple locations into a single document with structured content, responsive design, and automated boilerplate for virtual tours or location highlights.
Instructions
Create an HTML page specifically for displaying Street View images with descriptive text.
This tool is designed to compile multiple Street View images into a single viewable HTML document, creating a virtual tour or location showcase. The function automatically wraps your content in a complete HTML document with:
DOCTYPE declaration
HTML, head, and body tags
Basic responsive styling optimized for displaying images
Title from the parameter
Args: html_elements: List of content HTML elements (just the body content, no need for HTML structure) filename: Name of the HTML file to create (without directory path) title: Title for the HTML page
Returns: Dict: A status message indicating success or failure
Raises: ValueError: If the filename already exists or is invalid
Note:
- You only need to provide the CONTENT elements (no need for html, head, body tags)
- IMPORTANT: When including Street View images, you MUST use the path "../output/":
<img src="../output/empire.jpg" alt="Empire State Building">
- The "../" prefix is REQUIRED because HTML files are in html/ directory while
images are in output/ directory (both at the same level)
Example usage: ``` # Create a virtual Street View tour with multiple locations html_elements = [ "New York City Landmarks Tour", "Explore famous landmarks through Street View images.",
HTML Boilerplate (automatically added):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
margin: 20px 0;
}
h1, h2, h3 {
color: #2c3e50;
}
</style>
</head>
<body>
<!-- Your content elements are inserted here -->
</body>
</html>
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| filename | Yes | ||
| html_elements | Yes | ||
| title | No | Street View Tour |
Implementation Reference
- src/street_view_mcp/server.py:155-307 (handler)The core handler implementation for the 'create_html_page' tool. Decorated with @mcp.tool() for automatic registration in FastMCP. Accepts list of HTML elements, filename, and optional title; generates a complete styled HTML document for Street View tours, saves to html/ directory, and opens in default browser.@mcp.tool() def create_html_page(html_elements: List[str], filename: str, title: str = "Street View Tour") -> Dict[str, str]: """ Create an HTML page specifically for displaying Street View images with descriptive text. This tool is designed to compile multiple Street View images into a single viewable HTML document, creating a virtual tour or location showcase. The function automatically wraps your content in a complete HTML document with: - DOCTYPE declaration - HTML, head, and body tags - Basic responsive styling optimized for displaying images - Title from the parameter Args: html_elements: List of content HTML elements (just the body content, no need for HTML structure) filename: Name of the HTML file to create (without directory path) title: Title for the HTML page Returns: Dict: A status message indicating success or failure Raises: ValueError: If the filename already exists or is invalid Note: - You only need to provide the CONTENT elements (no need for html, head, body tags) - IMPORTANT: When including Street View images, you MUST use the path "../output/": `<img src="../output/empire.jpg" alt="Empire State Building">` - The "../" prefix is REQUIRED because HTML files are in html/ directory while images are in output/ directory (both at the same level) Example usage: ``` # Create a virtual Street View tour with multiple locations html_elements = [ "<h1>New York City Landmarks Tour</h1>", "<p>Explore famous landmarks through Street View images.</p>", "<h2>Empire State Building</h2>", "<img src='../output/empire.jpg' alt='Empire State Building'>", "<p class='location'>350 Fifth Avenue, New York, NY</p>", "<p class='description'>This 102-story Art Deco skyscraper in Midtown Manhattan was completed in 1931.</p>", "<h2>Times Square</h2>", "<img src='../output/timessquare.jpg' alt='Times Square'>", "<p class='location'>Broadway & 7th Avenue, New York, NY</p>", "<p class='description'>Famous for its bright lights, Broadway theaters, and as the site of the annual New Year's Eve ball drop.</p>" ] ``` HTML Boilerplate (automatically added): ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; color: #333; } img { max-width: 100%; height: auto; border-radius: 5px; margin: 20px 0; } h1, h2, h3 { color: #2c3e50; } </style> </head> <body> <!-- Your content elements are inserted here --> </body> </html> ``` """ # Validate filename if not filename.endswith('.html'): filename += '.html' # Create full path file_path = HTML_DIR / filename # Check if file already exists if file_path.exists(): raise ValueError(f"File {file_path} already exists") # Ensure directory exists HTML_DIR.mkdir(parents=True, exist_ok=True) # Combine HTML elements content = '\n'.join(html_elements) # HTML template with format placeholder html_template = """<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> <style> body {{ font-family: Arial, sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 20px; color: #333; }} img {{ max-width: 100%; height: auto; border-radius: 5px; margin: 20px 0; }} h1, h2, h3 {{ color: #2c3e50; }} .location {{ font-weight: bold; margin-bottom: 5px; }} .description {{ margin-bottom: 30px; }} </style> </head> <body> {content} </body> </html> """ # Format the template with content and title html_content = html_template.format(title=title, content=content) # Write to file with open(file_path, 'w') as f: f.write(html_content) # Open in browser abs_path = file_path.absolute().as_uri() webbrowser.open(abs_path) return {"status": "success", "message": f"Created and opened {filename}"}
- src/street_view_mcp/server.py:155-155 (registration)Registration of the create_html_page tool via FastMCP's @mcp.tool() decorator.@mcp.tool()
- Type hints and detailed docstring define the input schema (html_elements: List[str], filename: str, title: str) and output (Dict[str, str]) for the tool.def create_html_page(html_elements: List[str], filename: str, title: str = "Street View Tour") -> Dict[str, str]: """ Create an HTML page specifically for displaying Street View images with descriptive text. This tool is designed to compile multiple Street View images into a single viewable HTML document, creating a virtual tour or location showcase. The function automatically wraps your content in a complete HTML document with: - DOCTYPE declaration - HTML, head, and body tags - Basic responsive styling optimized for displaying images - Title from the parameter Args: html_elements: List of content HTML elements (just the body content, no need for HTML structure) filename: Name of the HTML file to create (without directory path) title: Title for the HTML page Returns: Dict: A status message indicating success or failure Raises: ValueError: If the filename already exists or is invalid