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

# Quickstart

> Send your first message, generate an artifact, and save it as a reusable agent — all in under 10 minutes.

## Watch the walkthrough

<Frame caption="Full quickstart walkthrough — from first message to saving an agent">
  <video autoPlay muted loop playsInline className="w-full aspect-video rounded-xl">
    <source src="https://mintlify.s3.us-west-1.amazonaws.com/creaoagent/videos/quickstart.mp4" type="video/mp4" />
  </video>
</Frame>

## Before you start

You need a CREAO account. If you don't have one yet, sign up at [agent.creao.ai](https://agent.creao.ai).

## Your first session

<Steps>
  <Step title="Start chatting">
    After signing in, you land on the chat page. The sidebar shows navigation (Feed, Agents, Workspaces, Files), your recent threads, and the **Agent Brain** section where you can manage skills and connectors.

    You can optionally select or create a workspace from the sidebar to organize your conversations, but it's not required to get started.

    <Frame caption="The chat page with the sidebar, suggestion pills, and input bar">
      <img src="https://mintcdn.com/creaoagent/L7jvWhXluKR0aaCS/images/chat-empty-state.png?fit=max&auto=format&n=L7jvWhXluKR0aaCS&q=85&s=0523780c5f13bb4693b558a72c0dfb54" alt="Chat page showing the sidebar navigation, greeting, suggestion pills, and chat input" width="1280" height="800" data-path="images/chat-empty-state.png" />
    </Frame>
  </Step>

  <Step title="Send your first message">
    Type a request in the chat input at the bottom of the screen. For example:

    ```
    Create a simple HTML todo app with add, complete, and delete functionality
    ```

    Press **Enter** or click the send button. The agent starts streaming its response in real time.

    <Frame caption="A message typed in the chat input, ready to send">
      <img src="https://mintcdn.com/creaoagent/L7jvWhXluKR0aaCS/images/quickstart-type-message.png?fit=max&auto=format&n=L7jvWhXluKR0aaCS&q=85&s=8bbd979a8839d4865fb8ab54d52e82ac" alt="Chat page with a todo app request typed in the input bar" width="1280" height="800" data-path="images/quickstart-type-message.png" />
    </Frame>

    <Tip>
      You can also click one of the suggestion pills — **Automate**, **Write**, **Analyze**, **Build**, or **Strategize** — to start with a guided prompt.
    </Tip>
  </Step>

  <Step title="Watch the agent work">
    The agent executes your request step by step. You'll see:

    * **Thinking indicator** — animated dots while the agent processes your request
    * **Status updates** — messages like "Starting sandbox..." or "Running agent..."
    * **Tool execution** — each tool call and its output stream in real time
    * **Artifact panel** — generated files (HTML, SVG, PDF) open in an interactive preview on the right side

    <Frame caption="The agent processing your request with the Running agent indicator">
      <img src="https://mintcdn.com/creaoagent/8ioBcVZ5qizmcA0O/images/quickstart-agent-thinking.png?fit=max&auto=format&n=8ioBcVZ5qizmcA0O&q=85&s=d323f11b4c0ddde113a200a626497226" alt="Chat showing user message and the agent's Running agent thinking indicator" width="1280" height="800" data-path="images/quickstart-agent-thinking.png" />
    </Frame>

    <Tip>
      You can click the **Stop** button (red square) at any time to interrupt the agent.
    </Tip>
  </Step>

  <Step title="Interact with the artifact">
    When the agent generates an HTML file, it opens automatically in the artifact preview panel. The result appears as a split view — chat on the left, interactive preview on the right.

    <Frame caption="The completed response with an interactive todo app in the artifact preview panel">
      <img src="https://mintcdn.com/creaoagent/8ioBcVZ5qizmcA0O/images/quickstart-completed-artifact.png?fit=max&auto=format&n=8ioBcVZ5qizmcA0O&q=85&s=09b819c44c6b9af3ae55979ed31582c2" alt="Split view with chat response on the left and a rendered todo app preview on the right" width="1280" height="800" data-path="images/quickstart-completed-artifact.png" />
    </Frame>

    The preview is fully interactive — you can click buttons, fill forms, check boxes, and test the app directly in the panel.

    <Frame caption="Interacting with the generated todo app — adding tasks, checking them off">
      <img src="https://mintcdn.com/creaoagent/8ioBcVZ5qizmcA0O/images/quickstart-artifact-interactive.png?fit=max&auto=format&n=8ioBcVZ5qizmcA0O&q=85&s=4c59d752ed2e0342badef5962a576219" alt="Todo app preview with Buy groceries checked off and Read a book being typed" width="1280" height="800" data-path="images/quickstart-artifact-interactive.png" />
    </Frame>

    You can also switch to **Code** view to see the source:

    <Frame caption="The Code view showing syntax-highlighted HTML and JavaScript source">
      <img src="https://mintcdn.com/creaoagent/8ioBcVZ5qizmcA0O/images/quickstart-code-view.png?fit=max&auto=format&n=8ioBcVZ5qizmcA0O&q=85&s=3db1d96219d05dfcc0281f72b70ced5f" alt="Artifact panel in Code view showing the todo app's JavaScript source with line numbers" width="1280" height="800" data-path="images/quickstart-code-view.png" />
    </Frame>

    Other actions available in the panel header:

    * **Download** — save the file locally
    * **Copy** — grab the source code to clipboard
    * **Share** — generate a shareable link to the conversation
    * **Close** — dismiss the panel
  </Step>

  <Step title="Continue the conversation">
    Send follow-up messages to refine the result:

    ```
    Add a dark mode toggle and localStorage persistence
    ```

    The agent builds on the previous context and generates an updated artifact. You can also queue follow-up messages while the agent is still working — they'll be processed in order.
  </Step>

  <Step title="Save as an agent (optional)">
    When you're happy with the result, click **Create Agent** in the chat input bar. The super agent extracts the workflow into a reusable agent with:

    * A structured input form
    * The skill that powers execution
    * Version history for every iteration

    Your team can now run this agent repeatedly with different inputs from the **Agents** page in the sidebar.
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Chat interface" icon="message" href="/features/chat">
    Learn about file uploads, @ mentions, voice input, message queue, and more.
  </Card>

  <Card title="Files" icon="file-code" href="/features/files">
    Browse, organize, and download uploaded and agent-generated files.
  </Card>

  <Card title="Skills and Connectors" icon="bolt" href="/features/skills-and-connectors">
    Explore built-in capabilities and how to connect external services.
  </Card>

  <Card title="Agents" icon="blocks" href="/features/agents">
    Deep dive into creating, versioning, and sharing agents.
  </Card>
</CardGroup>
