Claude Gemini Bridge
Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
| GOOGLE_CLOUD_PROJECT | Yes | Your Google Cloud project ID. | |
| GOOGLE_CLOUD_LOCATION | No | Google Cloud location for Gemini models. Default is 'global'. | global |
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {
"listChanged": false
} |
| prompts | {
"listChanged": false
} |
| resources | {
"subscribe": false,
"listChanged": false
} |
| experimental | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| generate_imageC | Generate design assets using Gemini or Imagen models. Args: prompt: Description of the asset. model: Model name. aspect_ratio: Image ratio. output_format: base64 or file. output_dir: Save directory. number_of_images: Image count. output_resolution: Resolution (1K/2K). |
| design_frontendA | Design a frontend UI component using Gemini 3 Pro. This tool generates high-quality, production-ready HTML components with TailwindCSS. Always uses gemini-3-pro-preview for best design quality. Perfect for creating UI components that Claude Code can then integrate into a larger application. IMPORTANT: Content language defaults to Turkish (tr). Use content_language parameter to generate content in other languages (en, de). ADVANCED THEME CUSTOMIZATION: Each theme now supports deep customization via factory parameters. See theme-specific parameters below. Workflow:
Args: component_type: Type of component to design. Options: Atoms: button, input, badge, avatar, icon, dropdown, toggle, tooltip, slider, spinner, progress, chip, divider Molecules: card, form, modal, tabs, table, accordion, alert, breadcrumb, pagination, search_bar, stat_card, pricing_card, carousel, stepper, timeline, file_upload, rating, color_picker Organisms: navbar, hero, sidebar, footer, data_table, login_form, signup_form, contact_form, feature_section, testimonial_section, pricing_table, dashboard_header, kanban_board, calendar, chat_widget, notification_center, user_profile, settings_panel context: Usage context explaining where/how the component will be used. Example: "Primary CTA button for newsletter signup on landing page" content_structure: JSON string with component content. Example: '{"text": "Abone Ol", "icon": "mail"}' '{"tier": "Pro", "price": "₺299/ay", "features": ["Sınırsız kullanıcı"]}' theme: Visual style preset. Options: - modern-minimal: Clean, professional (default) - brutalist: Bold, high-contrast, sharp edges - glassmorphism: Frosted glass, transparency - neo-brutalism: Playful with bold colors - soft-ui: Neumorphic, soft depth - corporate: Professional, trustworthy - gradient: Gradient-heavy modern design - cyberpunk: Neon colors, dark background - retro: 80s/90s inspired - pastel: Soft pastel colors - dark_mode_first: Dark mode optimized - high_contrast: WCAG AAA accessible - nature: Earth tones, organic feel - startup: Tech startup aesthetic vibe: Optional design spirit / persona. Options: - elite_corporate: Precise, luxury corporate - playful_funny: High energy, bouncy, witty - cyberpunk_edge: High contrast, neon, industrial - luxury_editorial: Elegant, spacious, serif-heavy dark_mode: Include dark: variants for dark mode support (default: True) border_radius: Custom border radius override (e.g., "rounded-xl") responsive_breakpoints: Comma-separated breakpoints (default: "sm,md,lg") accessibility_level: WCAG level - "AA" or "AAA" (default: "AA") micro_interactions: Include hover/focus animations (default: True) max_width: Maximum width constraint (e.g., "1280px", "max-w-7xl") project_context: Project-specific context for design consistency. auto_fix: Apply JS fallback fixes automatically (default: True) content_language: Language for generated content (default: "tr") use_trifecta: Enable multi-agent Trifecta Engine pipeline for higher quality output. Uses 4 specialized agents (Architect, Alchemist, Physicist, QualityGuard) instead of single API call. Produces separate HTML/CSS/JS outputs. (default: False) Returns: Dict containing: - component_id: Unique identifier for the component - atomic_level: atom, molecule, or organism - html: Self-contained HTML with TailwindCSS (ready to use) - tailwind_classes_used: List of Tailwind classes used - accessibility_features: A11y features implemented - responsive_breakpoints: Breakpoints used - dark_mode_support: Whether dark mode is supported - micro_interactions: Animation/transition classes - design_notes: Gemini's explanation of design decisions - theme_config: Advanced theme configuration used - model_used: Always gemini-3-pro-preview Examples: # Custom Brand Colors (Modern-Minimal) design_frontend( component_type="button", theme="modern-minimal", brand_primary="#E11D48", # Rose brand color neutral_base="zinc" ) |
| list_draftsA | List all saved design drafts for a given project. Use this to recover lost work or see previous versions. Args: project_name: Name of the project (folder in temp_designs) |
| start_projectB | Initialize a new design project folder. Args: project_name: Name of the project (e.g. 'burger_landing') |
| compile_project_draftsC | Combine all HTML drafts in a project into a single file. Simple concatenation of latest version of each component. |
| list_frontend_optionsA | List available frontend design options including advanced theme customization. Returns all available component types, themes, templates, section types, and NEW: advanced theme factory options for deep customization. Returns: Dict containing: - components: List of available component types (atoms, molecules, organisms) - themes: List of available theme presets with descriptions - templates: List of available page templates - sections: List of available section types for design_section - theme_factories: NEW - Advanced customization options for each theme - micro_interactions: Available interaction presets - visual_effects: Available visual effect presets - icons: Available SVG icons |
| design_pageA | Design a full page layout using Gemini 3 Pro. This tool generates complete page layouts with multiple sections. Content language is configurable (default: Turkish). Args: template_type: Type of page template. Options: - landing_page: Marketing landing page with hero, features, CTA - dashboard: Admin dashboard with sidebar, stats, data views - auth_page: Login/signup page with form and branding - pricing_page: Pricing comparison with tiers and FAQ - blog_post: Blog article layout with content and sidebar - product_page: E-commerce product page with gallery - portfolio: Portfolio/showcase page with projects grid - documentation: Docs page with navigation and content - error_page: 404/500 error page with helpful actions - coming_soon: Coming soon/maintenance page with countdown context: Usage context explaining the page purpose. Example: "Landing page for a Turkish SaaS product" content_structure: JSON string with page content. Example: '{"title": "Hoş Geldiniz", "subtitle": "En iyi çözüm"}' theme: Visual style preset (same as design_frontend) dark_mode: Include dark mode support (default: True) project_context: Project-specific context for design consistency. content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German). Returns: Dict containing: - page_id: Unique identifier for the page - template_type: The template used - html: Complete HTML with TailwindCSS - sections: List of sections included - design_notes: Gemini's explanation of design decisions - model_used: Always gemini-3-pro-preview |
| refine_frontendA | Refine an existing component design based on feedback. Use this tool to iterate on a design without starting from scratch. Send the previous HTML and describe the changes you want. All content will be generated in Turkish. Args: previous_html: The existing HTML code to refine. This should be the complete HTML from a previous design_frontend or design_page call. modifications: Natural language description of desired changes. Examples: - "Buton rengini maviden yeşile çevir" - "Header'ı daha kompakt yap" - "Dark mode desteği ekle" - "Mobil responsive sorunlarını düzelt" - "Hover efektlerini daha belirgin yap" project_context: Optional project context for consistency. Returns: Dict containing: - component_id: Identifier for the refined component - html: The modified HTML with TailwindCSS - changes_made: Summary of changes applied - design_notes: Explanation of modifications - model_used: Always gemini-3-pro-preview Example: refine_frontend( previous_html='Gönder', modifications="Buton boyutunu büyüt ve hover efekti ekle" ) |
| design_sectionA | Design a single page section that matches previous sections. Use this tool to build large pages section-by-section, where each section maintains visual consistency with previous ones. This solves the token limit problem by designing one section at a time. Content language is configurable (default: Turkish). Chain Workflow:
Args: section_type: Type of section to design. Options: - hero: Hero/banner section with headline and CTA - features: Feature showcase grid or list - pricing: Pricing tiers/cards - testimonials: Customer testimonials/reviews - cta: Call-to-action section - footer: Page footer with links - stats: Statistics/metrics display - faq: FAQ accordion section - team: Team members grid - contact: Contact form section - gallery: Image/portfolio gallery - newsletter: Newsletter signup section context: Usage context explaining where/how the section will be used. Example: "Hero section for a Turkish SaaS landing page" previous_html: HTML from previous section for style matching. When provided, Gemini will analyze and match: - Color palette (primary, secondary, background) - Typography (fonts, weights, sizes) - Spacing patterns (padding, margins) - Border radius - Shadow styles - Animation patterns design_tokens: JSON string with explicit design tokens to use. If not provided but previous_html is given, tokens will be extracted automatically. Format: '{"colors": {...}, "typography": {...}, "spacing": {...}}' content_structure: JSON string with section content. Example: '{"headline": "Başlık", "subheadline": "Alt başlık", "cta": "Başla"}' theme: Visual style preset (modern-minimal, brutalist, etc.) vibe: Optional design spirit / persona. Options: - elite_corporate: Precise, luxury corporate - playful_funny: High energy, bouncy, witty - cyberpunk_edge: High contrast, neon, industrial - luxury_editorial: Elegant, spacious, serif-heavy project_context: Project-specific context for design consistency. content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German). Returns: Dict containing: - section_type: Type of section designed - html: Self-contained HTML with TailwindCSS classes - design_tokens: Extracted design tokens for next section in chain - tailwind_classes_used: List of Tailwind classes used - accessibility_features: A11y features implemented - responsive_breakpoints: Breakpoints used - dark_mode_support: Whether dark mode is supported - design_notes: Gemini's design decisions explanation - model_used: Always gemini-3-pro-preview Example Chain: # 1. Start with hero hero = design_section( section_type="hero", context="Landing page for B2B SaaS" ) |
| design_from_referenceA | Design a component based on a reference image using Gemini Vision. This tool analyzes a screenshot or design reference image and creates a similar component with matching visual style. Uses Gemini's vision capabilities to extract design tokens (colors, typography, spacing, etc.) and then generates HTML matching those tokens. Two modes:
Content language is configurable (default: Turkish). Args: image_path: Path to the reference image file. Supported formats: PNG, JPG, JPEG, WEBP, GIF. Example: "/path/to/screenshot.png" component_type: Type of component to design based on the reference. If empty and extract_only=False, will auto-detect from image. Options: hero, navbar, card, pricing_card, footer, etc. instructions: Additional instructions for modifications. Examples: - "Buna benzer ama mavi tonlarında" - "Daha minimalist bir versiyon" - "Aynı stilde ama dark mode" - "Spacing'i daha geniş tut" context: Usage context for the component. Example: "Hero section for a Turkish restaurant website" project_context: Project-specific context for design consistency. Example: "Project: KokoreçUsta - Traditional restaurant. Target: Local customers. Tone: Warm, nostalgic." extract_only: If True, only extract and return design tokens. If False, also generate a matching HTML component. Default: False auto_fix: Apply JavaScript fallback fixes to generated HTML. Default: True content_language: Language code for content generation (default: "tr"). Supported: "tr" (Turkish), "en" (English), "de" (German). Returns: Dict containing: - design_tokens: Extracted design tokens from the reference image - colors: Color palette with hex codes - typography: Font sizes, weights, line heights - spacing: Padding, margin, gap patterns - borders: Border radius, border styles - shadows: Shadow styles - layout: Grid/flex patterns detected - aesthetic: Overall design aesthetic (minimal, bold, etc.) - component_hints: Detected UI component types in the image - html: Generated HTML (only if extract_only=False) - design_notes: How the reference was interpreted - modifications: Changes made based on instructions - model_used: Always gemini-3-pro-preview Examples: # Extract only - useful for understanding a design design_from_reference( image_path="/path/to/inspiration.png", extract_only=True ) Workflow: 1. Gemini Vision analyzes the reference image 2. Extracts design tokens (colors, typography, spacing, etc.) 3. Identifies aesthetic and component types 4. (If extract_only=False) Generates matching HTML with TailwindCSS 5. Applies JS fallback fixes if auto_fix=True |
| list_modelsA | List available Gemini models for design tasks. Returns information about image generation models available on Vertex AI. This MCP server is design-focused - use image models for creating design assets like hero backgrounds, product images, and illustrations. Returns: Dict containing image models with their specifications. |
| replace_section_in_pageA | Replace a single section in an existing page with an improved version. This tool enables iterative design improvement by replacing only the specified section while preserving all other sections. The new section maintains visual consistency with the rest of the page. CRITICAL: The page HTML must use section markers in this format: Args: page_html: Full HTML of the existing page with section markers. section_type: Section to replace. Valid types: - navbar: Navigation bars, headers - hero: Hero sections, landing areas - stats: Statistics, metrics sections - features: Feature grids, benefit lists - testimonials: Customer reviews, social proof - pricing: Pricing tables, plans - cta: Call-to-action sections - footer: Site footers modifications: Detailed description of desired changes. Example: "Add mega menu, search bar, and announcement banner" preserve_design_tokens: Keep colors/typography consistent with page (default: True) theme: Visual style preset for the new section content_language: Language code for content (default: "tr") Returns: Dict containing: - html: Updated full page HTML with only the target section changed - modified_section: Which section was replaced - preserved_sections: List of sections that were NOT modified - design_notes: Explanation of design decisions - error: Error message if the operation failed Example: # Update only the navbar in an existing landing page result = replace_section_in_page( page_html=existing_page, section_type="navbar", modifications="Add mega menu with 4 columns, search bar, dark mode toggle" ) |
| validate_theme_contrastA | Validate color contrast ratio for WCAG compliance. Use this tool to check if your color combinations meet accessibility standards before using them in designs. Args: foreground: Foreground (text) color in hex format (e.g., "#000000") background: Background color in hex format (e.g., "#FFFFFF") wcag_level: Target WCAG level - "AA" or "AAA" text_size: Text size category - "normal" or "large" (large = 18pt+ or 14pt+ bold) Returns: Dict containing: - passes: Boolean indicating if contrast meets requirements - ratio: Calculated contrast ratio (e.g., 7.5) - required_ratio: Minimum required ratio for the level/size - message: Human-readable result message - recommendations: Suggestions if contrast fails Example: validate_theme_contrast( foreground="#FFFFFF", background="#3B82F6", # blue-500 wcag_level="AA" ) |
| maestro_start_sessionA | Start a new MAESTRO design wizard session. MAESTRO asks intelligent questions to understand your design needs and automatically selects the best design mode and parameters. This is the entry point for the guided design workflow. MAESTRO will ask a series of questions about your intent, scope, theme preferences, and then generate a design decision. NEW in v2: If a design_brief is provided, MAESTRO uses AI to extract the project's "soul" (brand personality, target audience, visual language) and generates dynamic, context-aware questions to fill gaps. Args: project_context: Project description for context (e.g., "B2B SaaS dashboard for Turkish fintech startup"). Helps MAESTRO make better design decisions. existing_html: Optional existing HTML for refinement or style matching. If provided, MAESTRO may suggest refine_frontend or design_section modes. design_brief: Optional design brief for soul extraction (v2 feature). When provided, MAESTRO analyzes the brief to understand brand personality, target audience, and visual preferences, then asks only the questions needed to fill gaps. Example: "Modern fintech app for millennials. Professional but approachable. Blue/purple gradient theme preferred." Returns: Dict containing: - session_id: Unique session identifier (use this for subsequent calls) - question: First interview question with id, text, category, options - progress: Interview progress (0.0 to 1.0) - status: "interviewing" | "decided" | "failed" - v2_enabled: Whether soul-aware v2 mode is active (only if design_brief provided) - soul_confidence: Confidence score of soul extraction (0.0-1.0, only in v2) Example: # Start a new design session with design brief (v2) result = await maestro_start_session( design_brief="E-commerce product page for Turkish market. " "Target: young professionals. Tone: modern, trustworthy.", project_context="E-commerce product page" ) session_id = result["session_id"] # Answer the first question using maestro_answer |
| maestro_answerA | Submit an answer to the current MAESTRO question. Call this tool to answer each question during the MAESTRO interview. Returns either the next question or a design decision if the interview is complete. Args: session_id: Active session ID from maestro_start_session question_id: ID of the question being answered (from question.id) selected_options: List of selected option IDs (e.g., ["opt_landing_page"]). Most questions require exactly one selection. free_text: Optional free text input for text-type questions Returns: Dict containing EITHER: - question: Next question (if interview continues) - progress: Updated interview progress (0.0 to 1.0) - status: "interviewing" Example: # Answer a question result = await maestro_answer( session_id="maestro_abc123", question_id="q_intent_main", selected_options=["opt_new_design"] ) if result["status"] == "decided": # Ready to execute! decision = result["decision"] else: # More questions to answer next_question = result["question"] |
| maestro_get_decisionA | Force a design decision with current answers (skip remaining questions). Use this tool when you want to proceed with partial information and skip the remaining interview questions. MAESTRO will make the best decision based on the answers provided so far. Args: session_id: Active session ID from maestro_start_session Returns: Dict containing: - decision: Design decision with: - mode: Selected design mode (design_frontend, design_page, etc.) - confidence: Confidence score (0.0 to 1.0) - parameters: Mode-specific parameters - reasoning: Human-readable explanation - alternatives: Other viable modes - status: "decided" | "failed" Example: # Force decision after answering some questions result = await maestro_get_decision(session_id="maestro_abc123") if result["status"] == "decided": print(f"Mode: {result['decision']['mode']}") print(f"Confidence: {result['decision']['confidence']}") |
| maestro_executeA | Execute the design decision from the MAESTRO session. This generates the actual design output (HTML, CSS, JS) based on the mode and parameters determined during the interview. You must have a decided session (either from completing the interview or calling maestro_get_decision) before calling this tool. Args: session_id: Active session ID with a decision ready use_trifecta: Use multi-agent Trifecta pipeline for higher quality. When True, uses Architect → Alchemist → Physicist → QualityGuard agents for superior output. (default: False) quality_target: Quality level for output. Options: - "draft": Quick output (threshold: 6.0, 1 iteration) - "production": Standard quality (threshold: 7.0, 2 iterations) - "high": High quality with Critic (threshold: 8.0, 3 iterations) - "premium": Premium quality (threshold: 8.5, 4 iterations) - "enterprise": Enterprise-grade (threshold: 9.0, 5 iterations) (default: "production") Returns: Dict containing: - html: Generated HTML output - mode: Design mode that was executed - trifecta_enabled: Whether Trifecta pipeline was used - quality_target: Quality level used - css_output: Separate CSS (only if trifecta=True) - js_output: Separate JS (only if trifecta=True) - design_notes: Explanation of design decisions - status: "complete" | "failed" Example: # Execute with Trifecta for high quality result = await maestro_execute( session_id="maestro_abc123", use_trifecta=True, quality_target="premium" ) if result["status"] == "complete": html = result["html"] |
| maestro_abortA | Abort and cleanup a MAESTRO session. Use this to cancel an in-progress interview and free resources. Sessions automatically expire after 1 hour, but you can use this to immediately cleanup if needed. Args: session_id: Session ID to abort Returns: Dict containing: - success: True if session was aborted, False if not found - message: Human-readable status message Example: # Abort an active session result = await maestro_abort(session_id="maestro_abc123") if result["success"]: print("Session aborted successfully") |
| maestro_get_recommendationsB | Get smart design recommendations based on user preferences. Phase 6 feature: Uses AI-powered recommendation engine to suggest optimal theme, mode, and quality settings based on:
Returns: Dict containing: - theme: Theme recommendation with confidence and alternatives - mode: Design mode recommendation - quality: Quality level recommendation - defaults: Recommended default values for all parameters Example: # Get recommendations before starting a session recs = await maestro_get_recommendations() print(f"Önerilen tema: {recs['theme']['value']}") print(f"Güven: {recs['theme']['confidence']:.0%}") |
| maestro_get_analyticsA | Get MAESTRO session analytics and usage metrics. Phase 6 feature: Provides comprehensive analytics including:
Returns: Dict containing: - session_tracker: Session statistics - cost_summary: Token usage and cost estimates - quality_summary: Quality score aggregations Example: # Get analytics after running several sessions analytics = await maestro_get_analytics() print(f"Toplam oturum: {analytics['session_tracker']['total_sessions']}") print(f"Tahmini maliyet: ${analytics['cost_summary']['total_cost']:.4f}") |
| maestro_get_progressA | Get rich formatted progress display for a session. Phase 6 feature: Returns visual progress information including:
Args: session_id: Active session ID Returns: Dict containing: - progress_bar: Visual ASCII progress bar - percentage: Progress as percentage string - current_step: Current step number - total_steps: Estimated total steps - category_tip: Helpful tip for current category Example: progress = await maestro_get_progress(session_id="maestro_abc123") print(progress["progress_bar"]) # ████████░░░░░░░░ 50% |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
No prompts | |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
No resources | |
Latest Blog Posts
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/archolet/claude-gemini-bridge'
If you have feedback or need assistance with the MCP directory API, please join our Discord server