Skip to content
This repository was archived by the owner on Feb 19, 2026. It is now read-only.

feat: Add Composio integration with Toolbox UI and connection management#5

Merged
alt-glitch merged 1 commit into
mainfrom
sid/connection-deletion
Jun 5, 2025
Merged

feat: Add Composio integration with Toolbox UI and connection management#5
alt-glitch merged 1 commit into
mainfrom
sid/connection-deletion

Conversation

@alt-glitch

@alt-glitch alt-glitch commented Jun 5, 2025

Copy link
Copy Markdown
Contributor

🚀 Add Composio Integration with Toolbox UI and Connection Management

Summary

This PR introduces a comprehensive Composio integration for the AI chatbot, featuring a new Toolbox UI that allows users to enable/disable AI tools and manage their third-party service connections.

Key Features

1. Toolbox UI Component 🧰

  • Added a collapsible toolbar (similar to the sidebar) that displays available Composio toolkits
  • Desktop and mobile responsive versions with smooth animations
  • Keyboard shortcut support (⌘T) for quick access
  • Visual indicators for enabled tools and connection status

2. Connection Management 🔌

  • Users can connect/disconnect third-party services (Gmail, GitHub, Slack, etc.)
  • OAuth flow integration for secure authentication
  • Real-time connection status updates
  • Delete functionality for removing existing connections

3. Enhanced Tool Integration

  • Enabled toolkits are dynamically passed to the chat API
  • Connection status is tracked and sent with each chat request
  • Only tools from enabled toolkits are made available to the AI assistant

Technical Implementation

API Changes

  • GET /api/toolkits: Fetches toolkit metadata and connection status for the authenticated user
  • POST /api/connections/initiate: Initiates OAuth connection flow for a toolkit
  • DELETE /api/connections: Removes an existing toolkit connection

State Management

  • Extended toolbar context to track both enabled toolkits and their connection status
  • Implemented proper state synchronization between UI and API

Type Safety

  • Added TypeScript types for Composio SDK responses
  • Updated Zod schemas to validate toolkit objects with connection status

File Changes

  • components/toolbar.tsx - Main toolbar component with connection management
  • app/api/toolkits/route.ts - Endpoint for fetching toolkits with connection status
  • app/api/connections/route.ts - New endpoint for deleting connections
  • app/api/connections/initiate/route.ts - OAuth flow initiation
  • components/chat.tsx - Updated to pass enabled toolkits to chat API
  • app/(chat)/api/chat/route.ts - Integrated Composio tools based on enabled toolkits
  • lib/ai/tools/composio.ts - Service layer for fetching Composio tools

User Experience

  1. Users can open the Toolbox from the chat interface
  2. Toggle switches enable/disable specific toolkits
  3. "Connect" button initiates OAuth flow in a new window
  4. Connected tools show a green checkmark and delete option
  5. Only enabled tools are available during chat conversations

Future Enhancements

  • Prompt users to connect when attempting to use unconnected tools
  • Display tool usage statistics
  • Add tool-specific settings and configurations

Testing Notes

  • Tested OAuth flows for multiple providers
  • Verified connection persistence across sessions
  • Confirmed proper error handling for failed connections
  • Validated responsive design on mobile devices

- Add collapsible Toolbox UI component for managing AI tools
- Implement OAuth connection flow for third-party services
- Add connection management with delete functionality
- Track and send connection status with chat requests
- Update chat API to use only enabled toolkit tools
- Add responsive design for desktop and mobile
- Include keyboard shortcut (⌘T) for quick access

Co-authored-by: Claude <noreply@anthropic.com>
@vercel

vercel Bot commented Jun 5, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
chat ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 5, 2025 9:39pm

@alt-glitch
alt-glitch merged commit aab02a4 into main Jun 5, 2025
3 of 4 checks passed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant