radon-ai

What This Skill Does

Radon AI is a powerful MCP (Model Context Protocol) server designed specifically for React Native developers. It bridges the gap between your AI agent and the development environment, providing real-time visibility into the app's state, logs, and network traffic. By leveraging an indexed database of React Native libraries, it offers precise, up-to-date guidance on API usage, configuration, and best practices. It transforms your agent into an autonomous debugger capable of viewing the component hierarchy, inspecting network requests, and interacting with the app's lifecycle through manual or programmatic reloads. It essentially gives the agent 'eyes' and 'hands' inside your React Native project.

Installation

To integrate Radon AI into your environment, use the OpenClaw CLI. Ensure you have the necessary environment variables configured for your project path. Run the following command in your terminal:

clawhub install openclaw/skills/skills/latekvo/radon-ai

Use Cases

• Debugging Layout Issues: Use view_component_tree to identify why a UI element is overflowing or hidden. Pair this with view_screenshot to visually verify the rendered state.
• API Troubleshooting: Investigate failed fetch requests using view_network_logs. Drill down into specific payloads and headers with view_network_request_details to catch malformed requests.
• Environment Syncing: If you are experiencing stale state, use reload_application with the reloadJs parameter. If the native bridge is corrupted, escalate to restartProcess or rebuild to reset the environment completely.
• Library Integration: Ask the agent about complex library configurations (e.g., Reanimated, React Navigation) and have it query current documentation to provide snippets directly into your workflow.

Example Prompts

1. "The login button is not responding. Can you check the component tree to see if the element is properly mounted and then view the latest network logs to see if a request is even being fired?"
2. "I am getting a strange build error on Android. Please pull the application logs and identify if there is a missing dependency or a native build conflict."
3. "Show me the documentation for the latest version of React Navigation and help me configure a bottom tabs navigator with a custom header."

Tips & Limitations

• Proactive Debugging: Always start by checking logs and screenshots before initiating a full rebuild, as these are computationally expensive.
• Component Visibility: Remember that view_component_tree only shows mounted components; conditional rendering logic may hide components that you expect to see.
• Environment: Ensure your development server (Metro) is running and accessible to the MCP server for the tools to function correctly. The library database is updated daily, but for brand-new releases, you may need to rely on external web search if the index hasn't caught up.