diff --git a/docs/features/plugin/tools/development.mdx b/docs/features/plugin/tools/development.mdx index 9ddbfc7..97dd3f9 100644 --- a/docs/features/plugin/tools/development.mdx +++ b/docs/features/plugin/tools/development.mdx @@ -1582,7 +1582,46 @@ async def create_dashboard(): ) ``` -The embedded content automatically inherits responsive design and integrates seamlessly with the chat interface, providing a native-feeling experience for users interacting with your tools. +The embedded content automatically inherits responsive design and integrates seamlessly with the chat interface, providing a native-feeling experience for users interacting with your tools. + +#### CORS and Direct Tools + +Direct external tools are tools that run directly from the browser. In this case, the tool is called by JavaScript in the user's browser. +Because we depend on the Content-Disposition header, when using CORS on a remote tool server, the OpenWeb UI cannot read that header due to Access-Control-Expose-Headers, which prevents certain headers from being read from the fetch result. +To prevent this, you must set Access-Control-Expose-Headers to Content-Disposition. Check the example below of a tool using Node.js: + + +```javascript +const app = express(); +const cors = require('cors'); + +app.use(cors()) + +app.get('/tools/dashboard', (req,res) => { + let html = ` +