Cannot set a server for chroma db component because it no longer compiles due to chroma_server_cors_allow_origins value is not a valid list

[vertgo]

Describe the bug
When you use a chroma vector store with a locally running chroma instance (at 127.0.0.1:8000), the chroma component doesn't compile

Browser and Version
Safari Version 17.4 (19618.1.15.11.12)
this is using langflow vs 1.0.0.30a

To Reproduce

1. make an empty flow
2. add a chroma vector store
3. add an embedding (I used openai ada-2 and add an api key)
4. add a document (file loader->some random text document)
5. wire the file loader as the input of the chroma and the embedding as the embedding input of the chroma component
6. hit "Run" on the chroma component, watch it build with no problems7.
7. go to "advanced" on chroma and set server host (I have tried "http://127.0.0.1", "127.0.0.1")
8. hit "run" on chroma and it says "Error building vertex Chroma: 2 validation errors for Settings chroma_server_cors_allow_origins none is not an allowed value (type=type_error.none.not_allowed) chroma_server_port extra fields not permitted (type=value_error.extra)"
9. Try a variety of cors allow lists: "", [""], , [], etc
10. it still doesn't build

[dosubot]

To address the compilation failure of the Chroma db component due to the chroma_server_cors_allow_origins and chroma_server_port errors, follow these steps:

1. CORS Configuration: Ensure the chroma_server_cors_allow_origins is correctly set. For local development, you might use "*" to allow requests from any origin. Remember, for production, specify exact origins for security.

2. Server Port Configuration: Verify that chroma_server_port and chroma_server_grpc_port are correctly set and match the ports your local Chroma instance runs on. Remove any extra, unsupported fields from your component's configuration to avoid the "extra fields not permitted" error.

Make sure all configuration field names are correctly spelled and the data types match the expected types. For SSL configurations, ensure chroma_server_ssl_enabled matches your local Chroma setup capabilities.

By correcting these configurations, you should be able to resolve the compilation issues.

Details

Sources

• src/backend/base/langflow/components/vectorstores/Chroma.py
• src/backend/langflow/components/vectorstores/Chroma.py

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[vertgo]

I set the CORS origins to "*", and ["*"], *, and [*] (as I mentioned above, but markdown changed it, since asterisk in markdown makes italics) and I still get that error. No extra fields were added from when it compiled, just the server and the port (and now several attempts at chroma_server_cors_allow_origins )

@dosu

[dosubot]

To resolve the chroma_server_cors_allow_origins and chroma_server_port errors you're encountering with the Chroma db component, follow these guidelines:

1. CORS Origins Configuration: The chroma_server_cors_allow_origins should be set as a list of strings. If you're attempting to allow all origins in a development environment, ensure you're formatting the list correctly in JSON as ["http://localhost:3000", "https://example.com"] for specific allowed origins. This adheres to the requirement for the value to be a list of strings, which should eliminate the errors related to CORS configurations you've been facing.

2. Server Port Configuration: There seems to be a misunderstanding with the chroma_server_port field. Ensure you're using the correct field names such as chroma_server_http_port or chroma_server_grpc_port for your configurations. The error "extra fields not permitted" suggests that an incorrect field name might be used or an unexpected field is being added to the configuration.

3. CORS Middleware Configuration: The Langflow application uses CORSMiddleware from FastAPI, configured to be quite permissive by allowing all origins, methods, and headers. This setup is suitable for development but should be revisited for production to adhere to security best practices.

4. Understanding CORS in Langflow: The chroma_server_cors_allow_origins setting is crucial for specifying which origins are allowed to make cross-origin requests. It ensures the Access-Control-Allow-Origin header is included in responses from the Chroma server, which is necessary for web applications interacting with Chroma from different origins. Incorrect configuration can lead to browsers blocking these requests due to the Same-Origin Policy.

By ensuring the CORS origins are correctly formatted as a list of strings and using the correct field names for server port configurations, you should be able to compile the Chroma component successfully and address the CORS policy violations.

Details

Sources

• src/backend/base/langflow/template/frontend_node/vectorstores.py
• src/backend/langflow/template/frontend_node/vectorstores.py
• src/backend/base/langflow/main.py
• src/backend/langflow/components/vectorstores/Chroma.py
• src/frontend/src/controllers/API/api.tsx
• src/backend/base/langflow/components/vectorsearch/ChromaSearch.py

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[vertgo]

I used the exact list, and it still has the same error:
["http://localhost:3000", "https://example.com"]
@dosu

[dosubot]

Given the persistent issue with the chroma_server_cors_allow_origins and chroma_server_port settings, it seems there might be a misunderstanding or misconfiguration in how these values are being set. Here's a more focused approach to troubleshoot and resolve the issue:

1. CORS Origins Configuration: The chroma_server_cors_allow_origins should be formatted as a single string or a comma-separated list of URLs, not as a JSON array. Try setting it as "http://localhost:3000,https://example.com" to include multiple origins. This format aligns with how the underlying Chroma library interprets this string, which differs from the JSON array format you've been using.

2. Server Port Configuration: Ensure that the chroma_server_port is correctly named and configured. If you're receiving an "extra fields not permitted" error, it suggests that this field might be unexpected or incorrectly named. Double-check that you're using the correct field name as expected by the Chroma component and that it's set to an integer representing the port number.

3. Runtime Environment: The compilation and configuration of the Chroma component require a runtime environment that supports Python, allows for the installation of external libraries, and provides network access for external integrations, among other capabilities. Ensure your environment meets these requirements to avoid issues during compilation.

