MCP Results -- UI Formatting Issue

[nimble talon]

So I just installed the new Firecrawl Deep Research MCP server... it's awesome... but the results of the deep research appear in this small, unformatted box instead of as a nested button with nice formatting.

This simple UI issue ruins the MCP experience. It'd be nice if the results were like the thinking dropdown but with markdown formatting, that way it's still nested but can be clicked and read with ease. 🙏 @charred tinsel @kind turret @raven karma

Sovereign Deep Research is a huge selling point / feature for clients like LibreChat and Cline. It's an easy UI fix. I'll put up a bounty of $300 to solve it.

[cedar meadow]

Google Flash returns some queries the same way I just notice

claims it doesnt work but when you find the results like here in the tool action

[charred tinsel]

do I hear money 🤓 first thing tomorrow 😉

[nimble talon]

🚀 😍

[charred tinsel]

So what do you want to see?

[nimble talon]

The thinking dropdown is a perfect example. It can be “results” dropdown. When I click the dropdown, it’ll show the results fully formatted in markdown etc. That way I can read through them! 😁

[charred tinsel]

Yeah but there is already a dropdown? What about a dialog modal?

Because it holds more data then doing only a dropdown

[nimble talon]

The dropdown doesn’t show it formatted unfortunately. It’s raw JSON I think?

Yeah you’re right, having to scroll through the dropdown is a pain.

Does dialog modal mean “normal message”?

[charred tinsel]

Yeah but what do you want to see ? Because parsing everything does not really makes sense?

Maybe per item a dropdown or something or idk

[nimble talon]

Could even use the artifact UI… instead of a new popup. Results appear as an artifact or something like it?

You can see here where it says “text:” that it begins the report in markdown with # for titles etc. If those could render that would be what I’d like to see. 🙏

[charred tinsel]

Uh, it’s not an artefact tho 😅

[nimble talon]

True

Maybe something similar

Or even if it was just a normal message. Doesn’t have to be a pop up

[charred tinsel]

Yeah I mean what is what you want to see when you open it?

It shows the different “titles” and when you click it you can read the content?

Or something else

Something like that I mean

[nimble talon]

Ahh I see what you mean

[nimble talon]

Yes

Exactly
Then the content actually formatted as markdown

[charred tinsel]

Can you share a json file example?

[nimble talon]

Yes I’ll paste 2 examples in 10 minutes

Just gonna finish eating haha 🥪

[charred tinsel]

All good

Thank you for the fast response

I’m going to work on it tomorrow

As you know I’m in the Amsterdam TZ

😉

[cedar meadow]

oh wow, if this can be fixed in general ... that would be interesting because I get output from Google models the same way when I use certain tools

[charred tinsel]

Please share it so I can make it general work for every action

[charred tinsel]

The response of that’s possible

[cedar meadow]

okay, wait a moment ... I am tired .... I have to reproduce the issues

[nimble talon]

Here's example one:

[charred tinsel]

All good take your time. I’m going to work on it tomorrow. So in 11 hours 😉

[charred tinsel]

Thank you ✨

[cedar meadow]

here ... can I fix that, too?

[charred tinsel]

Csn you copy the response is that possible?

Then I can test the different layouts

[cedar meadow]

it is a very long response

I would prefer to dm

[charred tinsel]

All good 👍🏼

[cedar meadow]

ok

does seem anything special with format .. just regular txt

[charred tinsel]

Just txt file is fine

[nimble talon]

Here's example two:

