> ## Documentation Index
> Fetch the complete documentation index at: https://docs.revolte.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Build an App with Interactive Chat

> Describe an application, refine its requirements, review generated code, commit the result, and validate it with Revolte Interactive Chat.

<Steps>
  <Step title="Start a New Interactive Chat">
    Open Revolte, start a new chat, and confirm that **Interactive** mode is selected.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/chat-ui.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=6c70cf1f0a75b54cbcbb7e3af8975162" width="600" data-path="image-v2/agent/dev-agent/chat/chat-ui.png" />
    </Frame>
  </Step>

  <Step title="Describe What You Want to Build">
    In the prompt box, describe the application and list its essential features. For example: “Build a responsive chat application with conversation search, message timestamps, and a typing indicator.”

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/chat-prompt.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=f3b36643a085ad4a09f7f2b696ad3577" width="600" data-path="image-v2/agent/dev-agent/chat/chat-prompt.png" />
    </Frame>
  </Step>

  <Step title="Choose an AI Model">
    Open the model selector and choose the model Revolte should use for the task.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/select-model.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=c14330a170ccec64d5d828d117443449" width="600" data-path="image-v2/agent/dev-agent/chat/select-model.png" />
    </Frame>
  </Step>

  <Step title="Choose a Sandbox Size">
    Choose the CPU and memory size for the sandbox. Use a larger sandbox for workloads with heavier builds, dependency installation, or memory-intensive tests.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/select-sandbox.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=c45de430117e35677de496df9a874d8d" width="600" data-path="image-v2/agent/dev-agent/chat/select-sandbox.png" />
    </Frame>

    Revolte builds and runs the application in an isolated environment, keeping agent activity separate from your local machine and shared environments.
  </Step>

  <Step title="Submit the Request and Wait for Setup">
    Submit your request. Revolte provisions the sandbox and begins working on the application. Wait until the **Sandbox Environment** status shows **Active**.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/sandbox-provision.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=bf12b9965b4645e6c6f65b89e6a3cc05" width="600" data-path="image-v2/agent/dev-agent/chat/sandbox-provision.png" />
    </Frame>
  </Step>

  <Step title="Answer Clarifying Questions">
    If Revolte asks a clarifying question, select one of the suggested answers or enter your own response. Continue until the requirements reflect the result you want.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/addition-requirements.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=1003dfd3893a015b624cc86e27b2e405" width="600" data-path="image-v2/agent/dev-agent/chat/addition-requirements.png" />
    </Frame>

    Revolte asks focused questions when a requirement is ambiguous, reducing assumptions before more code is changed.
  </Step>

  <Step title="Review the Generated Code">
    Open the **Code** panel to inspect the files Revolte created or modified. Review the file tree and code, and make any necessary edits directly in the sandbox.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/sandbox-view.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=d927378ff90f491ca61af546eb714aec" width="600" data-path="image-v2/agent/dev-agent/chat/sandbox-view.png" />
    </Frame>
  </Step>

  <Step title="Inspect the Code Diff">
    Open the **Commit** panel, expand a file under **File changes**, and use the **Inline** or **Split** view to inspect every addition and deletion before committing.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/code-diff.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=f022e208b62b99bacbe9777776b31bb4" width="600" data-path="image-v2/agent/dev-agent/chat/code-diff.png" />
    </Frame>
  </Step>

  <Step title="Review and Commit the Changes">
    Open the **Commit** panel and review the changed files. Enter a clear commit message, then select **Commit and Push** to send the changes to the connected repository.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/github-config.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=d3f8b8e1a0ed6437016c4dd5d1bee909" width="600" data-path="image-v2/agent/dev-agent/chat/github-config.png" />
    </Frame>
  </Step>

  <Step title="Continue in the Secure Built-In VS Code Workspace">
    After committing the change or reviewing the resulting pull request, open the secure, sandbox-backed VS Code workspace. Use the familiar Explorer, Source Control, editor, and terminal tools to inspect or update files without leaving Revolte.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/secure-vscode.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=dd4ace84a1b0f744fa60f97c3d9fe001" width="600" data-path="image-v2/agent/dev-agent/chat/secure-vscode.png" />
    </Frame>
  </Step>

  <Step title="Validate the Result in Live Preview">
    Open **Live Preview** and interact with the running application in the sandbox. As you edit the code, hot reload refreshes the preview so you can validate changes immediately.

    <Frame>
      <img src="https://mintcdn.com/poddle-54594c3d/rsn4aNVKS_FvNRWy/image-v2/agent/dev-agent/chat/live-preview.png?fit=max&auto=format&n=rsn4aNVKS_FvNRWy&q=85&s=f82bcdff203f7b571a1af90f67319b58" width="600" data-path="image-v2/agent/dev-agent/chat/live-preview.png" />
    </Frame>
  </Step>
</Steps>

## Next steps

<Card title="Deploy from Interactive Chat" icon="rocket" href="/deploy-operate/from-interactive-chat">
  Move your committed Chat work into a managed Preview environment and validate the deployed application.
</Card>

* [Learn more about AI Chat](/get-started/ai-chat)
* [Understand sandbox environments](/get-started/sandboxes)
* [Build from a Prompt](/workflows/build-from-prompt)