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

# Plan & Build modes

> Work with Clark to create a detailed prompt in Plan mode, then execute in Build mode

export const Alert = ({type, title, children}) => {
  const getIcon = () => {
    switch (type) {
      case 'info':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      case 'success':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm4.293 6.293L9 11.586 5.707 8.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414l4 4c.391.391 1.024.391 1.414 0l6-6c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%230CC26D'/%3E%3C/svg%3E";
      case 'warning':
        return "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbDpzcGFjZT0ncHJlc2VydmUnIHdpZHRoPScxMDgwJyBoZWlnaHQ9JzEwODAnPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3RyYW5zcGFyZW50Jy8+PHBhdGggZD0nTTEzLjc5NCAxMC43NSA4LjMgMS4yNWExLjUgMS41IDAgMCAwLTIuNiAwbC01LjQ5NCA5LjVBMS40OTQgMS40OTQgMCAwIDAgMS41IDEzaDExYTEuNDkzIDEuNDkzIDAgMCAwIDEuMjk0LTIuMjVNNi41IDUuNWEuNS41IDAgMCAxIDEgMFY4YS41LjUgMCAwIDEtMSAwek03IDExYS43NS43NSAwIDEgMSAwLTEuNS43NS43NSAwIDAgMSAwIDEuNScgc3R5bGU9J3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7ZmlsbDojZmY5ZjM1O2ZpbGwtcnVsZTpub256ZXJvO29wYWNpdHk6MScgdHJhbnNmb3JtPSd0cmFuc2xhdGUoLjAyIDE5LjMwNSlzY2FsZSg3Ny4xNCknLz48L3N2Zz4=";
      case 'danger':
        return "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm5.707 4.293L10 9.586 4.293 4.293c-.391-.391-1.024-.391-1.414 0s-.391 1.024 0 1.414L8.586 11l-5.707 5.293c-.391.391-.391 1.024 0 1.414s1.024.391 1.414 0L10 12.414l5.707 5.293c.391.391 1.024.391 1.414 0s.391-1.024 0-1.414L11.414 11l5.707-5.293c.391-.391.391-1.024 0-1.414s-1.024-.391-1.414 0z' fill='%23F45252'/%3E%3C/svg%3E";
      case 'note':
        return "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zm0 15c-.552 0-1-.448-1-1s.448-1 1-1 1 .448 1 1-.448 1-1 1zm1-3H9V6h2v6z' fill='%230099FF'/%3E%3C/svg%3E";
      default:
        return "";
    }
  };
  return <div className={`alert alert--${type}`}>
      <div className="alert-icon" style={{
    backgroundImage: `url("${getIcon()}")`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center center',
    backgroundSize: '20px',
    width: '24px',
    height: '24px',
    position: 'absolute',
    left: '16px',
    top: '16px'
  }} />
      <div className="alert-content">
        {title && <div className="alert-title">{title}</div>}
        <div className="alert-body">{children}</div>
      </div>
    </div>;
};

Prompting supports two modes: **Plan** and **Build**.

Plan mode is especially helpful when you're getting started—you can explore integration data and structure, clarify requirements, review strategy, and refine the prompt before building. Once you're satisfied with the plan, switch to Build mode, where Clark executes the prompt to create or update your application.

## Plan mode

You can interact with Clark in **Plan** mode to craft a detailed prompt before building. In this mode, Clark leverages read-only tools and will not make any changes to your application. Below are common actions Clark takes in Plan mode.

### Inspecting integration metadata and running one-off queries

Clark checks integration metadata such as REST API specs and SQL table schemas to determine what resources to query. Similarly, Clark can run one-off queries to those data sources to read sample data and better understand its structure for rendering the UI.

![Clark runs one-off queries in plan mode](https://superblocks-docs.s3.us-east-2.amazonaws.com/assets/plan_query.png)

### Prompting for clarification around key features and design choices

Clark asks questions to understand the application's required functionality, design, layout, and more. You can answer by selecting one of the multiple choice options or clarifying in the main chat.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/plan_question.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=e0977f5ddb950699dbc9e50012a23b80" alt="Clark asks clarifying questions in plan mode" width="2364" height="1820" data-path="images/building-with-clark/plan_question.png" />

### Generating the plan

Once Clark fully understands the data, features, and implementation strategy, a plan is generated. You can reply back to edit the plan or click **Build it** to switch modes and have Clark start creating the application.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/final_plan.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=c23aca9a272f5ec4e23e204a748a05b4" alt="Clark generated detailed application plan" width="1788" height="1822" data-path="images/building-with-clark/final_plan.png" />

## Build mode

In **Build** mode, Clark gets to work creating the application. You can use Build mode on its own without any planning, which is ideal for smaller targeted edits or detailed prompts you've prepared ahead of time.

<div style={{ width: '90%' }}>
  <img src="https://mintcdn.com/superblocks/bKXJZ0WLJtmaDm_J/images/building-with-clark/build_start.png?fit=max&auto=format&n=bKXJZ0WLJtmaDm_J&q=85&s=6aa58abc9bcdc9237bfaf63498576b31" alt="Clark in Build mode" width="1326" height="822" data-path="images/building-with-clark/build_start.png" />
</div>

In this mode, Clark uses various build tools to perform operations including:

* Creating pages and component files
* Writing and compiling backend APIs
* Installing libraries

You can expand these tool calls in the chat to inspect details around Clark's thought process and the generated code.

<div style={{ width: '80%' }}>
  <img src="https://mintcdn.com/superblocks/bKXJZ0WLJtmaDm_J/images/building-with-clark/build_create_files2.png?fit=max&auto=format&n=bKXJZ0WLJtmaDm_J&q=85&s=75789de4f4fe156c4cf77f0a945fc681" alt="Clark creating files" width="1128" height="1408" data-path="images/building-with-clark/build_create_files2.png" />
</div>

### Testing and debugging

In the same way Clark acts like a human engineer in Plan mode by running one-off queries and checking API responses, Clark performs similar actions in Build mode to iteratively test, debug, and edit features as they're built. This includes:

* Testing APIs
* Checking code for issues
* Checking for runtime errors and inspecting console logs
* Capturing screenshots to confirm UI renders as expected

<div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
  <div style={{ flex: '1' }}>
    <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/build_test_apis.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=663be7d6ea2e0fb57fb35950915ad0e7" alt="Clark testing APIs" width="2188" height="1832" data-path="images/building-with-clark/build_test_apis.png" />

    <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/build_test_apis_2.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=b2488d227c8e64c48aa7f8f9d6cd6865" alt="Clark testing APIs" width="2018" height="1404" data-path="images/building-with-clark/build_test_apis_2.png" />
  </div>

  <div style={{ flex: '1' }}>
    <img src="https://mintcdn.com/superblocks/bKXJZ0WLJtmaDm_J/images/building-with-clark/build_debugging.png?fit=max&auto=format&n=bKXJZ0WLJtmaDm_J&q=85&s=5f4c47befb285c6690200a98765ae2a3" alt="Clark in Build mode debugging" width="840" height="1348" data-path="images/building-with-clark/build_debugging.png" />
  </div>
</div>

Once all requirements are fulfilled and checks pass, Clark finalizes the app, making it available for you to interact with and continue building.

![Clark completes first build](https://superblocks-docs.s3.us-east-2.amazonaws.com/assets/build_final_app.png)