Installation

This guide installs the default Hyperflow UI in a Vite React application. You need two values from the team that provides your Hyperflow runtime:

• apiUrl — the HTTP API URL
• wsUrl — the WebSocket URL

They can be absolute URLs or same-origin routes such as /api/v1 and /api/v1/ws. Runtime setup, authentication, and routing are already handled by the platform that supplied the URLs.

This guide is for Vite React applications. For Next.js, React Router, or another host, read the framework guides before continuing.

1. Install the packages

Install the default Chakra UI skin and its peer dependencies.

pnpm add @hyperflow/chakra-ui @chakra-ui/react @emotion/react react-router@^7
pnpm add -D @hyperflow/vite

Your application must use React 19.2 or later. @hyperflow/chakra-ui includes the Hyperflow React and client layers.

2. Add the Vite plugin

Add hyperflowVitePlugin() before the React plugin. It prepares the WebSocket transport.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { hyperflowVitePlugin } from '@hyperflow/vite'

export default defineConfig({
  plugins: [hyperflowVitePlugin(), react()],
})

3. Render Hyperflow UI

Render HyperflowApp at the root of your application and pass the URLs you received.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { HyperflowApp } from '@hyperflow/chakra-ui'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <HyperflowApp
      config={{
        apiUrl: 'https://runtime.example.com/api/v1',
        wsUrl: 'wss://runtime.example.com/api/v1/ws',
      }}
    />
  </StrictMode>,
)

Replace the example URLs with the values provided for your environment. For a same-origin setup, the configuration is typically { apiUrl: '/api/v1', wsUrl: '/api/v1/ws' }.

HyperflowApp configures the client, UI providers, and default routes, which you can replace or supplement with routes. No additional Hyperflow or Chakra provider is required.

4. Verify the connection

Start your application and open it in the browser. Hyperflow UI should connect and display its default application shell. If it cannot connect, confirm the two URLs with the team that provided the runtime.

Next steps

• Build a Chakra application to add pages, navigation, and application-level customization.
• Customize the Composer to change one part of the default Chakra UI.
• Build a custom skin when you want to replace the default Chakra UI entirely.