By focusing on these specific areas, you should be able to address the configuration issues you're facing with the Chroma db component. If the problem persists, providing more detailed information about your configuration steps and any additional error messages could help further diagnose the issue.

Details

Sources

• src/backend/langflow/template/frontend_node/vectorstores.py
• src/backend/langflow/components/vectorstores/Chroma.py
• src/backend/base/langflow/interface/custom/utils.py
• render.yaml
• src/backend/base/langflow/services/settings/base.py
• src/backend/langflow/settings.py
• src/backend/langflow/services/settings/base.py
• .env.example

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[vertgo]

I have tried those values as well, and still the same error @dosu

[dosubot]

It appears the issues you're encountering with the chroma_server_cors_allow_origins and chroma_server_port settings in the Chroma db component are due to specific configuration requirements and possibly an unexpected handling of None values or extra fields.

1. For the chroma_server_cors_allow_origins error, the setting expects a string value. If you're looking to allow all origins, setting it to "*" should be the correct approach. For specific origins, they should be provided as a comma-separated string, like "http://localhost:3000,https://example.com". This approach is necessary because the system is looking for a string input rather than a JSON array or None.

2. Regarding the chroma_server_port error, it indicates that an unexpected field is being passed. This setting should be an integer representing the port number. If you're not specifying a port, you can omit this setting entirely, and it should default to None.

Ensure all dependencies are up to date, as sometimes these issues are addressed in newer versions of the libraries involved. Adding detailed logging around the construction and use of chroma_settings might also help pinpoint the exact cause of the issue.

If after these adjustments you're still facing the same errors, it would be beneficial to review the exact configuration code or steps you're using to set up the Chroma db component, as there might be other factors at play causing these errors.

Details

Sources

• src/backend/langflow/components/vectorstores/Chroma.py

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[vertgo]

Actually, the bug is not in the cors list at all, but in changing the server.

To reproduce:

1. Put in a new, working chroma component and supporting components (embeddings, documents)
2. Build component, it builds without error.
3. Set the CORS to ["*"] or "*", or anything you'd like
4. Build component, it builds without error
5. Set the server host to 127.0.0.1 (it was previously empty)
6. Build component, it NOW gives the error: chroma_server_cors_allow_origins value is not a valid list
7. Delete the server host and return it to its original empty field
8. Build component, error remains!
9. Clear the CORS field as well.
10. Build, still error
    @dosu

[dosubot]

The issue with the chroma_server_cors_allow_origins and the persistent error after changing the server host seems to be related to how the Chroma db component handles the CORS origins configuration. Specifically, the configuration expects the chroma_server_cors_allow_origins to be treated as a list, even when you're intending to allow all origins or specify multiple ones.

To address this, ensure that the chroma_server_cors_allow_origins is always set as a list in the Chroma component's configuration. If you're aiming to clear the CORS field or allow all origins, setting it to an empty list [] or using ["*"] should resolve the validation error. Here's how you can adjust the assignment in the configuration:

chroma_settings = chromadb.config.Settings(
    chroma_server_cors_allow_origins=[chroma_server_cors_allow_origins] if chroma_server_cors_allow_origins else [],
    ...
)

This adjustment ensures that the chroma_server_cors_allow_origins is correctly formatted, addressing the issue where changing the server host leads to a persistent error. Make sure other related settings, such as chroma_server_host and chroma_server_port, are also correctly configured to avoid any interference with the CORS settings.

If the problem persists after making these changes, it might be beneficial to review the entire configuration process for any other potential misconfigurations or to check for updates in the libraries involved that might address these issues.

Details

Sources

• src/backend/langflow/components/vectorstores/Chroma.py
• src/backend/base/langflow/components/vectorstores/Chroma.py

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.

[SANHAJIFX]

Hi team,
I'm facing the same issue despite trying all the proposal above.

err:
Output
Error building vertex Chroma: 2 validation errors for Settings
chroma_server_cors_allow_origins
value is not a valid list (type=type_error.list)
chroma_server_port
extra fields not permitted (type=value_error.extra)

[coffeecodeconverter]

---

For Development / Test environments

Create SYSTEM environment variable name:
CHROMA_SERVER_CORS_ALLOW_ORIGINS

Set variable value (including the square brackets and double quotes):
["*"]

---

For Production / Live environments

Firstly, if the web developer tools console shows the below error, reporting the origin as "null":

Access to fetch at 'http://localhost:8000/api/v1/version' from origin 'null' has been blocked by CORS policy:

This is when you're running the "index.html" web app as a file
to resolve that, you need to host it as a web site on IIS if your native to windows, or NGinx, or WAMP, etc - "some" web server.
it just needs to be served as a web site in order to communicate with the ChromaServer

Secondly, once you've hosted the web app, but see this error instead:

Access to fetch at 'http://localhost:8000/api/v1/version' from origin 'http://localhost:80' has been blocked by CORS policy:

You need to add "http://localhost:80" (or whatever your port is that you're hosting the web app on)
to the CORS environment variable list like this, including the port used (including the square brackets and double quotes):
["http://localhost:80"]

if you have multiple ports, or hosts, then you write the environment variable value like this (including the square brackets):

["http://localhost:80", "http://localhost:5678", "http://192.168.100.10:6000", "http://192.168.100.20:6000"]

and remember to kill and restart ChromaServer in between any of these changes.

[emehmet]

Hi,

You may have installed chromadb globally with npm. Delete it and try again.