[
{
"type": "text",
"text": "Command started with PID 139\nInitial output:\n\n=== 5th RANK SYMBOLIC TENSOR OPERATIONS ===\n\nCreating symbolic tensors T and U of rank 5...\n\nSample elements from tensor T:\nT[0,0,0,0,0] = T_0_0_0_0_0\nT[1,0,1,0,1] = T_1_0_1_0_1\nT[1,1,1,1,1] = T_1_1_1_1_1\n\n=== TENSOR ADDITION ===\nT + U for selected elements:\n(T+U)[0,0,0,0,0] = (T_0_0_0_0_0) + (U_0_0_0_0_0)\n(T+U)[1,1,0,0,1] = (T_1_1_0_0_1) + (U_1_1_0_0_1)\n\n=== TENSOR CONTRACTION ===\nContracting the last two dimensions of tensor T...\nResult of contraction (now a rank-3 tensor):\nContracted T[0,0,0] = T_0_0_0_0_0 + T_0_0_0_0_1 + T_0_0_0_1_0 + T_0_0_0_1_1\nContracted T[1,1,1] = T_1_1_1_0_0 + T_1_1_1_0_1 + T_1_1_1_1_0 + T_1_1_1_1_1\n\n=== TENSOR PRODUCT ===\nComputing symbolic outer product for select elements...\nT[0,0,0,0,0] ⊗ U[1,1,1,1,1] = (T_0_0_0_0_0) * (U_1_1_1_1_1)\nT[1,0,1,0,1] ⊗ U[0,1,0,1,0] = (T_1_0_1_0_1) * (U_0_1_0_1_0)\n\n=== ADVANCED SYMBOLIC TENSOR OPERATIONS ===\nExpression with T[0,1,0,1,0]: (T_0_1_0_1_0) ^ 2 + 3 * (T_0_1_0_1_0) + 5\n\n=== EIGENVALUE CONCEPT FOR HIGHER-ORDER TENSORS ===\nHigher-order tensors have generalizations of eigenvalues\nEigenvalue-like equation: lambda * (T_0_0_0_0_0) - (T_1_1_1_1_1) = 0\nThis is an example of a symbolic representation for a\nHigher-order tensor eigenvalue problem\n\n=== TENSOR INVARIANTS ===\nTensor invariants are scalar values that remain unchanged\nunder certain transformations. For our 5th rank tensor, we can\ncreate an example invariant based on contraction.\nSymbolic tensor invariant: T_0_0_0_0_0 + T_1_1_1_1_1 + T_0_1_0_1_0 + T_1_0_1_0_1\nThis invariant represents a quantity that would remain unchanged\nunder specific tensor transformations.\n\n=== MULTI-LINEAR MAPPING REPRESENTATION ===\nA 5th rank tensor can be viewed as a multi-linear mapping\nfrom four vector spaces to a fifth vector space.\nMulti-linear mapping (first component):\nresult_0 = (T_0_0_0_0_0) * v1_0 * v2_0 * v3_0 * v4_0 + (T_0_0_0_1_0) * v1_0 * v2_0 * v3_0 * v4_1 + (T_0_0_1_0_0) * v1_0 * v2_0 * v3_1 * v4_0 + ... (and 27 more terms)\n\n=== TENSOR DECOMPOSITION ===\nHigher-order tensors can be decomposed into simpler components.\nOne approach is the CP decomposition (CANDECOMP/PARAFAC),\nwhich expresses a tensor as a sum of rank-one tensors:\nSymbolic CP decomposition with rank 3:\nT_{ijklm} ≈ ∑ λ_p * a_i^p * b_j^p * c_k^p * d_l^p * e_m^p\nfor p = 1 to 3\n\nThis decomposition can be useful for finding\nlow-dimensional representations of the tensor data.\n"
}
]

the first example was deep research with firecrawl, the second example was a tensor calculation with mathjs! I use both heavily. 🙏

[cedar meadow]

let me share some other file. this one has too much of my system info and path details

[charred tinsel]

All fine I fully understand. It’s more about the format so I have some examples to text the new UI

Because I don’t have setup all those different actions and MCP

[cedar meadow]

I havent setup any actions myself yet ... still dont understand what they mean xD

[charred tinsel]

You can get data from example GitHub or you can send emails via your outlook if you have it

With an oauth flow

Just by chatting with it

[cedar meadow]

oh wow ... this time flash was reading the file

this is the first time this happened when I tried it

confused

[charred tinsel]

So this is good then hahaha

[cedar meadow]

and this is the file

# Do not edit this file directly. Use a ‘docker-compose.override.yaml’ file if you can.
# Refer to `docker-compose.override.yaml.example’ for some sample configurations.

services:
  api:
    container_name: LibreChat
    ports:
      - "${PORT}:${PORT}"
    depends_on:
      - mongodb
      - rag_api
    image: ghcr.io/danny-avila/librechat-dev:latest
    restart: always
    user: "${UID}:${GID}"
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      - HOST=0.0.0.0
      - MONGO_URI=mongodb://mongodb:27017/LibreChat
      - MEILI_HOST=http://meilisearch:7700
      - RAG_PORT=${RAG_PORT:-8000}
      - RAG_API_URL=http://rag_api:${RAG_PORT:-8000}
    volumes:
      - type: bind
        source: ./.env
        target: /app/.env
      - ./images:/app/client/public/images
      - ./uploads:/app/uploads
      - ./logs:/app/api/logs
  mongodb:
    container_name: chat-mongodb
    image: mongo
    restart: always
    user: "${UID}:${GID}"
    volumes:
      - ./data-node:/data/db
    command: mongod --noauth
  meilisearch:
    container_name: chat-meilisearch
    image: getmeili/meilisearch:v1.12.3
    restart: always
    user: "${UID}:${GID}"
    environment:
      - MEILI_HOST=http://meilisearch:7700
      - MEILI_NO_ANALYTICS=true
      - MEILI_MASTER_KEY=${MEILI_MASTER_KEY}
    volumes:
      - ./meili_data_v1.12:/meili_data
  vectordb:
    container_name: vectordb
    image: ankane/pgvector:latest
    environment:
      POSTGRES_DB: mydatabase
      POSTGRES_USER: myuser
      POSTGRES_PASSWORD: mypassword
    restart: always
    volumes:
      - pgdata2:/var/lib/postgresql/data
  rag_api:
    container_name: rag_api
    image: ghcr.io/danny-avila/librechat-rag-api-dev-lite:latest
    environment:
      - DB_HOST=vectordb
      - RAG_PORT=${RAG_PORT:-8000}
    restart: always
    depends_on:
      - vectordb
    env_file:
      - .env

volumes:
  pgdata2:

so I dont understand ... why it is not displayed or what is wrong in the first place. why did it work once ... and never before? mysetery!

just tried it again with the obsidian vault ... same problem

[charred tinsel]

Okay but I’m not going to solve this problem 😅 solving here the UI problem of the action it self that it is not really nice and good looking