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
- 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 - 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"], }