Intent LogoIntent| Documentation
Source Code

Developer Companion UI (DevX UI)

The Intent DevX UI is a web-based side panel that lets you interact with the running Intent system in real time. It serves as a companion tool for developers, providing a visual interface to work with the event-sourced system during development and debugging.

Current Features

The DevX UI offers several powerful features to enhance the developer experience:

  • Command issuer – A form-driven interface to create and dispatch commands, with schema validation. This allows you to interact with the system without writing code.

  • Event stream viewer – Live tail of events as they occur, with filters. Watch events flow through the system in real time as you issue commands.

  • Trace viewer – Visualization of correlated spans/traces to follow a command through to completion. See how a command propagates through the system, from initial handling to event generation and projection updates.

  • Projections explorer – View the state of read models and detect schema drift or issues. Inspect the current state of your projections and ensure they're in sync with your code.

  • AI assistant (experimental) – Scaffolding for commands/sagas and Q&A with context. Get help generating new commands or understanding the system.

  • Multi-tenant/role switching – Simulate different user perspectives by switching between tenants and roles. Test how your system behaves for different users.

Running the DevX UI Locally

To run the DevX UI locally, follow these steps:

  1. Run the admin API
   npm run api:admin

  1. Navigate to the DevX UI directory in another terminal:

    cd devex-ui/

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. Open the given local URL in your browser.

Configuration Options

By default, the DevX UI runs in mock mode with fake data, which is useful for quick experimentation without a running backend. To connect to a real Intent instance:

  1. Set the API mode to 'real' in your environment:

    VITE_API_MODE='real'

  2. Point to your running backend API:

    VITE_API_URL='http://localhost:3000'

You can set these variables in a .env.local file in the devex-ui/ directory or pass them when starting the development server:

VITE_API_MODE='real' VITE_API_URL='http://localhost:3000' npm run dev

Architecture and Safety

The DevX UI is designed to be both powerful and safe:

  • It uses the same backend ports and respects access control, so using the UI is like using the real system, not bypassing it.
  • It's "local-first", making it useful both for quick experimentation and real debugging.
  • The UI is completely separate from the core system, so it can't compromise the integrity of your production environment.

When to Use the DevX UI

The DevX UI is particularly useful in the following scenarios:

  • During development: Quickly fire commands instead of writing manual scripts to test your features.
  • Debugging: Watch how events flow when testing a new feature and identify issues in the event chain.
  • Learning the system: Explore the command and event structure to understand how the system works.
  • Demonstrating functionality: Show stakeholders how the system behaves without writing code.
  • Testing multi-tenant scenarios: Switch between tenants to verify proper isolation and behavior.

Getting Started

After launching the DevX UI, you'll see a dashboard with different panels for each feature. Here's a quick guide to get started:

  1. Use the Command Issuer panel to create and send a test command
  2. Watch the Event Stream panel to see the events generated by your command
  3. Check the Trace Viewer to see how your command was processed
  4. Explore the Projections panel to see how the read models were updated

This workflow gives you a complete view of how commands flow through the system, from initial dispatch to final state changes.