Building Custom UIs

Generate Vue or React code that calls the Inistate REST API directly.

Frontend mode is for developers who want to build custom web interfaces on top of Inistate. Switching to this mode gives the AI access to a full REST API reference for api.inistate.com, which it uses to generate working Vue or React code.

Who Is This For?

Frontend mode is intended for developers building applications that call Inistate directly — bypassing the standard interface. Common use cases:

• A custom dashboard embedded in an existing internal portal

• A simplified data-entry form tailored to a specific team's workflow

• A mobile-friendly view of a specific module

How to Activate Frontend Mode

Tell the AI:

"Switch to frontend mode."

or

"I want to build a custom UI for the Purchase Order module."

The AI will switch to frontend mode and load the REST API reference automatically.

Frontend mode is a superset of configure mode — all entry and module design tools remain available. You can design or modify a module schema and generate UI code in the same session.

What the AI Can Generate

Once in frontend mode, the AI has access to the complete REST API reference covering:

• Authentication (Bearer token + workspace ID header)

• Module and workspace discovery endpoints

• Entry list, read, form, and submit endpoints

• Filter operator syntax

• Field value shapes (File, Image, User, Module references)

• Two-step presigned file upload flow

• Error response shapes

• Framework-agnostic client patterns, with Vue and React reference implementations

Example Prompts

"Generate a Vue 3 component that lists all open purchase orders with their amounts and suppliers."

"Write a React form for submitting the 'Approve' activity on a leave request entry."

"Build a minimal dashboard showing entry counts by state for the Invoice module."

Getting Started

1

Switch to frontend mode

"Switch to frontend mode."

2

Describe the UI you want

Tell the AI which module it should target and what the interface should do.

"Build a read-only list view for the Equipment Inspection module, showing the inspection date, technician, and current state."

3

Provide your API token

The generated code expects a user-supplied API token at runtime — it is never hardcoded. The AI will show you where to inject it.

4

Iterate

Ask for additions or changes just as you would in any coding session. The AI can also update the module schema (configure mode tools are still active) and adjust the UI code to match in the same conversation.

API tokens should be treated as secrets. Never commit them to version control. The generated code will use a variable or environment configuration for the token.