From 77632c750eb88ebf0a1eea5bab2b0a2005c717bf Mon Sep 17 00:00:00 2001 From: Samuele Verzi Date: Fri, 8 May 2026 14:57:44 +0200 Subject: [PATCH 1/2] Refresh playground docs for threads and files Document multi-thread chat (Star/Rename/Delete) and file attachments (images and PDFs, up to 5 per message at 10 MB each), as shipped in toolhive-studio v0.30.0. Refs #773. --- docs/toolhive/guides-ui/playground.mdx | 98 ++++++++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/docs/toolhive/guides-ui/playground.mdx b/docs/toolhive/guides-ui/playground.mdx index 887443ad..bf494855 100644 --- a/docs/toolhive/guides-ui/playground.mdx +++ b/docs/toolhive/guides-ui/playground.mdx @@ -36,6 +36,19 @@ MCP servers directly through natural language commands. You can list servers, check their status, start or stop them, and perform other management tasks using conversational AI. +### Threaded conversations + +Keep separate testing sessions in their own chat threads. The sidebar groups +your conversations into **Starred** at the top and **Recents** below, so the +threads you use most stay within reach. Use **New chat** to start fresh, give +each thread a descriptive name, and remove old runs when you're done. + +### Attachments + +Send images and PDFs along with your prompts so the model can analyze +screenshots, diagrams, logs, or reference documents while it calls your MCP +tools. Each message accepts up to 5 files, and each file can be up to 10 MB. + ## Getting started To start using the playground: @@ -93,6 +106,23 @@ To start using the playground: have access to all enabled MCP tools and can execute them based on your requests. +5. **Manage chat threads**: Use the sidebar to keep separate threads for + different testing scenarios. + - Click **New chat** at the top of the sidebar to start a fresh thread. + - Double-click a thread row, or open its **Thread options** menu and choose + **Rename**, to give it a descriptive name. New threads show as `New chat` + until you rename them. + - Choose **Star** in the **Thread options** menu to pin a thread under + **Starred** at the top of the sidebar; choose **Unstar** to remove it from + the starred list. + - Choose **Delete** to remove a thread. The playground asks + `Delete ""? This cannot be undone.` before removing it. + +6. **Attach images or PDFs**: To send a file with your message, drag it onto the + playground or open the composer toolbar menu and choose **Add images or + PDFs**. You can attach up to 5 files per message, and each file must be 10 MB + or smaller. Supported types are images and PDFs. + ## Using the playground ### Testing MCP server functionality @@ -173,6 +203,64 @@ The playground shows detailed information about each tool execution: This visibility helps you understand exactly how your MCP servers are behaving and identify any issues with tool implementation or configuration. +### Manage playground threads + +The playground keeps each conversation in a separate thread so you can run +several testing sessions in parallel without losing context. Open the sidebar to +see your threads, with **Starred** entries pinned at the top and **Recents** +below. Untitled threads show as `New chat` until you give them a name. Each row +shows a relative timestamp (`just now`, `Nm ago`, `Nh ago`, `Nd ago`, or a short +date for older threads) so you can spot recent activity at a glance. + +To work with threads: + +- **Start a new thread**: Click **New chat** at the top of the sidebar. +- **Rename a thread**: Double-click the thread row (the tooltip + `Double-click to rename` confirms the action), or open its **Thread options** + menu and choose **Rename**. You can also click the title or the pencil icon at + the top of the chat to rename the active thread. +- **Star or unstar a thread**: Click the star icon next to the thread title, or + open **Thread options** and choose **Star** or **Unstar**. Starred threads + appear under **Starred** at the top of the sidebar. +- **Delete a thread**: Open **Thread options** and choose **Delete**. The + playground asks `Delete ""? This cannot be undone.` before + removing it. Confirm with **Delete**, or back out with **Cancel**. + +### Attach files to a message + +Add images and PDFs to a message so the model can read them while it works with +your MCP tools. The composer accepts up to 5 files per message, each 10 MB or +smaller, and supports image files and PDFs. + +To attach files: + +1. Open the composer toolbar menu and choose **Add images or PDFs**, or drag + files onto the playground window. Drag-and-drop is enabled across the entire + playground. +2. Type your prompt and send the message. If you send a message that only + contains attachments, the playground records the message text as + `Sent with attachments`. + +In the chat history, the playground previews each attachment alongside the +message: + +- **Images** appear inline. Click an image to open it in a larger modal preview. +- **PDFs and other non-image files** show as `📎 ` with a + **Download** link so you can save the original file. + +If a file is rejected, the playground shows a toast that explains why: + +- `You reached the maximum number of files` / + `You can only upload up to 5 files` when you exceed the per-message limit. +- `File size too large` / `The file size must be less than 10MB` when a file is + over 10 MB. +- `File type not supported` / `Only images and PDFs are supported` when the file + isn't an image or a PDF. + +The composer placeholder reflects the playground state. It shows +`Select an AI model to get started` when no model is selected, then +`Type your message...` once you've chosen one. + ## Recommended practices ### Provider security @@ -201,6 +289,16 @@ and identify any issues with tool implementation or configuration. 4. **Error handling**: Intentionally trigger error conditions to validate proper error handling +### Thread and attachment hygiene + +- Delete unused threads so the sidebar stays focused on the work you actually + return to. +- Star the conversations you want to keep close at hand. Otherwise they get + pushed down as new chats arrive in **Recents**. +- Treat attachments as inputs that may leak data. Strip credentials, customer + information, and other sensitive content from PDFs and screenshots before + sharing them with an AI provider. + ## Next steps - Learn about [client configuration](./client-configuration.mdx) to connect From d81ede1067767e0f56172f76eff9af6b891e2168 Mon Sep 17 00:00:00 2001 From: Samuele Verzi Date: Fri, 8 May 2026 18:16:33 +0200 Subject: [PATCH 2/2] Apply danbarr review on playground threads and files Address danbarr's CHANGES_REQUESTED review on #853: dedupe threads and attachments across sections, fix PDF-only wording, replace placeholder timestamps with concrete examples, reframe attachment risk around the AI provider, and align UI string formatting. Co-authored-by: Cursor --- docs/toolhive/guides-ui/playground.mdx | 109 ++++++++++++++----------- 1 file changed, 61 insertions(+), 48 deletions(-) diff --git a/docs/toolhive/guides-ui/playground.mdx b/docs/toolhive/guides-ui/playground.mdx index bf494855..b2f190fd 100644 --- a/docs/toolhive/guides-ui/playground.mdx +++ b/docs/toolhive/guides-ui/playground.mdx @@ -38,16 +38,13 @@ conversational AI. ### Threaded conversations -Keep separate testing sessions in their own chat threads. The sidebar groups -your conversations into **Starred** at the top and **Recents** below, so the -threads you use most stay within reach. Use **New chat** to start fresh, give -each thread a descriptive name, and remove old runs when you're done. +Keep multiple chats organized in a sidebar with starred and recent groups. See +[Manage playground threads](#manage-playground-threads). ### Attachments -Send images and PDFs along with your prompts so the model can analyze -screenshots, diagrams, logs, or reference documents while it calls your MCP -tools. Each message accepts up to 5 files, and each file can be up to 10 MB. +Send images and PDFs alongside your prompt. See +[Attach files to a message](#attach-files-to-a-message). ## Getting started @@ -106,22 +103,13 @@ To start using the playground: have access to all enabled MCP tools and can execute them based on your requests. -5. **Manage chat threads**: Use the sidebar to keep separate threads for - different testing scenarios. - - Click **New chat** at the top of the sidebar to start a fresh thread. - - Double-click a thread row, or open its **Thread options** menu and choose - **Rename**, to give it a descriptive name. New threads show as `New chat` - until you rename them. - - Choose **Star** in the **Thread options** menu to pin a thread under - **Starred** at the top of the sidebar; choose **Unstar** to remove it from - the starred list. - - Choose **Delete** to remove a thread. The playground asks - `Delete ""? This cannot be undone.` before removing it. - -6. **Attach images or PDFs**: To send a file with your message, drag it onto the - playground or open the composer toolbar menu and choose **Add images or - PDFs**. You can attach up to 5 files per message, and each file must be 10 MB - or smaller. Supported types are images and PDFs. +5. **Manage chat threads**: See + [Manage playground threads](#manage-playground-threads) for sidebar, rename, + star, and delete actions. + +6. **Attach images or PDFs**: See + [Attach files to a message](#attach-files-to-a-message) for supported types + and limits. ## Using the playground @@ -208,23 +196,30 @@ and identify any issues with tool implementation or configuration. The playground keeps each conversation in a separate thread so you can run several testing sessions in parallel without losing context. Open the sidebar to see your threads, with **Starred** entries pinned at the top and **Recents** -below. Untitled threads show as `New chat` until you give them a name. Each row -shows a relative timestamp (`just now`, `Nm ago`, `Nh ago`, `Nd ago`, or a short -date for older threads) so you can spot recent activity at a glance. +below. Untitled threads show as `New chat` until you give them a name. + +Each row shows a relative timestamp such as `just now`, `5m ago`, `2h ago`, or +`3d ago`. Older threads show a short date instead. To work with threads: - **Start a new thread**: Click **New chat** at the top of the sidebar. -- **Rename a thread**: Double-click the thread row (the tooltip - `Double-click to rename` confirms the action), or open its **Thread options** - menu and choose **Rename**. You can also click the title or the pencil icon at - the top of the chat to rename the active thread. +- **Rename a thread**: Double-click the thread row, or open its **Thread + options** menu and choose **Rename**. You can also click the title or the + pencil icon at the top of the chat to rename the active thread. The thread + row's tooltip confirms the double-click action: + + > Double-click to rename + - **Star or unstar a thread**: Click the star icon next to the thread title, or open **Thread options** and choose **Star** or **Unstar**. Starred threads appear under **Starred** at the top of the sidebar. -- **Delete a thread**: Open **Thread options** and choose **Delete**. The - playground asks `Delete ""? This cannot be undone.` before - removing it. Confirm with **Delete**, or back out with **Cancel**. +- **Delete or unstar threads**: Open **Thread options** and choose **Delete** to + remove a thread you no longer need. The playground asks for confirmation: + + > Delete "``"? This cannot be undone. + + Confirm with **Delete**, or back out with **Cancel**. ### Attach files to a message @@ -238,28 +233,46 @@ To attach files: files onto the playground window. Drag-and-drop is enabled across the entire playground. 2. Type your prompt and send the message. If you send a message that only - contains attachments, the playground records the message text as - `Sent with attachments`. + contains attachments, the playground records the message text as: + + > Sent with attachments In the chat history, the playground previews each attachment alongside the message: - **Images** appear inline. Click an image to open it in a larger modal preview. -- **PDFs and other non-image files** show as `📎 ` with a - **Download** link so you can save the original file. +- **PDFs** show as `📎 ` with a **Download** link so you can save the + original file. If a file is rejected, the playground shows a toast that explains why: -- `You reached the maximum number of files` / - `You can only upload up to 5 files` when you exceed the per-message limit. -- `File size too large` / `The file size must be less than 10MB` when a file is - over 10 MB. -- `File type not supported` / `Only images and PDFs are supported` when the file - isn't an image or a PDF. +- When you exceed the per-message limit: + + > You reached the maximum number of files + > + > You can only upload up to 5 files + +- When a file is over 10 MB: + + > File size too large + > + > The file size must be less than 10MB + +- When a file isn't an image or a PDF: + + > File type not supported + > + > Only images and PDFs are supported + +The composer placeholder reflects the playground state: + +> Select an AI model to get started + +is shown when no model is selected, then: + +> Type your message... -The composer placeholder reflects the playground state. It shows -`Select an AI model to get started` when no model is selected, then -`Type your message...` once you've chosen one. +once you've chosen one. ## Recommended practices @@ -295,9 +308,9 @@ The composer placeholder reflects the playground state. It shows return to. - Star the conversations you want to keep close at hand. Otherwise they get pushed down as new chats arrive in **Recents**. -- Treat attachments as inputs that may leak data. Strip credentials, customer +- Attachments are sent to your AI provider. Strip credentials, customer information, and other sensitive content from PDFs and screenshots before - sharing them with an AI provider. + sharing them. ## Next steps