Commit graph use-mcp/examples
Author SHA1 Message Date
Glen Maddern
0ce394f53c Update plug indicator format with comma separation
- Change format from '0 (1 servers) 0 (2 tools)' to '0 (1) servers, 0 (2) tools'
- Move words 'servers' and 'tools' outside brackets
- Add comma separation between server and tool counts
- More concise and readable format
2025-06-23 19:26:06 +10:00
Glen Maddern
644b3b663d Update plug indicator to show enabled vs total counts
- Change indicator format to show enabled/total for both servers and tools
- Format: 'X (Y servers) A (B tools)' where:
  - X = enabled servers, Y = total servers
  - A = tools from enabled servers, B = total tools from all servers
- Track tool counts per server in localStorage (mcpServerToolCounts)
- Persist tool counts even when servers are disabled
- Examples:
  - No servers: '0 (0 servers) 0 (0 tools)'
  - One disabled server with 2 tools: '0 (1 servers) 0 (2 tools)'
  - One enabled server with 2 tools: '1 (1 servers) 2 (2 tools)'
- Clean up tool counts when servers are deleted
2025-06-23 19:17:17 +10:00
Glen Maddern
d15c88419c Implement multiple MCP servers support
- Completely rewrite McpServerModal to support multiple servers
- Add McpServer interface with id, url, enabled, and name fields
- Use localStorage 'mcpServers' array instead of single server URL
- Add server list UI with status badges, toggle, and delete buttons
- Add 'Add New Server' section at bottom with input and Add button
- Support enabling/disabling individual servers with Power/PowerOff icons
- Delete servers with Trash2 icon in top right of each server block
- Aggregate tools from all enabled servers for parent component
- Render multiple McpConnection components for enabled servers
- Update plug indicator to show correct server count
- Add debug information panel showing server and tool counts
- Handle server names using hostname from URL
- Each server gets unique connection state tracking by server ID
2025-06-23 16:52:14 +10:00
Glen Maddern
1f80d7040b Add cursor pointer and click-outside-to-dismiss to model selector modal
- Add cursor-pointer class to X button in ModelSelectionModal
- Add onClick handler to backdrop overlay to close modal
- Add stopPropagation to modal content to prevent backdrop clicks
- Consistent modal behavior between model selector and MCP server modals
2025-06-23 16:13:33 +10:00
Glen Maddern
1514c6470e Add cursor pointer to X button and click-outside-to-dismiss
- Add cursor-pointer class to modal X button
- Add onClick handler to backdrop overlay to close modal
- Add stopPropagation to modal content to prevent backdrop clicks
- Now modal can be dismissed by clicking outside or using X button
2025-06-23 16:12:52 +10:00
Glen Maddern
812fdf92e3 Fix MCP tools count update in plug icon indicator
- Add onMcpToolsUpdate prop to ConversationThread interface
- Pass setMcpTools function from ChatApp down to ConversationThread
- Connect McpServerModal onToolsUpdate to parent state update
- Now plug icon will correctly show '1 (N)' when N tools are available
- Fixes issue where tool count remained at 0 despite successful connection
2025-06-23 16:11:42 +10:00
Glen Maddern
c3624e6bbc Keep MCP modal in React tree to maintain connection
- Replace conditional rendering with CSS visibility (hidden/block)
- Remove early return null when modal is closed
- McpConnection component stays mounted to preserve MCP server connection
- Modal is always in DOM but visually hidden when isOpen is false
- Prevents MCP disconnection when modal is dismissed
2025-06-23 16:09:15 +10:00
Glen Maddern
b1f7709a05 Move number to left of plug emoji
- Change layout from '🔌 0' to '0 🔌'
- Number now appears before the plug icon for better visual balance
- Maintains same functionality and styling
2025-06-23 16:02:59 +10:00
Glen Maddern
11360f38fc Add MCP server indicator with plug emoji and modal
- Create McpServerModal component based on existing McpServers component
- Add plug emoji (🔌) indicator on right side, opposite to brain emoji
- Show '0' when no servers connected, '1 (N)' when connected with N tools
- Fullscreen modal with MCP server configuration UI
- Support for single MCP server connection (foundation for multiple servers)
- Integrate with existing MCP tools logic and useMcp hook
- Clean layout with brain emoji on left, plug emoji on right
2025-06-23 16:02:05 +10:00
Glen Maddern
3461d3c900 Replace red X with grey 'none' text and add pointer cursor
- Change unconfigured model indicator from red ✕ to grey 'none' text
- Add explicit cursor-pointer class to brain emoji button
- Maintains grey text color consistent with configured model names
- Cleaner, less alarming visual for unconfigured state
2025-06-23 15:54:04 +10:00
Glen Maddern
50e97bb613 Isolate hue-rotate animation to background layer only
- Create separate background layer using ::before pseudo-element
- Move hue-rotate animation to background layer with z-index: -1
- Remove filter from main container to prevent inheritance
- Use equivalent gradient colors in CSS (pink-100, purple-50, indigo-100)
- Foreground elements (brain emoji, text) now maintain original colors
- Background still animates smoothly without affecting content
2025-06-23 15:52:34 +10:00
Glen Maddern
6a79264315 Add brain emoji model selector with fullscreen modal
- Create ModelSelectionModal component with list-style interface
- Add brain emoji (🧠) indicator below chat input, left-aligned
- Show current model name in lowercase or red X if not configured
- Fullscreen modal displays all available models with configuration status
- Green checkmark for configured models, red alert for unconfigured
- Integrate with existing API key management and model selection logic
- Modal handles API key setup workflow when selecting unconfigured models
- Clean separation between compact indicator and full selection interface
2025-06-23 15:49:45 +10:00
Glen Maddern
b33bde6b0e Use CSS custom property for cleaner random animation delay
- Move animation-delay to CSS using custom property --random-delay
- JavaScript still required to generate random value (CSS has no random functions)
- Cleaner separation between styling (CSS) and logic (JavaScript)
- Maintains same functionality with better organization
2025-06-21 13:58:11 +10:00
Glen Maddern
433eac58f1 Add random starting point for hue-rotate animation
- Generate random negative animation-delay between 0 and -60 seconds
- Starts animation at random point in the 60-second cycle
- Each page load will show different initial colors
- Uses useState with initializer function to set delay once on mount
- CSS doesn't have random functions, so JavaScript handles the randomization
2025-06-20 21:05:39 +10:00
Glen Maddern
d47124b8b3 Slow down hue-rotate animation to 60 seconds
- Change animation duration from 8s to 60s for subtle color shifting
- Creates gentle, barely noticeable background color transitions
- Maintains visual interest without being distracting
2025-06-20 21:04:37 +10:00
Glen Maddern
f94a80cbd9 Switch to hue-rotate animation for background gradient
- Revert complex conical gradient approach
- Return to original linear gradient (pink-100 → purple-50 → indigo-100)
- Add hue-rotate filter animation cycling through 360 degrees
- 8s duration for fast testing
- Simpler implementation with continuous color shifting
- Less control over saturation but smoother performance
2025-06-20 21:03:52 +10:00
Glen Maddern
668ecaff91 Add animated rotating conical gradient background
- Create large 500% conical gradient with pastel color cycle
- Position gradient off-screen (-200% top/left) for smooth rotation
- Add 8s linear infinite rotation animation for fast testing
- Use ::before pseudo-element to avoid repainting main content
- Cycle through various pastel shades (pink, purple, blue, green, yellow, orange)
- Performance-optimized: only transforms, no gradient repainting
2025-06-20 20:46:24 +10:00
Glen Maddern
15bb63670a Simplify chat UI to focus on main input with pastel gradient background
- Hide sidebar (conversations, model picker, MCP servers) while preserving components
- Hide navbar/title bar while preserving component
- Remove title text and description above input field
- Add pastel gradient background (pink-purple-indigo)
- Expand conversation thread to full width
- Create minimal, focused interface with only white input field visible
2025-06-20 17:19:54 +10:00
Glen Maddern
55c1756f36 deployng to workers.dev for sharing 2025-06-20 17:00:39 +10:00
Glen Maddern
6ebb156fe6 working tool call ui! 2025-06-19 19:46:33 +10:00
Glen Maddern
769475cecc Working on tool call display 2025-06-19 19:34:28 +10:00
Glen Maddern
d25f6c19a3 Moving most of the debug logging behind localStorage.USE_MCP_DEBUG 2025-06-19 14:31:30 +10:00
Glen Maddern
e94958865a MCP tool calling woo! 2025-06-19 14:07:28 +10:00
Glen Maddern
f5f1943ac5 Copying chat example across 2025-06-19 11:51:02 +10:00
Glen Maddern
de192f4de0 Transfer from geelen/use-mcp 2025-06-18 21:46:43 +10:00