Commit graph use-mcp/examples
Author SHA1 Message Date
Glen Maddern
5087ebacdc Update AGENT.md with chat UI development guidelines
- Add React Router and use-mcp to tech stack
- Document background animation best practices (hue-rotate, pseudo-elements)
- Modal patterns for UX (click-outside, cursor-pointer, backdrop styling)
- MCP server management (multiple servers, localStorage patterns, OAuth)
- State persistence guidelines (localStorage vs sessionStorage)
- UI indicator patterns (emoji-based, count formatting)
- Component organization for stateful elements
- Routing and OAuth callback implementation
- Performance considerations for animations and aggregation
2025-06-24 08:21:55 +10:00
Glen Maddern
a3200e09cb Doing some manual CSS hax for a change 2025-06-23 21:54:26 +10:00
Glen Maddern
71b07c488b Make gradient background repeat every 100vh
- Add background-size: 100% 100vh to fix gradient height to viewport
- Add background-repeat: repeat-y to tile gradient vertically
- Gradient pattern now repeats down the page as content grows
- Animation applies consistently to all repeated background tiles
- Creates seamless repeating pattern while maintaining hue rotation
2025-06-23 21:29:22 +10:00
Glen Maddern
4680b9d3e8 Make gradient background fill entire content height
- Change from h-dvh to min-h-screen on main container
- Remove overflow-clip to allow content to expand
- Update inner containers to use min-h-screen for proper height
- Background gradient now extends with content rather than fixed to viewport
- Allows for scrolling when content exceeds viewport height
2025-06-23 21:26:36 +10:00
Glen Maddern
ec7f1ff6dd Add Qwen 3 32B model under Groq provider
- Add qwen-3-32b model entry using qwen/qwen3-32b model ID
- Uses same Groq provider as Llama 3.3, sharing API token
- Model appears in selection modal between Llama and Claude
- Clean name 'Qwen 3 32B' for user interface
2025-06-23 21:18:22 +10:00
Glen Maddern
089c1c9f9e Deploying to chat.use-mcp.dev 2025-06-23 20:26:01 +10:00
Glen Maddern
78f0e364a6 Implement OAuth callback support for MCP servers
- Add react-router-dom dependency for routing support
- Create OAuthCallback component with animated background and loading spinner
- Add routing to App.tsx with /oauth/callback route
- Match styling with main app using animated-bg-container
- Use onMcpAuthorization from use-mcp library for OAuth handling
- Library already handles multiple server differentiation via state parameter
- Each MCP server gets unique OAuth flow identified by state containing server URL
- Clean up unused imports and variables in McpServerModal
2025-06-23 20:19:10 +10:00
Glen Maddern
32a6bf5abd Replace gradient with uniform 80% black background
- Remove radial gradient to fix banding issues
- Use solid 80% black background (rgba(0,0,0,0.8))
- Apply to both ModelSelectionModal and McpServerModal
- Clean, consistent backdrop without visual artifacts
2025-06-23 20:11:37 +10:00
Glen Maddern
272fd5606a Soften modal background with radial gradient
- Replace solid black 50% opacity with radial gradient
- Center: 80% black (rgba(0,0,0,0.8))
- Corners: 70% black (rgba(0,0,0,0.7))
- Apply to both ModelSelectionModal and McpServerModal
- Creates softer, more visually appealing backdrop
- Remove bg-black bg-opacity-50 classes and use inline style
2025-06-23 20:10:18 +10:00
Glen Maddern
1e68fca937 Change plug indicator format to use forward slashes
- Change from '0 (1) servers, 0 (2) tools' to '0/1 servers, 0/2 tools'
- Use forward slash format showing enabled/total for both servers and tools
- Cleaner, more compact visual representation
- 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'
2025-06-23 19:26:57 +10:00
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