Skip to content

Commit 1ea85c8

Browse files
samuvdanbarr
andauthored
Add playground guide (#214)
* Add playground guide * fix: typo * fix: typo * fix: adjust sidebar position, remove some images, and decapitalize playground * 3 spaces on list Co-authored-by: Dan Barr <[email protected]> * 3 spaces list Co-authored-by: Dan Barr <[email protected]> * extra explanation before second example Co-authored-by: Dan Barr <[email protected]> * remove "feature" Co-authored-by: Dan Barr <[email protected]> * starts instead of spins up Co-authored-by: Dan Barr <[email protected]> * rewording validation phrase Co-authored-by: Dan Barr <[email protected]> * learn more Co-authored-by: Dan Barr <[email protected]> * Browse instead of Check out Co-authored-by: Dan Barr <[email protected]> * Recommended instead of Best Co-authored-by: Dan Barr <[email protected]> * rewording the description Co-authored-by: Dan Barr <[email protected]> * rewording the goal Co-authored-by: Dan Barr <[email protected]> * respond Co-authored-by: Dan Barr <[email protected]> * rewording thv mcp description Co-authored-by: Dan Barr <[email protected]> * fix: format * feat: add playgroun on next step for run server and other adjustments * refactor: change title for audit logs --------- Co-authored-by: Dan Barr <[email protected]>
1 parent 4b6524e commit 1ea85c8

File tree

7 files changed

+242
-0
lines changed

7 files changed

+242
-0
lines changed
Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
---
2+
title: Test MCP servers with playground
3+
description:
4+
Use the playground feature to test and validate MCP servers directly in the
5+
ToolHive UI with AI model providers.
6+
---
7+
8+
import useBaseUrl from '@docusaurus/useBaseUrl';
9+
import ThemedImage from '@theme/ThemedImage';
10+
11+
ToolHive's playground lets you test and validate MCP servers directly in the UI
12+
without requiring additional client setup. This streamlined testing environment
13+
helps you quickly evaluate functionality and behavior before deploying MCP
14+
servers to production environments.
15+
16+
## Key capabilities
17+
18+
### Instant testing of MCP servers
19+
20+
Enter an AI model API key, select your MCP servers and tools, and begin testing
21+
immediately in the desktop app. The playground eliminates the friction of
22+
setting up external AI clients just to validate that your MCP servers work
23+
correctly.
24+
25+
### Detailed interaction logs
26+
27+
See tool details, parameters, and execution results directly in the UI, ensuring
28+
full visibility into tool performance and responses. Every interaction is
29+
logged, making it easy to understand exactly what your MCP servers are doing and
30+
how they respond to requests.
31+
32+
### Integrated ToolHive management
33+
34+
The playground includes a built-in MCP server that lets you manage your other
35+
MCP servers directly through natural language commands. You can list servers,
36+
check their status, start or stop them, and perform other management tasks using
37+
conversational AI.
38+
39+
## Getting started
40+
41+
To start using the playground:
42+
43+
1. **Access the playground**: Click the **Playground** tab in the ToolHive UI
44+
navigation bar.
45+
46+
2. **Configure API keys**: Click **Configure your API Keys** to set up access to
47+
AI model providers:
48+
- **OpenAI**: Enter your OpenAI API key to use GPT models
49+
- **Anthropic**: Add your Anthropic API key for Claude models
50+
- **Google**: Configure Google AI API key for Gemini models
51+
- **xAI**: Set up xAI API key for Grok models
52+
- **OpenRouter**: Add OpenRouter API key for access to multiple model
53+
providers
54+
55+
3. **Select MCP tools**: Click the tools icon to manage which MCP servers and
56+
tools are available in the playground.
57+
58+
<ThemedImage
59+
alt='ToolHive playground tools management showing available MCP tools'
60+
sources={{
61+
light: useBaseUrl(
62+
'/img/toolhive/toolhive-ui-playground-thv-mcp-light.webp'
63+
),
64+
dark: useBaseUrl('/img/toolhive/toolhive-ui-playground-thv-mcp-dark.webp'),
65+
}}
66+
title='MCP tools management interface'
67+
/>
68+
69+
- View all your running MCP servers
70+
- Enable or disable specific tools from each server
71+
- Search and filter tools by name or functionality
72+
- The `toolhive mcp` server is included by default, providing management
73+
capabilities
74+
75+
4. **Start testing**: Begin chatting with your chosen AI model. The model will
76+
have access to all enabled MCP tools and can execute them based on your
77+
requests.
78+
79+
## Using the playground
80+
81+
### Testing MCP server functionality
82+
83+
Use the playground to validate that your MCP servers work as expected:
84+
85+
```text
86+
Can you list all my MCP servers and show their current status?
87+
```
88+
89+
The AI will use the `list_servers` tool from the ToolHive MCP server to provide
90+
a comprehensive overview of your server status.
91+
92+
<ThemedImage
93+
alt='ToolHive playground showing AI response with MCP tool execution results'
94+
sources={{
95+
light: useBaseUrl(
96+
'/img/toolhive/toolhive-ui-playground-chat-response-light.webp'
97+
),
98+
dark: useBaseUrl(
99+
'/img/toolhive/toolhive-ui-playground-chat-response-dark.webp'
100+
),
101+
}}
102+
title='Chat response showing tool execution and results'
103+
/>
104+
105+
Or test that an individual MCP tool is working as expected:
106+
107+
```text
108+
Use the GitHub MCP server to search for recent issues in the microsoft/vscode repository
109+
```
110+
111+
If you have the GitHub MCP server running, the AI will execute the appropriate
112+
GitHub API calls and return formatted results.
113+
114+
### Managing servers through conversation
115+
116+
The ToolHive desktop app automatically starts a dedicated MCP server
117+
(`toolhive mcp`) that orchestrates ToolHive operations through natural language
118+
commands. This approach provides several key benefits:
119+
120+
- **Unified interface**: Manage your MCP infrastructure using the same
121+
conversational AI interface you use for testing
122+
- **Contextual operations**: The AI understands your current server state and
123+
can make intelligent decisions about which servers to start, stop, or
124+
troubleshoot
125+
- **Reduced complexity**: No need to switch between the chat interface and
126+
traditional UI controls—everything can be done through conversation
127+
- **Audit trail**: All management operations are logged in the same transparent
128+
way as tool executions, providing clear visibility into what actions were
129+
taken
130+
131+
Take advantage of these integrated ToolHive management tools:
132+
133+
```text
134+
Start the fetch MCP server for me
135+
```
136+
137+
```text
138+
Stop all unhealthy MCP servers
139+
```
140+
141+
```text
142+
Show me the logs for the meta-mcp server
143+
```
144+
145+
### Validating tool responses
146+
147+
The playground shows detailed information about each tool execution:
148+
149+
- **Tool name and description**: What tool was called and its purpose
150+
- **Input parameters**: The exact parameters passed to the tool
151+
- **Execution status**: Whether the tool succeeded or failed
152+
- **Response data**: The complete response from the tool
153+
- **Timing information**: How long the tool took to execute
154+
155+
This visibility helps you understand exactly how your MCP servers are behaving
156+
and identify any issues with tool implementation or configuration.
157+
158+
## Recommended practices
159+
160+
### API key security
161+
162+
- Use dedicated API keys for testing that have appropriate rate limits
163+
- Regularly rotate API keys used in development environments
164+
- Consider using API keys with restricted permissions for testing purposes
165+
166+
### Server management
167+
168+
- Start only the MCP servers you need for testing to improve performance
169+
- Use the playground to validate new server configurations before connecting
170+
them to production AI clients
171+
- Test different combinations of tools to understand how they work together
172+
173+
### Testing workflow
174+
175+
1. **Isolated testing**: Test individual MCP servers one at a time to validate
176+
their functionality
177+
2. **Integration testing**: Enable multiple servers to test how they work
178+
together
179+
3. **Performance validation**: Monitor tool execution times and responses under
180+
different loads
181+
4. **Error handling**: Intentionally trigger error conditions to validate proper
182+
error handling
183+
184+
## Troubleshooting
185+
186+
### Common issues
187+
188+
<details>
189+
<summary>API key not working</summary>
190+
191+
If your API key isn't working:
192+
193+
1. Verify the API key is correct and has proper permissions
194+
2. Check that you have sufficient quota or credits with the provider
195+
3. Ensure the API key hasn't expired or been revoked
196+
4. Try creating a new API key from the provider's dashboard
197+
198+
</details>
199+
200+
<details>
201+
<summary>MCP tools not appearing</summary>
202+
203+
If your MCP server tools aren't showing up:
204+
205+
1. Verify the MCP server is running (check the **MCP Servers** page)
206+
2. Click the tools icon and ensure the server's tools are enabled
207+
3. Try restarting the MCP server if it shows as unhealthy
208+
4. Check the server logs for any error messages
209+
210+
</details>
211+
212+
<details>
213+
<summary>Tool execution failing</summary>
214+
215+
If tools are failing to execute:
216+
217+
1. Check the tool's parameter requirements in the audit log
218+
2. Verify any required secrets or environment variables are configured
219+
3. Ensure the MCP server has necessary permissions (network access, file system
220+
access)
221+
4. Review the server logs for detailed error information
222+
223+
</details>
224+
225+
## Next steps
226+
227+
- Learn about [client configuration](./client-configuration.mdx) to connect
228+
ToolHive to external AI applications
229+
- Set up [secrets management](./secrets-management.md) for secure handling of
230+
API keys and tokens
231+
- Explore [network isolation](./network-isolation.mdx) for enhanced security
232+
when testing untrusted MCP servers
233+
- Browse the [registry](./registry.mdx) to discover new MCP servers to test in
234+
the playground
235+
236+
## Related information
237+
238+
- [Run MCP servers](./run-mcp-servers.mdx)
239+
- [Install ToolHive](./install.mdx)

docs/toolhive/guides-ui/run-mcp-servers.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,3 +453,5 @@ automatically the next time you launch the application.
453453
[client configuration guide](./client-configuration.mdx).
454454
- Learn more about [secrets management](./secrets-management.md) to securely
455455
manage API tokens and other sensitive data.
456+
- Test your MCP servers using the [playground](./playground.mdx) to validate
457+
functionality and behavior with different models.

sidebars.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const sidebars: SidebarsConfig = {
5252
'toolhive/guides-ui/network-isolation',
5353
'toolhive/guides-ui/secrets-management',
5454
'toolhive/guides-ui/client-configuration',
55+
'toolhive/guides-ui/playground',
5556
],
5657
},
5758

30.9 KB
Loading
40.5 KB
Loading
21.6 KB
Loading
22.3 KB
Loading

0 commit comments

Comments
 (0)