generate_frontend

Generate Next.js frontend code for Arbitrum dApps using wagmi v2 and RainbowKit. Create contract-integrated interfaces with specified templates and UI frameworks.

Instructions

Generate Next.js frontend code for Arbitrum dApps. Uses wagmi v2 and RainbowKit.

Input Schema

TableJSON Schema

Name	Required	Description	Default
`prompt`	Yes	Description of the frontend functionality needed
`template`	No	Specific template to use (auto-selected if not provided)
`contract_abi`	No	Contract ABI JSON string for generating hooks
`contract_address`	No	Contract address to integrate with
`ui_framework`	No	UI framework to use	daisyui

Implementation Reference

src/mcp/tools/generate_frontend.py:82-139 (handler)

The 'execute' method within 'GenerateFrontendTool' handles the generation of frontend code based on the provided prompt and optional parameters by selecting a template, customizing it with contract details, and generating supporting files like package.json and tests.

def execute(self, **kwargs) -> dict[str, Any]:
    """Generate frontend code based on the request."""
    prompt = kwargs.get("prompt", "")
    template_name = kwargs.get("template")
    contract_abi = kwargs.get("contract_abi")
    contract_address = kwargs.get("contract_address", "0x...")
    ui_framework = kwargs.get("ui_framework", "daisyui")
    include_tests = kwargs.get("include_tests", False)

    # Validate inputs
    if not prompt:
        return {"error": "prompt is required"}

    # Select template
    if template_name:
        template = get_frontend_template(template_name)
        if not template:
            return {"error": f"Unknown template: {template_name}"}
    else:
        template = select_frontend_template(prompt)

    # Context retrieval (template-based generation doesn't require RAG)
    context = []

    # Customize template based on prompt
    files = self._customize_template(template, prompt, contract_abi, contract_address)

    # Generate package.json
    package_json = self._generate_package_json(template, prompt)

    # Add test files if requested
    if include_tests:
        test_files = self._generate_tests(template, prompt)
        files.update(test_files)

    # Build response
    result = {
        "template_used": template.name,
        "framework": template.framework,
        "files": files,
        "package_json": package_json,
        "dependencies": template.dependencies,
        "dev_dependencies": template.dev_dependencies,
        "env_vars": template.env_vars,
        "scripts": template.scripts,
        "setup_instructions": self._get_setup_instructions(template),
    }

    if context:
        result["references"] = [
            {
                "source": c.get("metadata", {}).get("source", "Unknown"),
                "relevance": c.get("distance", 0),
            }
            for c in context[:3]
        ]

    return result

src/mcp/tools/generate_frontend.py:42-75 (schema)

The input_schema defines the required 'prompt' and optional parameters like 'template', 'contract_abi', 'contract_address', 'ui_framework', and 'include_tests' for the generate_frontend tool.

input_schema = {
    "type": "object",
    "properties": {
        "prompt": {
            "type": "string",
            "description": "Description of the frontend functionality needed",
        },
        "template": {
            "type": "string",
            "enum": ["nextjs_wagmi", "daisyui_components", "contract_dashboard", "token_interface"],
            "description": "Specific template to use (optional, auto-selected if not provided)",
        },
        "contract_abi": {
            "type": "string",
            "description": "Contract ABI JSON string for generating hooks",
        },
        "contract_address": {
            "type": "string",
            "description": "Contract address to integrate with",
        },
        "ui_framework": {
            "type": "string",
            "enum": ["tailwind", "daisyui"],
            "description": "UI framework to use",
            "default": "daisyui",
        },
        "include_tests": {
            "type": "boolean",
            "description": "Include test files",
            "default": False,
        },
    },
    "required": ["prompt"],
}

ARBuilder