create_html_page
Generate HTML pages to display Street View images with descriptive text, creating virtual tours or location showcases by compiling multiple images into a single document.
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.",
"<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>
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| html_elements | Yes | ||
| filename | Yes | ||
| title | No | Street View Tour |
Implementation Reference
- src/street_view_mcp/server.py:155-307 (handler)The @mcp.tool()-decorated function that implements the create_html_page tool. It generates a complete HTML page from provided html_elements, saves it to the html directory, and opens it in the browser. The schema is inferred from the function signature: html_elements (List[str]), filename (str), title (str optional).
@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}"}