Chat Interface
Overview
The Studio includes an AI chat interface for testing your MCP tools with OpenAI or Gemini.
Setup
OpenAI
- Get API key from https://platform.openai.com
- In Studio, go to Chat page
- Select OpenAI provider
- Enter your API key
- Choose model (gpt-4, gpt-3.5-turbo)
Gemini
- Get API key from https://makersuite.google.com/app/apikey
- In Studio, go to Chat page
- Select Gemini provider
- Enter your API key
- Choose model (gemini-2.0-flash-exp recommended)
Using the Chat
Text Conversations
You: Show me all products
AI: [Calls browse_products tool]
[Renders products-grid widget]
Here are the available products...
Tool Calling
The AI automatically:
- Determines which tools to call
- Executes them with correct parameters
- Renders UI widgets for results
- Continues conversation with context
Widget Rendering
Widgets appear inline in the chat:
- Product grids
- User profiles
- Order confirmations
- Cart displays
Best Practices
- Be specific - "Show products in Electronics category"
- Chain operations - "Add item to cart and show checkout"
- Use context - AI remembers previous interactions
- Test flows - Complete user journeys
Debugging
- Check browser console for errors
- Verify tool schemas are correct
- Ensure example data is provided