drio
Open app

Databutton MCP – build your own MCPs

Source

Databutton MCP Server

Catalog onlyCatalog onlySTDIO

Overview

Databutton MCP Server is an AI agent that builds and deploys frontends and backends in React and Python APIs/MCPs, designed for creating complex business applications.

To use the Databutton MCP Server, you can install it via Smithery or manually configure it for Claude Desktop. For installation via Smithery, run the command: npx -y @smithery/cli install @databutton/databutton-mcp --client claude. For manual installation, add the server configuration to the appropriate config file based on your operating system.

  • AI-driven app planning and deployment - Supports building both frontends and backends - Integration with React and Python APIs - Initial planning mode for app generation
  1. Rapid development of business applications with complex requirements.
  2. Streamlining the app planning process for developers.
  3. Facilitating the deployment of scalable web applications.

Add to your AI client

Use these steps to connect Databutton MCP – build your own MCPs in Cursor, Claude, VS Code, and other MCP-compatible apps. The same JSON appears in the Use with menu above for one-click copy.

Cursor

Add this to your .cursor/mcp.json file in your project root, then restart Cursor.

.cursor/mcp.json

{
  "mcpServers": {
    "databutton-mcp-databutton": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

Claude Desktop

Add this server entry to the mcpServers object in your Claude Desktop config, then restart the app.

~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows)

{
  "mcpServers": {
    "databutton-mcp-databutton": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

Claude Code

Add this to your project's .mcp.json file. Claude Code will detect it automatically.

.mcp.json (project root)

{
  "mcpServers": {
    "databutton-mcp-databutton": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

VS Code (Copilot)

Add this to your .vscode/mcp.json file. Requires the GitHub Copilot extension with MCP support enabled.

.vscode/mcp.json

{
  "servers": {
    "databutton-mcp-databutton": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

Windsurf

Add this to your Windsurf MCP config file, then restart Windsurf.

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "databutton-mcp-databutton": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

Cline

Open Cline settings, navigate to MCP Servers, and add this server configuration.

Cline MCP Settings (via UI)

{
  "mcpServers": {
    "databutton-mcp-databutton": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-databutton-mcp-databutton"
      ]
    }
  }
}

FAQ

What programming languages does Databutton MCP Server support?

It supports React for frontends and Python for backends.

Is there a way to debug the server?

Yes, you can use the MCP Inspector for debugging, which provides a URL to access debugging tools in your browser.

How can I install Databutton MCP Server?

You can install it automatically via Smithery or manually by configuring the server settings in your Claude Desktop.7:["$","div",null,{"className":"container mx-auto flex flex-col gap-4","children":["$L26","$L27",["$","$L28",null,{"currentProject":{"id":2564,"uuid":"3667a9b4-3d04-4294-9804-984b6dd1a2fa","name":"databutton-mcp","title":"Databutton MCP – build your own MCPs","description":"Databutton MCP Server","avatar_url":"https://avatars.githubusercontent.com/u/89971119?v=4","created_at":"2025-03-13T08:50:53.883Z","updated_at":"2025-03-22T05:05:50.309Z","status":"created","author_name":"databutton","author_avatar_url":"https://avatars.githubusercontent.com/u/89971119?v=4","tags":"mcp,codegen,codegeneration,appbuilder,mcp-server,vibecoding","category":"developer-tools","is_featured":false,"sort":1,"url":"https://github.com/databutton/databutton-mcp","target":"_self","content":"$29","summary":"$2a","img_url":null,"type":null,"metadata":"{\"star\":\"12\",\"license\":\"MIT license\",\"language\":\"TypeScript\",\"is_official\":false,\"latest_commit_time\":\"2025-04-07 07:42:02\"}","user_uuid":null,"tools":null,"sse_url":null,"sse_provider":null,"sse_params":null,"is_official":false,"server_command":null,"server_params":null,"server_config":null,"allow_call":false,"is_innovation":false,"is_dxt":false,"dxt_manifest":null,"dxt_file_url":null,"is_audit":false},"randomProjects":[],"currentServerKey":"$undefined"}]]}]

Developer tools