Set up React

Use the React SDK to call your APIs, start background work, and add conversations to an ordinary React app. The Vortexify app starter already includes it. In an existing React 18+ app, install the published package:

npm install --save-exact @vortexify/react@0.1.1

The app starter targets 0.1.1. Existing apps should update their dependency and lockfile to receive HTTP errors with the server's message; see error handling.

Put the provider around the appCopy Anchor Link

import {
  VortexifyProvider, createVortexifyConfig, useVortexify,
} from "@vortexify/react";

const config = createVortexifyConfig(import.meta.env);

export function Root() {
  return <VortexifyProvider config={config}><App /></VortexifyProvider>;
}

function App() {
  const { ready } = useVortexify();
  return <main>{ready ? "Connected to the app runtime" : "Connecting…"}</main>;
}

Keep configuration stable across renders, as in the module-level constant above. The provider shares the authenticated client with components below it.

useVortexify() returns four things:

Each hook call owns its own conversation-manager state. Keep the component that owns your assistant panel mounted across page changes if the conversation should remain selected. Pass its manager or rendered panel down rather than creating unrelated managers in every screen.

Run locally through the CLICopy Anchor Link

From the app directory, install dependencies and run vortexify dev. Open the URL it prints. Local React edits update through the development server; backend requests reach committed platform code through the CLI proxy.

Save backend changes and prepare their inputs before trying the interface. The configuration guide explains local transport, hosted authentication, and preview versus deployed execution.

Add one interaction at a timeCopy Anchor Link

Start with an API call from a form. Use a transform when the interaction starts background processing. Add conversations and browser actions when users need an assistant, and analysis charts when it should visualize query results.

A deployed app can provide a logout button with <button onClick={logout}>Log out</button>. This function asks the hosted shell to end the session and return to login. Render it only in deployed hosted mode; CLI development and preview do not support that logout operation.

In the platform, open the app's Preview view to build and inspect a committed app. Its Code view lets you inspect working source or choose a read-only saved version. Use publishing when the app should use production resources.