#atom

Functions that execute in the client environment when invoked by LLMs

Core Idea: Client tools are specialized functions that execute within the client environment (browser, mobile app, desktop) rather than on the server, enabling LLMs to manipulate the user interface, access client-side APIs, or provide enhanced interactive capabilities.

Key Elements

Characteristics

• Execute in the client environment (browser, mobile app)
• Affect user interface or client-side state
• Access client-specific APIs (geolocation, camera, etc.)
• Create multimodal experiences beyond text responses

Implementation Approach

1. Tool Definition
   • Register tools with the LLM system
   • Provide name, description, and parameter schema
   • No execute function in the tool definition (handled separately)

   const recommendGuitar = tool({
     name: "recommendGuitar",
     description: "Use this tool to recommend a guitar to the user",
     parameters: z.object({
       id: z.string().describe("The ID of the guitar you want to recommend")
     })
   });
   

2. **Client-Side Handler**
    
    - Implement handler to intercept tool calls
    - Process parameters from the tool call
    - Update UI or client state based on call
    
    ```javascript
    // Client-side handler in React component
    const onToolCall = useCallback((call) => {
      if (call.name === "recommendGuitar") {
        // We'll handle this client-side without sending to the server
        return "We are going to handle that on the UI side";
      }
      return undefined; // Let other tools be handled normally
    }, []);
    ```
    
3. **UI Component Integration**
    
    - Create UI components that respond to tool calls
    - Display call results in appropriate format
    - Enhance user experience with rich interactions
    
    ```jsx
    {message.role === "assistant" && message.content && (
      <div className="assistant-message">
        {/* Display regular text content */}
        <div>{message.content}</div>
        
        {/* Handle tool call UI components */}
        {message.tool_calls?.map((call) => (
          call.name === "recommendGuitar" && (
            <GuitarRecommendation key={call.id} id={call.arguments.id} />
          )
        ))}
      </div>
    )}
    ```
    

### Common Client Tool Types

- **UI Manipulation**: Show special UI components like cards, widgets, or visualizations
- **Client-Side Data Access**: Access localStorage, IndexedDB, or other client storage
- **Device APIs**: Use camera, microphone, geolocation, or other device features
- **Visualization Tools**: Create charts, graphs, or other data visualizations
- **Interactive Elements**: Add buttons, forms, or other interactive components to responses

### When to Use Client Tools

- Creating rich, interactive UI components
- Providing visual recommendations or product displays
- Accessing device features not available to the server
- Manipulating client-side state or storage
- Creating multimodal experiences combining text with other formats

### Limitations

- Cannot access server resources directly
- Limited to APIs available in the client environment
- May require additional security considerations
- Not accessible to non-UI clients (e.g., CLI tools, API calls)
- Cannot be used through MCP protocol (MCP is server-oriented)

## Additional Connections

- **Broader Context**: Function Calling (mechanism enabling tool use)
- **Applications**: Multimodal AI Interfaces (enhanced interactive experiences)
- **See Also**: Server Tools (tools that execute on the server), UI Components for AI (specialized UI elements for AI interactions)

## References

1. Blue Collar Coder video on Model Context Protocol implementation
2. Vercel AI documentation for client-side tool handling

#client-tools #tool-calling #ai-tools #client-side-execution #ui-components

---
**Connections:**
- 
---
**Sources:**
- From: Jack Herrington - Applied Model Context Protocol (MCP) In 20 Minutes