From d02810ccd0a690db5f2d31660f2c1db09c02713d Mon Sep 17 00:00:00 2001
From: Divyam Talwar <divyamtalwar0@gmail.com>
Date: Tue, 30 Jun 2026 03:59:04 +0530
Subject: [PATCH] Align UI component command guidance with scripts

The agent guidance listed npm run build:package, but the UI package does not define that script. The UI README also described the checked-in private package as an installable @morphik/ui package and included incomplete component-prop guidance. Update both docs to describe the local UI workflow, the supported npm run build / npm start path, the default local connection path, and verified connection-state behavior.

Constraint: Keep the PR documentation-only; do not change package scripts, package metadata, or component props without maintainer evidence of a publish workflow.

Rejected: Add a build:package npm script | no checked-in script or build flow requires it, and the existing README/Docker compose path uses npm run build.

Rejected: Wire README-only props into MorphikUI | component behavior changes are out of scope for this docs correction.

Confidence: high

Scope-risk: narrow

Directive: Keep future UI command, connection, and component guidance verified against ee/ui-component/package.json, npm run output, and the current UI source.

Tested: npm run (from ee/ui-component); rg -n "build:package|@morphik/ui|npm install @morphik/ui|onUriChange|isReadOnlyUri|Automatic reconnection|localhost:8000|npm run build|npm run lint|format:check|npm run format|npm start" CLAUDE.md ee/ui-component/package.json ee/ui-component/README.md docker-compose.run.yml -S; git diff --check

Not-tested: npm run build; npm run lint; full frontend dependency install
---
 CLAUDE.md                 |  2 +-
 ee/ui-component/README.md | 58 ++++++++-------------------------------
 2 files changed, 13 insertions(+), 47 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 3af693b9..42b4a08b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -63,7 +63,7 @@ npm run dev              # Development server
 
 # Build and quality
 npm run build            # Production build
-npm run build:package    # Package build
+npm start                # Serve the production build
 npm run lint             # ESLint
 npm run format           # Prettier formatting
 npm run format:check     # Check formatting
diff --git a/ee/ui-component/README.md b/ee/ui-component/README.md
index f86c2f4e..1566fe47 100644
--- a/ee/ui-component/README.md
+++ b/ee/ui-component/README.md
@@ -1,4 +1,4 @@
-# @morphik/ui
+# Morphik UI Component
 
 A modern React-based UI for Morphik, built with Next.js and Tailwind CSS. This component provides a user-friendly interface for:
 
@@ -7,37 +7,19 @@ A modern React-based UI for Morphik, built with Next.js and Tailwind CSS. This c
 - Real-time document processing feedback
 - Query testing and prototyping
 
-## Installation
+## Development Quick Start
 
-```bash
-npm install @morphik/ui
-```
+The UI component is a private Next.js app in this repository. It is not published as an `@morphik/ui` package.
+Run these commands from `ee/ui-component`:
 
-## Usage
-
-```jsx
-import { MorphikUI } from "@morphik/ui";
-
-export default function YourApp() {
-  return (
-    <MorphikUI
-      connectionUri="your-connection-uri"
-      apiBaseUrl="http://your-api-base-url"
-      isReadOnlyUri={false}
-      onUriChange={uri => console.log("URI changed:", uri)}
-    />
-  );
-}
+```bash
+npm install
+npm run dev
 ```
 
-## Props
+Open [http://localhost:3000](http://localhost:3000) and connect to a running local Morphik server with `localhost:8000`.
 
-| Prop            | Type                    | Default                   | Description                            |
-| --------------- | ----------------------- | ------------------------- | -------------------------------------- |
-| `connectionUri` | `string`                | `undefined`               | Connection URI for Morphik API         |
-| `apiBaseUrl`    | `string`                | `"http://localhost:8000"` | Base URL for API requests              |
-| `isReadOnlyUri` | `boolean`               | `false`                   | Controls whether the URI can be edited |
-| `onUriChange`   | `(uri: string) => void` | `undefined`               | Callback when URI is changed           |
+The routed app lives under `app/`; a reusable dashboard component also exists at `components/MorphikUI.tsx`. Check `components/types.ts` for the supported internal prop contract before embedding it elsewhere in this app.
 
 ## Prerequisites
 
@@ -45,24 +27,6 @@ export default function YourApp() {
 - npm or yarn package manager
 - A running Morphik server
 
-## Development Quick Start
-
-1. Install dependencies:
-
-```bash
-npm install
-```
-
-2. Start the development server:
-
-```bash
-npm run dev
-```
-
-3. Open [http://localhost:3000](http://localhost:3000) in your browser
-
-4. Connect to your Morphik server using a URI from the `/local/generate_uri` endpoint
-
 ## Features
 
 - **Document Management**
@@ -82,7 +46,7 @@ npm run dev
 - **Connection Management**
   - Easy server connection
   - Connection status indicator
-  - Automatic reconnection
+  - Cloud connection persistence and automatic local connection clearing on restart
   - Error handling
 
 ## Development
@@ -111,6 +75,8 @@ npm run build
 npm start
 ```
 
+There is no `build:package` script in this package.
+
 ## Contributing
 
 We welcome contributions! Please feel free to submit a Pull Request.