Skip to main content

MCP Generated App

This lab demonstrates how to use Claude Code as an MCP host to connect to the Retool MCP Server and generate a Retool application from natural language prompts.

Requirements​

  • Claude Code installed on your machine
  • A Retool instance with an existing database table (electronic_products)
  • Access to a terminal (macOS)

This lab uses the electronic_products table defined in the Compliance Dashboard lab. Complete that lab's database setup before proceeding.

MCP Setup​

Install Claude Code​

Review and follow the Anthropic quickstart documentation to install Claude Code on your machine.

Configure the MCP Server​

  • Open a Terminal and create a working directory, then change into it:
mkdir retool-mcp-lab && cd retool-mcp-lab
  • Start a Claude Code session:
claude

Claude Code terminal session started

  • Add the Retool MCP Server. Replace <your-retool-instance> with your organization's subdomain:
> claude mcp add --transport http retool https://<your-retool-instance>/mcp

MCP server add command

  • Exit the terminal session, then open a new terminal, navigate back to your working directory, and run Claude Code again.

The Retool MCP Server works with other CodeGen tools beyond Claude Code. See the Retool MCP documentation for configuration examples.

Authenticate with Retool​

  • When prompted, authenticate into Retool.

Retool authentication prompt

  • Select Authorize on the OAuth form to allow Claude Code to perform actions in Retool on your behalf.

OAuth authorization form

Verify the MCP Connection​

  • Run the following slash command to list configured MCP servers:
> /mcp

/mcp command output

  • Confirm that the Retool MCP server appears in the list with a connected status before continuing.

Retool MCP server connected

Prompt an Application​

Explore Available Resources​

  • Start by asking Claude Code what Retool resources are available:
> Can you share what Retool Resources are available to build apps from?

Available Retool resources listed

The response will list configured resources, including retool_db.

Generate the Application​

  • Prompt Claude Code to create a read-only application with a search bar:
> Create a Retool Application that uses retool_db resource and the table electronic_products. 
The application is read-only and provides a search bar to easily filter the content.

App generation prompt

  • Claude Code will execute multiple tools to construct the app.

HITL permission prompt

  • When Human in the Loop (HITL) permission prompts appear, select Yes for each.

HITL Yes selection example

  • When app generation completes, Claude Code outputs a preview link.

App generation complete with preview link

  • Copy the URL under Access your app here: and open it in your browser.

Generated app in browser

Update the Application for Accessibility​

  • Prompt Claude Code to update the app's styling to meet WCAG 2.1 accessibility standards:
> Let's update the look and feel to follow WCAG 2.1 standards to make it more accessible. Leverage https://www.w3.org/WAI/standards-guidelines/wcag/

Accessibility update prompt

  • Once the update completes, reload the preview URL to see the revised application.

Updated accessible app

Summary​

This lab demonstrates how the Retool MCP Server integrates with a third-party MCP host (Claude Code) to create and modify Retool React applications through natural language prompts — without opening the Retool editor directly.