Skip to main content
Noah gives you a live preview of your app and built-in tools to debug issues — all without leaving the platform. You can see your app in real time, catch errors as they happen, and fix them with a single click.
Screenshot showing Noah's full IDE with chat panel, file explorer, code editor, Code Diff and Rollback buttons
The workspace includes:
  1. Code Editor — View and edit your code directly. Highlighted sections show recent changes. Click Ask Noah on any line to get AI help on specific code.
  2. File Explorer — Browse your project’s full file structure
  3. Chat Panel — See Noah’s edits, use Code Diff to review changes and Rollback to revert. Quick actions like Add Features and Add Footer are available at the bottom.

​
Live Preview

When you build a web app, Noah shows a live preview so you can see every change instantly. The preview updates in real time as you iterate with prompts or edit code directly. From the preview, you can:
  • See your full web app running in the browser
  • Interact with buttons, forms, and navigation
  • Test wallet connections and blockchain interactions
  • View your app at different screen sizes

​
Console & Error Detection

Noah includes a Console panel at the bottom of the preview that captures runtime errors and logs. When something goes wrong, Noah detects it automatically.
Screenshot showing Noah's error dialog with Open Console and Fix with AI buttons

​
Cannot Preview Your Code?

If an error occurs while trying to run the preview, Noah shows a clear error dialog with two options:
  • Open Console — view the full error details and logs to understand what went wrong
  • Fix with AI — let Noah automatically diagnose and fix the issue for you
Click Fix with AI to have Noah analyze the error, identify the root cause, and apply a fix — all in one step.

​
What Happens When You Click Fix with AI

When you click Fix with AI, the error is automatically sent to the chat. Noah reads the error, identifies the root cause, edits the affected file, and confirms the fix — all without any manual input.
Screenshot showing Noah receiving an error in chat, making an edit to src/pages/Index.tsx, and confirming the fix
In this example:
  1. The error is sent to chat — “The code returns the following error: Compilation error occurred…”
  2. Noah thinks and identifies the issue in src/pages/Index.tsx
  3. Makes 1 edit — “Fixed. Reverted the syntax error back to valid code.”
  4. Runs Checking for errors to verify the fix worked

​
What You Can Debug

Noah’s preview and console tools help you catch and fix common issues:
  • Build errors — syntax issues, missing imports, or broken dependencies
  • Runtime errors — crashes, undefined variables, or failed API calls
  • Smart contract integration issues — wallet connection problems, transaction failures, or incorrect program calls
  • UI/UX issues — layout problems, broken links, or missing components

​
How Debugging Works

1

Build or Edit Your App

Describe what you want or make changes in the code editor. Noah updates the preview in real time.
2

Check the Preview

Interact with your app in the live preview to verify behavior.
3

Spot an Error

If something breaks, the Console panel or error dialog will alert you with details.
4

Fix with AI or Manually

Click Fix with AI to let Noah handle it, or open the Console to debug manually. You can also describe the issue in the chat.

​
Code Diff & Rollback

After Noah makes changes, you can:
  • Code Diff — review exactly what was changed before accepting
  • Rollback — revert to the previous version if the change didn’t work as expected
These options appear at the bottom of the chat after Noah applies edits.

​
Best Practices

Check the preview after each major change. Catching issues early is faster than debugging a chain of changes.
For common errors like missing imports or typos, Fix with AI usually resolves the issue instantly.
When Fix with AI doesn’t resolve the issue, open the Console to see the full error stack trace. Share the error details with Noah in the chat for a targeted fix.
Always connect to Devnet when testing wallet and contract interactions. This prevents real token loss while debugging.

​
FAQ

Yes. The preview updates in real time as you make changes through prompts or the code editor.
It analyzes the error from the Console, identifies the root cause, and applies a fix to your code automatically.
Yes. You can connect a wallet (like Phantom) in the preview and test blockchain interactions directly.
Yes. After Noah makes edits, you’ll see a Rollback option to revert to the previous version.