New React App Builder - Claude Code (via VS Code) Workflow

[nickroz1]

I’ve been using Claude Code in VS Code to edit my classic apps’ code, source control files through Git and then manually copy/paste the edits to the Retool code editor to make the changes. We’re only on the Team plan, so no Enterprise Git syncing. Wasn’t ideal, but it worked. Still had to manually edit GUI changes though...

I’m testing this workflow with the new React app builder and wanted to get some input to make sure I’m doing this correctly. I’ve got a Claude Max plan, so I want to keep the majority of compute in Claude Code and then push changes to Retool’s MCP to reduce Retool AI credit usage.

1. Convert my Classic apps to React apps in Retool
2. Have Claude Code pull files from Retool and setup local directories for Git repo syncing
3. Feed Claude Code screenshots of the new App Builder and instruct him to perform changes locally
4. Claude pushes to Retool MCP via retool_submit_prepared_import
   1. This seems to keep the brain power done in Claude Code and then the importing task (minimal tokens) is the only thing that uses Retool’s AI Credits
   2. Claude Code was initially trying to push changes via thread_stream tools but it kept kicking back this error: "This model is not available for your plan." statusCode: 402, provider: anthropic, errorOrigin: retool. Eventually it found ‘prepared_import’
5. Get changes to populate in Retool’s App Builder

   1. After I push the import via VS Code, Claude says everything is updated but nothing automatically happens in the Retool App Builder.

   2. I have to click Edit on my app and the chat window has this error prepopulated, with a link towards the bottom to ‘continue import task’ or similar.

      

   3. Once it finishes the import, changes are displayed in the Preview window and you’re able to Publish from there.

6. Commit changes to Git
7. Repeat