+ {toolkits.map(tk => (
+
+
{tk.name}
+ {tk.isConnected ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+ );
+}
+```
+
+## Connected Account Sharing
+
+**Connected accounts are shared between sessions** (tied to user ID and auth configs, not individual sessions).
+
+```typescript
+// Both sessions use the same Gmail connected account
+const session1 = await composio.create('user_123', { toolkits: ['gmail'] });
+const session2 = await composio.create('user_123', { toolkits: ['gmail', 'slack'] });
+
+// ✅ Connected accounts shared across sessions
+// ✅ No need to reconnect for each session
+```
+
+### Override Connected Accounts
+
+```typescript
+// Override which connected account to use
+const session = await composio.create('user_123', {
+ toolkits: ['gmail'],
+ connectedAccounts: {
+ gmail: 'conn_specific_account_id' // Use specific account
+ }
+});
+```
+
+### Override Auth Config
+
+```typescript
+// Override which auth config to use
+const session = await composio.create('user_123', {
+ toolkits: ['gmail'],
+ authConfig: {
+ gmail: 'auth_config_custom_id' // Use custom auth config
+ }
+});
+```
+
+## Complete Chat Application
+
+```typescript
+// app/api/chat/route.ts
+import { Composio } from '@composio/core';
+import { VercelProvider } from '@composio/vercel';
+import { streamText } from 'ai';
+import { openai } from '@ai-sdk/openai';
+
+const composio = new Composio({ provider: new VercelProvider() });
+
+export async function POST(req: Request) {
+ const { userId, messages, selectedToolkits } = await req.json();
+
+ const session = await composio.create(userId, {
+ toolkits: selectedToolkits,
+ manageConnections: true
+ });
+
+ const tools = await session.tools();
+
+ const result = await streamText({
+ model: openai('gpt-4o'),
+ messages,
+ tools,
+ maxSteps: 10
+ });
+
+ return result.toDataStreamResponse();
+}
+```
+
+```typescript
+// app/page.tsx - Chat UI
+'use client';
+import { useChat } from 'ai/react';
+import { useState } from 'react';
+
+export default function ChatPage() {
+ const [selectedToolkits, setSelectedToolkits] = useState(['gmail']);
+
+ const { messages, input, handleInputChange, handleSubmit } = useChat({
+ api: '/api/chat',
+ body: { userId: 'user_123', selectedToolkits }
+ });
+
+ return (
+