Commit graph use-mcp/examples
Author SHA1 Message Date
Glen Maddern
6429f48763 lfg manual style 2025-06-25 15:12:03 +10:00
Glen Maddern
5e69116f47 fixing prettier 2025-06-25 15:09:09 +10:00
Glen Maddern
51fafb485c Branching off 2025-06-25 15:06:17 +10:00
Glen Maddern
ab73226b87 Remove all duplicate detection logic
- Remove existingToolCall and existingToolResult checks
- Add every API event as a new message regardless of duplicates
- Provides complete unfiltered log of all API data after middleware
- Useful for debugging and understanding raw data flow
2025-06-25 12:09:31 +10:00
Glen Maddern
840fbb4ad6 Simplify debug logging to show raw JSON messages
- Replace complex message summaries with JSON.stringify(conv.messages)
- Provides direct, unfiltered view of message data structure
- Easier to inspect actual data and debug issues
2025-06-25 12:06:57 +10:00
Glen Maddern
12dc6433c3 Enhance debug logging to show complete conversation state
- Show entire messages array after each new message addition
- Include message index, role, content/reasoning status, and tool info
- Add final conversation state with content/reasoning lengths
- Provides complete visibility into data structure evolution
2025-06-25 12:05:00 +10:00
Glen Maddern
4e282ea1de Add targeted debug logging for message operations
- Add debugMessages helper function that logs with [Messages] prefix
- Log when new messages are added to conversation (not updates)
- Log reasoning assistant messages, tool calls, tool results, and content messages
- Log stream processing completion and function completion
- Debug logging enabled with localStorage.setItem('USE_MCP_DEBUG', 'true')
2025-06-25 12:02:43 +10:00
Glen Maddern
2c8391007c Clean up debug logging in useStreamResponse.ts
- Remove all debugLog calls and debug infrastructure
- Simplify error logging by removing verbose prefixes
- Fix unused options parameter to eliminate warnings
- Clean up formatting and extra blank lines
2025-06-25 11:56:27 +10:00
Glen Maddern
4f87d827aa Fix reasoning/content separation and eliminate empty message divs
- Remove extractReasoningMiddleware as it expects <think> tags but API sends reasoning fields directly
- Ensure reasoning and content tokens create separate assistant messages
- Filter empty assistant messages at conversation level to prevent empty divs
- Add deduplication for tool results to prevent duplicates
- Only render content div when message has actual content
2025-06-25 11:51:41 +10:00
Glen Maddern
dffc1aa5fb Make thinking block collapse immediately when tool call starts
- End reasoning phase as soon as first tool-call event is detected
- Set reasoningEndTime and stop reasoning streaming immediately
- Creates linear flow: thinking expands → tool call (thinking collapses) → tool result → final response
- More aggressive/responsive UX that doesn't wait for final response to collapse thinking
2025-06-25 08:28:43 +10:00
Glen Maddern
8159950ffd Fix message ordering - create final response at end instead of updating existing
- Remove logic that updates existing assistant message
- Always create new final response message at end of conversation
- This ensures proper order: thinking → tool call → tool result → final response
- Still prevents duplicates by checking existing content
2025-06-25 08:25:03 +10:00
Glen Maddern
55d54bce60 Fix duplicate assistant messages by updating existing message
- Check if there's already an assistant message with only reasoning content
- Update existing assistant message with final content instead of creating new one
- Add duplicate detection to prevent multiple messages with same content
- Ensures only one assistant response appears after tool calls
2025-06-25 08:23:29 +10:00
Glen Maddern
0ed5dbaa67 Add intelligent content filtering to extract clean final answer
- Extract only the final answer from post-tool reasoning content
- Filter out thinking/reasoning patterns to prevent duplication
- Use regex matching and line filtering to identify clean response content
- Skip content that appears to be thinking rather than final answer
- Limit response length to prevent long thinking content from appearing
2025-06-25 08:21:08 +10:00
Glen Maddern
59026addde Fix message ordering and prevent content duplication in thinking/final response
- Collect post-tool reasoning content separately instead of processing immediately
- Process collected content as final assistant response after stream completes
- This ensures proper message order: thinking → tool call → tool result → final response
- Prevents duplication of thinking content in final response
2025-06-25 08:14:51 +10:00
Glen Maddern
d2b6f8013e Fix duplicate tool results and post-tool reasoning being hidden
- Add deduplication logic for tool results to prevent duplicates
- Detect when tool results have been processed and convert subsequent reasoning events to text content
- This fixes the issue where the final assistant response was hidden in the thinking block
- Tool results should now appear once and final response should appear as separate text
2025-06-24 22:49:20 +10:00
Glen Maddern
6126405ab0 Fix tool results being mixed into thinking blocks
- Add missing tool-result event handling in useStreamResponse
- Tool results now appear as separate ToolResultMessage components
- Prevents tool response content from being incorrectly added to reasoning content
- Maintains proper message order: thinking → tool call → tool result → assistant response
2025-06-24 22:43:06 +10:00
Glen Maddern
e7dd5776c3 Replace httpOnly with transportType option and add UI controls
- Replace httpOnly boolean with transportType ('auto'/'http'/'sse') option
- Add transport type cycling button next to 'Add New Server'
- Add blue transport badge next to connected server status
- Save transport preference to localStorage
- Update connection orchestration to handle sse-only and http-only modes
- Remove explicit fallback messaging since orchestration now controls it
2025-06-24 22:38:35 +10:00
Glen Maddern
03d95e70b7 Add httpOnly option to disable SSE fallback for debugging
- Added httpOnly option to UseMcpOptions to skip SSE fallback
- Updated all HTTP transport failure paths to respect httpOnly flag
- Temporarily enabled httpOnly in chat UI for streamable HTTP debugging
- Updated AGENT.md to require frequent commits after changes
2025-06-24 22:28:37 +10:00
Glen Maddern
ba9e6c9f3f Add debug logging and Accept headers for MCP transport debugging
- Added extensive debug logging to transport creation and connection flows
- Added proper Accept header (application/json, text/event-stream) to transport options
- Fixed scroll jittering during streaming with instant scroll behavior
- Investigating HTTP transport 'Not connected' errors and SSE connection hanging
2025-06-24 22:25:57 +10:00
Glen Maddern
ccad616e02 feat: Add sliding window effect for streaming reasoning text
- Use overflow:hidden + whitespace:nowrap to prevent line breaks
- Apply justify-end flexbox to push content to the right
- New tokens push older ones out to the left edge and hide them
- Creates smooth sliding window effect showing only recent tokens
- Only applies during streaming, keeps normal wrap after completion

This creates a nice visual effect where you can see the latest reasoning
tokens flowing in from right to left as the model thinks.
2025-06-24 20:18:40 +10:00
Glen Maddern
78e01032ae fix: Remove delay for instant reasoning block collapse
- Remove 500ms setTimeout delay when reasoning finishes
- Reasoning block now collapses immediately when response starts
- Creates smoother transition from thinking to response phase
- Eliminates jarring delay between reasoning end and collapse

The reasoning block now collapses instantly as soon as the model
starts generating the actual response, providing better UX flow.
2025-06-24 19:08:36 +10:00
Glen Maddern
b810f639aa fix: Create assistant message immediately when reasoning starts
- Create assistant message as soon as first reasoning event arrives
- This ensures reasoning block is visible from the beginning of thinking
- Prevent duplicate message creation in text-delta handler
- Move reasoning end time logic to text-delta start (when thinking finishes)

This fixes the issue where reasoning blocks weren't appearing because
the assistant message was only created after reasoning completed.
2025-06-24 19:03:43 +10:00
Glen Maddern
bfe2bd5816 feat: Implement live reasoning streaming with timing display
- Update ReasoningBlock to start expanded and show live reasoning content
- Add timing tracking with start/end timestamps for reasoning duration
- Auto-collapse reasoning blocks after completion with 500ms delay
- Show timing summary (e.g. 'Thought for 0.4s') instead of content when collapsed
- Add streaming cursor animation and real-time content updates
- Update types to support reasoning timing and streaming state
- Stream reasoning content live as tokens arrive during thinking phase

This provides a much better UX where users can see the model thinking
in real-time, then get a clean timing summary after completion.
2025-06-24 18:21:22 +10:00
Glen Maddern
68ecdebbc0 fix: Clean think tags from reasoning content before display
- Add cleaning logic to remove <think> and </think> tags from reasoning
- Trim whitespace after tag removal for clean display
- Add debug logging to show before/after cleaning
- The middleware extracts reasoning but includes the original tags

