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

# Build your first app

> Build a read-only opportunity list, make a change, and open the published app.

export const ExamplePrompt = ({text}) => <Prompt description={text}>{text}</Prompt>;

Open [Wisty](https://app.wisty.ai) to build a list of open opportunities closing this quarter. You'll add a filter, refine the result, and publish an app you can open outside the editor.

<Frame caption="An opportunity list built from a prompt, shown in Preview. Your layout may differ.">
  <img src="https://mintcdn.com/wisty/p0KgmgXmvqDkXTFQ/images/opportunity-list.png?fit=max&auto=format&n=p0KgmgXmvqDkXTFQ&q=85&s=13ca7afc5007842e1f2b87799f6124ab" alt="Wisty project in Preview showing an Opportunities list with a search box, stage, close date, and amount filters, and a sortable table of opportunities." width="1756" height="1598" data-path="images/opportunity-list.png" />
</Frame>

## Before you start

You'll need a Wisty account, a connected Salesforce org, and credits for generation. Use an org where you can read Opportunity records. If you haven't connected one, follow [Connect Salesforce](/docs/getting-started/connect-salesforce) first.

This walkthrough uses the Wisty web app on a desktop browser. Prefer an existing layout? [Start from a template](/docs/getting-started/templates) instead.

<Steps>
  <Step title="Choose your org and style">
    On **Home**, check the org selected below the message box. If you've connected more than one, choose the org you want to build against.

    Open the design selector and choose **Salesforce** for a Salesforce-style interface or **Adaptive** for a design based on your prompt. This choice stays with the project.
  </Step>

  <Step title="Describe the opportunity list">
    Click the message box, type `@Opportunity`, and select **Opportunity** from the results. This inserts an object chip linked to your org's metadata.

    <Frame caption="A selected object appears as a chip in your message. This example uses Opportunity.">
      <img src="https://mintcdn.com/wisty/p0KgmgXmvqDkXTFQ/images/object-mention.png?fit=max&auto=format&n=p0KgmgXmvqDkXTFQ&q=85&s=f52478b4591f96241b267ff314bd4a8a" alt="Home message box with an Opportunity object chip, Salesforce design style, and ACME Prod selected." width="1440" height="320" data-path="images/object-mention.png" />
    </Frame>

    After the chip, paste this prompt and send the message:

    <ExamplePrompt text="Build a list of open opportunities closing this quarter. Show Opportunity Name, Account, Stage, Amount, and Close Date. Add a stage filter and sort by Close Date. Keep this app read-only." />

    Wisty creates a project and opens the editor. If it asks a clarifying question, answer it to continue.
  </Step>

  <Step title="Try the preview">
    Wait for the build to finish, then use the list in **Preview**. Check the columns and try the stage filter.

    The org selector in the header above the preview shows the connection in use. Check that it names the org you intended.

    The preview reads your live Salesforce data through your connection. An empty list can be correct if you have no matching opportunities. To widen the example, ask: “Show all open opportunities, regardless of close date.”

    Your layout may differ from the example. Check that it does the job you asked for.
  </Step>

  <Step title="Make one change">
    Send this follow-up in chat:

    <ExamplePrompt text="Add a search box that filters the list by Opportunity Name." />

    When the change is ready, test the search in the preview. Saved versions are available through **Show history** above chat.

    <Tip>
      Generation uses credits. For small text or styling changes, make a [visual edit without AI](/docs/building/editing-without-ai). Those cost no credits.
    </Tip>
  </Step>

  <Step title="Publish the app">
    Click **Publish** in the editor header. Review the sharing settings and allowed Salesforce access, then click **Publish app**.

    Wait for publishing to finish. Your project remains editable; the published app uses the version you just published.
  </Step>

  <Step title="Open the result">
    Click **View App** beside **Publish**. You'll see the published opportunity list outside the editor.

    Later edits stay in the project until you [publish changes](/docs/publishing/publish). To give other people access, follow [Share and open apps](/docs/publishing/share-apps).
  </Step>
</Steps>

## Next steps

<Columns cols={3}>
  <Card title="Share and open apps" icon="layout-grid" href="/docs/publishing/share-apps">
    Choose who can open the app and how they get to it.
  </Card>

  <Card title="Add an app to Salesforce" icon="panels-top-left" href="/docs/publishing/embed-in-salesforce">
    Place it on a Lightning page or in the utility bar.
  </Card>

  <Card title="Describe what you need" icon="message-square" href="/docs/building/describe-what-you-need">
    More example prompts for your next project.
  </Card>
</Columns>

If a connection, build, or preview gets stuck, use [Fix common problems](/docs/help/troubleshooting).