vercel__workflow/packages/web-shared

@workflow/web-shared

Workflow Observability UI primitives. See Workflow SDK for more information.

Usage

This package contains:

• pre-styled, prop-driven UI components (no data fetching)

If you want a full observability experience with server actions already wired, take a look at @workflow/web instead.

It comes with pre-styled UI components that accept data + callbacks:

import { TraceViewer } from '@workflow/web-shared';

export default function MyRunDetailView({ run, events, fetchSpanDetail }) {
  return (
    <TraceViewer
      run={run}
      events={events}
      sidebarData={{ run, events, fetchSpanDetail }}
    />
  );
}

Server actions and data fetching are intentionally not part of web-shared. Implement those in your app and pass data + callbacks into these components. If you need world run helpers, use @workflow/core/runtime.

Security notice: If you implement server-side data fetching using @workflow/world-vercel or similar backends, ensure that user-supplied IDs (runId, stepId, etc.) are validated before passing them to world functions. The server actions in @workflow/web do not include authentication. See that package's README for details on securing self-hosted deployments.

Styling

To detect Tailwind CSS classes correctly, you might need to configure your Next.js app to use the correct CSS processor. For example, with PostCSS and Tailwind CSS:

// postcss.config.mjs in your Next.js app
const config = {
  plugins: ['@tailwindcss/postcss'],
};

export default config;