This ensures the reasoning blocks show clean thinking content without
the XML tags that were being captured along with the reasoning text.
2025-06-24 18:15:57 +10:00
Glen Maddern
33c914e19b debug: Add more detailed logging for reasoning event handling
- Add debug logs inside reasoning event handler to see if it's being triggered
- Log reasoning content length as it's being collected
- Add final reasoning content summary at end of stream
- Log why reasoning isn't being added if conditions aren't met
- Cast event to any to avoid potential TypeScript issues

This will help identify why reasoning events aren't being captured
despite appearing in the event stream logs.
2025-06-24 18:11:24 +10:00
Glen Maddern
ab9f3c0220 fix: Capture reasoning events during streaming instead of from result
- Add back reasoning variable to track content during streaming
- Handle reasoning events from extractReasoningMiddleware in stream processing
- Build up reasoning content from individual reasoning textDelta events
- Remove dependency on result.reasoning which wasn't being populated
- Add reasoning to assistant message after stream completes

The logs showed reasoning events were coming through correctly but we
weren't capturing them. This fixes the issue by collecting reasoning
content during streaming as the events arrive.
2025-06-24 17:53:12 +10:00
Glen Maddern
6c7422f832 fix: Add detailed debugging and use result.text for cleaned content
- Add debug logging to track aiResponse vs result.text content
- Use result.text from extractReasoningMiddleware for final content
- This should provide the properly cleaned text without thinking tags
- Comment out unused sidebar and edit functionality to fix TS errors

The result.text should contain content that has been automatically
cleaned by the extractReasoningMiddleware, while result.reasoning
contains the extracted thinking content.
2025-06-24 17:40:53 +10:00
Glen Maddern
03dd988f35 fix: Improve thinking tag removal with more aggressive cleaning
- Add multiple regex passes to handle various think tag scenarios
- Remove standalone <think> and </think> tags that might remain
- Clean leading whitespace after tag removal
- Add debug logging to track text cleaning process
- Handle streaming cases where tags appear before closing tags arrive

This provides more robust cleaning to ensure no think tags appear
in the final message content during streaming scenarios.
2025-06-24 17:35:14 +10:00
Glen Maddern
9a825d5afc fix: Remove thinking XML tags from main message content
- Add regex-based cleaning to remove <think>...</think> tags from display text
- Handle both closed and unclosed think tags in streaming content
- Apply cleaning only for reasoning-capable models to avoid unnecessary processing
- Update conversation content with cleaned response instead of raw response

This ensures thinking tags are extracted for reasoning display but don't
appear in the main message content, providing a clean user experience.
2025-06-24 17:28:08 +10:00
Glen Maddern
f53bc6867b Added a simpe Hono server to test 2025-06-24 17:26:16 +10:00
Glen Maddern
25857bc354 fix: Use extractReasoningMiddleware to properly parse thinking blocks
- Import extractReasoningMiddleware and wrapLanguageModel from AI SDK
- Wrap reasoning-capable models with extractReasoningMiddleware
- Use 'think' as tagName to parse <think> XML blocks from models
- Enable startWithReasoning option to handle models missing reasoning tags
- Extract reasoning from result.reasoning after stream completes
- Remove manual reasoning event handling and provider-specific config

This fixes the issue where thinking blocks appeared as raw XML tags
instead of parsed reasoning content. The middleware automatically
extracts reasoning from <think> tags and exposes it via result.reasoning.
2025-06-24 16:47:04 +10:00
Glen Maddern
62000dcdac feat: Add reasoning token support with expandable thinking blocks
- Add reasoning field to AssistantMessage type
- Create ReasoningBlock component with truncate/expand functionality
- Add reasoning-capable models (Qwen QwQ, DeepSeek R1, Qwen 3 32B)
- Implement reasoning event handling in stream processing
- Enable reasoning format for Groq and Anthropic models
- Style reasoning blocks with grey border and reduced font size
- Display reasoning above assistant messages when available

The reasoning blocks show truncated thinking tokens by default and
expand on click to show full reasoning process from models like
Qwen3-32b that support step-by-step reasoning output.
2025-06-24 16:41:56 +10:00
Glen Maddern
ace85a6c69 Added a simple example server for the demo 2025-06-24 16:19:32 +10:00
Glen Maddern
43dc39df96 BG css tweaks 2025-06-24 15:58:42 +10:00
Glen Maddern
8049c6bebe I am dum. CSS is smrt 2025-06-24 14:04:27 +10:00
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