Skip to main content

MCP Generated App

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

Requirements​

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

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

MCP Setup​

Install Codex MacOS App​

Review and follow the Codex Quickstart to install the Codex MacOS app on your machine.

Configure the MCP Server​

Within the Codex App, select Settings > Settings > Integrations > MCP Servers > + Add Server

Codex MCP Server

  • Specify the following configuration:

    • Name = Specify Server Name and set to Streamable HTTP
    • URL = https://<Retool server org>/mcp

  • Select Save

Codex MCP Server Settings

  • The server will appear under servers. Select Authenticate to initiate the OAuth 2.0 process.

Authenticate with MCP Server

  • Select Authorize for mcp:read, mcp:write, mcp:admin.

Authorize scopes

  • Under MCP Servers, the server will no longer show an Authenticate.

Completed MCP Server

Prompt an Application​

Now that you have the MCP Server established, you can create a project.

Explore Available Resources​

Make sure that you are back at the prompt interface and out of the Settings page.

Return to Project Screen

  • Select the folder+ icon across from Projects.
  • Select Start from scratch

Create project

  • Specify a project name and select Save

Save project

  • Enter the following prompt:
> 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.

Prompt app creation

Generate the Application​

The next phase is to allow Codex to interact with Retool and generate the application based on the prompt.

  • Enter the prompt and you should see Codex leverage Retool Agent Tools

App Generation

  • When the generation process is complete, Codex will share a deployed link, that you can select and view the app.

App Generation completion

  • Select the Retool App link and preview it in the Retool App IDE.

Preview app

Update the Application for Accessibility​

Prompt Codex to update the app's styling to meet WCAG 2.1 accessibility standards. Two prompts are used to adjust the app:

> Let's start new changes to the Electronic Product Browser app. Create a new thread 
and use the following prompt: "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/"
> Can we change the Active column buttons to blue from green to help with users that are color-blind.

The following two images show both prompts and the agent feedback.

Modify app prompt

Adjust color prompt

The resulting application with changes is displayed below in the Retool Preview Panel.

Second app preview

Walkthrough​

The following video performs the previous actions, creates an app and then edits the app with a second prompt.

Summary​

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