Full Stack Chat App

$
NEXT_PUBLIC_GMAIL_AUTH_CONFIG_ID=ac_1234567890
>
NEXT_PUBLIC_GITHUB_AUTH_CONFIG_ID=ac_1234567890

1
import { Composio } from '@composio/core';
2
import { VercelProvider } from '@composio/vercel';
3
4
const composio = new Composio({
5
  apiKey: process.env.COMPOSIO_API_KEY,
6
  provider: new VercelProvider(),
7
});
8
9
export default composio;

1
export async function GET() {
2
  // ... auth logic ...
3
4
  // List connected accounts to get connection IDs for each toolkit
5
  const connectedAccounts = await composio.connectedAccounts.list({
6
    userIds: [session.user.id],
7
  });
8
9
  const connectedToolkitMap = new Map();
10
  connectedAccounts.items.forEach(account => {
11
    connectedToolkitMap.set(account.toolkit.slug.toUpperCase(), account.id);
12
  });
13
14
  // ... continue with toolkit fetching ...
15
}

1
export async function GET() {
2
  // ... auth logic ...
3
  // ... connected accounts mapping ...
4
5
  const SUPPORTED_TOOLKITS = ['GMAIL', 'GOOGLECALENDAR', 'GITHUB', 'NOTION'];
6
7
  // Fetch toolkit data from slugs
8
  const toolkitPromises = SUPPORTED_TOOLKITS.map(async slug => {
9
    const toolkit = await composio.toolkits.get(slug);
10
    const connectionId = connectedToolkitMap.get(slug.toUpperCase());
11
12
    return {
13
      name: toolkit.name,
14
      slug: toolkit.slug,
15
      description: toolkit.meta?.description,
16
      logo: toolkit.meta?.logo,
17
      categories: toolkit.meta?.categories,
18
      isConnected: !!connectionId,
19
      connectionId: connectionId || undefined,
20
    };
21
  });
22
23
  const toolkits = await Promise.all(toolkitPromises);
24
  return NextResponse.json({ toolkits });
25
}

1
export async function POST(request: Request) {
2
  // ... auth and validation ...
3
4
  const { authConfigId } = requestBody;
5
6
  // Initiate connection with Composio
7
  const connectionRequest = await composio.connectedAccounts.initiate(
8
    session.user.id,
9
    authConfigId
10
  );
11
12
  return NextResponse.json({
13
    redirectUrl: connectionRequest.redirectUrl,
14
    connectionId: connectionRequest.id,
15
  });
16
}

1
export async function GET(request: Request) {
2
  // ... auth and validation ...
3
4
  const connectionId = searchParams.get('connectionId');
5
6
  // Wait for connection to complete
7
  const connection = await composio.connectedAccounts.waitForConnection(connectionId);
8
9
  return NextResponse.json({
10
    id: connection.id,
11
    status: connection.status,
12
    authConfig: connection.authConfig,
13
    data: connection.data,
14
  });
15
}

1
export async function DELETE(request: Request) {
2
  // ... auth and validation ...
3
4
  const connectionId = searchParams.get('connectionId');
5
6
  // Delete the connection
7
  await composio.connectedAccounts.delete(connectionId);
8
9
  return NextResponse.json({
10
    success: true,
11
    message: 'Connection deleted successfully',
12
  });
13
}

1
const { ... } = useChat({
2
    // ... other config ...
3
    experimental_prepareRequestBody: (body) => {
4
      // Get current toolbar state
5
      const currentToolbarState = toolbarStateRef.current;
6
      const enabledToolkits = Array.from(
7
        currentToolbarState.enabledToolkitsWithStatus.entries(),
8
      ).map(([slug, isConnected]) => ({ slug, isConnected }));
9
10
      return {
11
        // ... other fields ...
12
        enabledToolkits,
13
      };
14
    },
15
    // ... other handlers ...
16
  });

1
export async function getComposioTools(userId: string, toolkitSlugs: string[]) {
2
  // ... validation ...
3
4
  const tools = await composio.tools.get(userId, {
5
    toolkits: toolkitSlugs,
6
  });
7
  return tools || {};
8
}

1
export async function POST(request: Request) {
2
  // ... auth and parsing ...
3
4
  const toolkitSlugs = enabledToolkits?.map(t => t.slug) || [];
5
6
  const composioTools = await getComposioTools(session.user.id, toolkitSlugs);
7
8
  const result = streamText({
9
    // ... model config ...
10
    tools: {
11
      ...composioTools,
12
    },
13
  });
14
}

1
if (type === 'tool-invocation') {
2
  const { toolInvocation } = part;
3
  const { toolName, toolCallId, state, args, result } = toolInvocation;
4
5
  if (state === 'call') {
6
    return (
7
      <ToolCall
8
        key={toolCallId}
9
        toolName={toolName}
10
        args={args}
11
        isLoading={true}
12
      />
13
    );
14
  }
15
16
  if (state === 'result') {
17
    return (
18
      <ToolCall
19
        key={toolCallId}
20
        toolName={toolName}
21
        args={args}
22
        result={result}
23
        isLoading={false}
24
      />
25
    );
26
  }
27
}