> ## Documentation Index
> Fetch the complete documentation index at: https://morphik.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Morphik UI

> Learn how to use the Morphik UI interface

Morphik provides a graphical user interface so that you can interact directly with your ingested data. This includes support for ingesting documents, retrieving relevant information, and chatting with your documents. In this guide, we'll walk you through how you can set up the Morphik UI and start ingesting!

## Prerequisites

### Morphik Server

Before you begin, ensure that you have the Morphik server running. You can do this by following the instructions in the [Getting Started](/getting-started) guide. To verify that the Morphik server is running, check the `[api]` section in the `morphik.toml` file (found in the root of the `morphik-core` repository). If you see the server options when you open `http://<host>:<port>/docs`, then the server is live! By default, the section should look like:

```toml theme={null}
[api]
host = "localhost" # Needs to be "0.0.0.0" for docker
port = 8000
reload = true
```

So, if the configuration is the same as above, we can navigate to [`http://localhost:8000/docs`](http://localhost:8000/docs) to access the Morphik docs. Here's what it should look like:

<img src="https://mintcdn.com/databridge/eYNTu58F8b1Z2Eq-/images/ui-guide/api-screenshot.png?fit=max&auto=format&n=eYNTu58F8b1Z2Eq-&q=85&s=d62bf999fa050a25893e76ae2fdb21fb" alt="Morphik API screenshot" width="2940" height="1370" data-path="images/ui-guide/api-screenshot.png" />

Excuse the additional tabs on Chrome - who knew running an open-source repo full-time required so much context switching? (No seriously, I'm asking 🤣)

In case you don't see this, and have followed all the steps in the [Getting Started](/getting-started) guide, feel free to [contact us](mailto:founders@morphik.ai).

### Node and NPM

In order to launch the UI, ensure that you have `node` and `npm` installed. A good way to check this is just by running `node -v` and `npm -v` in your terminal. If you don't have them installed, you can install them using the following instructions:

<Tabs>
  <Tab title="macOS">
    **Install Node.js on macOS**

    Using Homebrew:

    ```bash theme={null}
    # Install Homebrew if you don't have it
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    # Install Node.js
    brew install node
    ```
  </Tab>

  <Tab title="Windows">
    **Install Node.js on Windows**

    1. **Using the official installer**:
       * Visit [nodejs.org](https://nodejs.org/)
       * Download the Windows installer (.msi)
       * Run the installer and follow the prompts
    2. **Using Chocolatey**:
       ```powershell theme={null}
       # Install Chocolatey if you don't have it (run in PowerShell as Admin)
       Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

       # Install Node.js
       choco install nodejs
       ```
  </Tab>

  <Tab title="Linux">
    **Install Node.js on Linux**

    Using NVM (Node Version Manager):

    ```bash theme={null}
    # Install NVM
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash

    # Set up NVM environment (add these to your .bashrc or .zshrc)
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

    # Restart your terminal or source your profile
    source ~/.bashrc  # or ~/.zshrc

    # Update npm to the latest version
    npm install -g npm

    # Install the latest LTS version of Node.js
    nvm install --lts

    # Use the installed version
    nvm use --lts
    ```
  </Tab>
</Tabs>

After installation, verify that Node.js and npm are installed correctly:

```bash theme={null}
node -v
npm -v
```

## Running the UI

You're ready to launch the UI once you have the server running and `npm` installed. In a new terminal (ensure that the server is running and not stopped), navigate to the root of the `morphik-core` repository that you launched the server from. From here change directory into the `ee/ui-component` folder:

```bash theme={null}
cd ee/ui-component
```

Now, install the required node dependencies:

```bash theme={null}
npm i
```

Finally, you're ready to run the UI component:

```bash theme={null}
npm run dev
```

You should see the following output (or something similar):

```bash theme={null}
(base) arnav@Arnavs-MacBook-Air ui-component % npm run dev

> @morphik/ui@0.1.0 dev
> next dev

  ▲ Next.js 14.2.26
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 1560ms
```

If that's the case, you've done it! Navigate to [`http://localhost:3000`](http://localhost:3000), and you should be greeted with Morphik's UI! It should look something like this:

<img src="https://mintcdn.com/databridge/eYNTu58F8b1Z2Eq-/images/ui-guide/document-view.png?fit=max&auto=format&n=eYNTu58F8b1Z2Eq-&q=85&s=c8d958d997fdd8fd0983d713d4a40b0a" alt="Morphik UI screenshot" width="3408" height="1806" data-path="images/ui-guide/document-view.png" />

Clicking on a file should get you some of its information on the right.

## Using the UI - Features we ❤️

Morphik has support for **automatic metadata extraction** at file ingestion time. You can define a `json schema`, and then Morphik will automatically extract the metadata from the file:

<img src="https://mintcdn.com/databridge/eYNTu58F8b1Z2Eq-/images/ui-guide/metadata-extraction.png?fit=max&auto=format&n=eYNTu58F8b1Z2Eq-&q=85&s=7573e4817b813b2de1198a384db656a9" alt="Morphik UI metadata extraction" width="2430" height="1844" data-path="images/ui-guide/metadata-extraction.png" />

**Chunk searching** - perfect for testing and iterating on retrieval strategies:

<img src="https://mintcdn.com/databridge/eYNTu58F8b1Z2Eq-/images/ui-guide/searching-chunks.png?fit=max&auto=format&n=eYNTu58F8b1Z2Eq-&q=85&s=fc679c3b00494e34b37e8172e0f71823" alt="Morphik UI chunk searching" width="3352" height="1956" data-path="images/ui-guide/searching-chunks.png" />