databutton

Databutton MCP is designed to help you plan and bootstrap new applications by leveraging Databutton's AI agent to generate an initial plan for your app, focusing on frontends built with React and backends with Python APIs/MCPs. The server can be used to produce an actionable starting point for a project, including suggested data models, UI components, and API endpoints. When you interact with this MCP, you’re leveraging the agent’s planning mode to outline a coherent architecture before diving into implementation. You can then deploy the generated frontend and backend scaffolds and iterate on the plan as your app evolves. For debugging and inspection, the MCP Inspector (a separate tool) can be used to view and diagnose the communications and workflow across MCP servers via a browser-based interface.

In practice, you would run the server as configured in Claude Desktop, use the planning capabilities to generate an initial app blueprint, and then refine the plan by requesting additional details or adjustments. The server communicates over stdio, so the Inspector tool is recommended for tracing requests and debugging flow during development.

Prerequisites:

• Node.js and npm installed on your machine
• Claude Desktop installed (since this MCP is intended to be used with Claude Desktop)
• Access to your project workspace where you want to generate the app plan

Installation steps:

1. Ensure Node.js and npm are installed:
   • macOS / Linux: curl -fsSL https://fnm.vercel.app/install | bash or use your preferred Node installer
   • Windows: install Node.js from https://nodejs.org/
2. Install dependencies (from the MCP repository or your project directory): npm install
3. Build the server (for production use): npm run build
4. Run the server for development with auto-rebuild (optional): npm run watch
5. (Optional) Start the MCP Inspector for debugging: npm run inspector
6. Configure Claude Desktop to point to the MCP server:
   • For Claude Desktop, add the following in the appropriate config location: On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json On Windows: %APPDATA%/Claude/claude_desktop_config.json { "mcpServers": { "databutton": { "command": "/path/to/databutton/build/index.js" } } } Notes:

• The server is invoked via Node.js with the path to the built index.js as shown above. Adjust the path to your actual build output.
• If you modify code, use npm run build to regenerate the server bundle before deployment.

Tips and cautions:

• Debugging MCP servers happens via stdio; leverage the MCP Inspector for browser-based debugging and a URL to access debugging tools.
• Keep your Claude Desktop config up to date with the correct path to the built server entry point.
• The server generates an initial app plan; you can request refinements or additional components from the agent as needed.
• Since this MCP focuses on planning, you won’t see a full production frontend/backend until you commit the generated plan and implement the actual app components.
• Environment variables can be added if the server or the Claude Desktop setup requires them; use the env section in the mcp_config if needed in the future.