# Build your interface

Source: /docs/building/build-your-interface.md

Build ordinary React components for the work someone needs to do: inspect records, enter a value, review a recommendation, or submit a change. Use the Vortexify React SDK to call your backend and integrate assistants.

Your coding agent edits and runs the app locally. The platform provides authenticated execution and the hosted app after publishing, and lets you inspect the backend data and runs behind the screen.

## Start with the authenticated development flow [#start-with-the-authenticated-development-flow]

The app starter sets up the SDK provider and configuration. Keep that setup while adapting `src/App.tsx`:

```sh
cd apps/dashboard
npm install
vortexify dev
```

Open the development URL printed by Vortexify. The CLI supplies a same-origin proxy for local backend access, keeping credentials outside frontend environment files. Starting Vite alone does not establish that proxy. See [React setup](/docs/reference/react/setup) for the provider contract.

Inside a component under the provider:

```tsx
const { client, ready } = useVortexify();
```

Disable backend actions until ready, and render loading and error states. Development readiness means the SDK is configured; verify a real request to confirm that login, proxy access, and the backend are working.

## Match the interaction to the backend operation [#match-the-interaction-to-the-backend-operation]

For a request with an immediate response, use `client.runApi` with the registered resource name and declared scalar inputs:

```ts
const response = await client.runApi("normalize", { value: "Hello" });
```

The SDK returns the API value directly. Keep database access, secret resolution, and business logic in the backend. Passing a resource name does not create it; commit and prepare the API before testing the screen.

For background work, show progress instead of treating job submission as completion:

```ts
const { job_id } = await client.startTransform("refresh_orders", {});
const job = await client.pollTransform("refresh_orders", job_id);
if (job.status !== "success") throw new Error(`Refresh ${job.status}`);
const result = await client.runApi("customer_orders", { customer_id: "123" });
```

Keep the job ID so the interface can inspect the same work. Polling waits for a terminal snapshot; check success explicitly, then fetch the data the screen displays. A browser timeout or navigation does not cancel backend work. The [backend call reference](/docs/reference/react/calling-your-backend) covers polling and request limits.

## Understand what local development is using [#understand-what-local-development-is-using]

Frontend edits update through the development server. Backend execution uses saved source, so commit Python changes and rebuild the affected API runtime. Run required transforms or syncs before expecting their new output in the app.

The starter uses preview execution for local development. Preview APIs use committed code with a prepared runtime; published apps use deployed resources. Previous successful output can still be readable while a newer preview is stale or has failed. Inspect versions and run results when the screen shows an unexpected value.

Use the platform alongside the local app: open the API Playground History to inspect the matching request, or the transform Tables view to inspect the selected output. The app resource's Preview tab builds a hosted preview and reports whether it is stale. This helps distinguish a rendering problem from a missing upstream result or a request failure. See [preview configuration](/docs/reference/react/configuration#preview-lifecycle) for output selection.

> **Platform screenshot placeholder:** A local app beside the platform's matching API result or transform output, showing the same record and value in both places.

## Add conversations or publish [#add-conversations-or-publish]

Use the conversation manager when the screen needs an assistant. Send small, relevant snapshots of visible data and register browser actions deliberately; see [add an assistant](/docs/building/add-an-assistant).

When publishing, preserve the SDK's authentication flow. The hosted app receives runtime authentication from its platform parent; a standalone production page remains unready. A successful frontend build checks compilation, so also try the authenticated hosted app and the interactions it needs.

Next: [Add an assistant](/docs/building/add-an-assistant) or [publish your app](/docs/building/publish-your-app).