Your customers 
hate 
learning
 
your SDK.

Catch is a AI coding agent that install SDKs into user’s codebase.

Say goodbye to extensive documentation & back-and-forth emails.

Get a custom demo

Put this on your docs

Try this on my code
Install Amplitudeappend-at/catch
assistantassistant

This integration process should take approximately 2-3 hours for an experienced developer to implement and test thoroughly.

Overview

  • Install Amplitude Browser SDK using npm in the project directory.
  • Initialize Amplitude SDK in the root layout component (apps/www/app/layout.tsx).
  • Set up user properties (preferredLanguage and lastLoginDate) using a custom hook.
  • Implement custom events (SDK Integration Guide Generation, Code Suggestion Applied, View Artifact, Guide Exported) using another custom hook.
  • Integrate these events into relevant parts of the application (various components and pages).

Testing

  • Verify Amplitude SDK initialization in the browser console.
  • Check if user properties are correctly set upon application load.
  • Trigger each custom event and confirm they are tracked in Amplitude dashboard.
  • Test different user interactions to ensure all events are captured accurately.
  • Verify that sensitive information is not being tracked or logged.
useruser

In Chat Artifact, how can I send an analytics event when the "expand ... lines" button is clicked?

assistantassistant

Got it. I’ll add an Amplitude event for the "expand ... lines" button in the code diff section and update the apps/www/components/chat/right-artifact.tsx file as follows:

This update includes:

  • Importing the Amplitude SDK.
  • Adding handleExpand to send an event when the "expand ... lines" button is clicked.
  • Adding an onClick handler to the span from codeFoldMessageRenderer to call handleExpand.
  • Including session ID, project info, file name, expanded line count, and version in the event.

Now, clicking the button will trigger an 'Code Diff Expanded' event in Amplitude to analyze user behavior.

useruser

Could you change SDK token into 338862ce1d73453394fb1481f136e144?

assistantassistant

Sure, I’ll update the Amplitude SDK token to 338862ce1d73453394fb1481f136e144.

Amplitude Integration and Taxonomy Setupv3
apps/www/app/layout.tsx
1
+
import * as amplitude from '@amplitude/analytics-browser';
2
+
import { useEffect } from 'react';
3
+
import { useAmplitudeUser } from '../hooks/useAmplitudeUser';
1
4
import './globals.css';
2
5
3
6
export default function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
7
+
  useEffect(() => {
8
+
    amplitude.init('338862ce1d73453394fb1481f136e144', {
9
+
      defaultTracking: {
10
+
        sessions: true,
11
+
        pageViews: true,
12
+
        formInteractions: true,
13
+
        fileDownloads: true,
14
+
      },
15
+
    });
16
+
  }, []);
17
+
18
+
  useAmplitudeUser();
19
+
4
20
  return <>{children}</>;
5
21
}
This code initializes Amplitude with default tracking options for sessions, page views, form interactions, and file downloads. It's important to note that these settings will apply globally to all pages in the application. Consider the potential impact on performance and data collection volume, especially for high-traffic applications.
apps/www/components/chat/right-artifact.tsx
4
+
import * as amplitude from '@amplitude/analytics-browser';
4
5
5
6
export default function RightArtifactPanel({
6
7
  project,
Expand 2 lines ...
9
10
  version,
10
11
  onPollingRequest,
11
12
}: RightArtifactPanelProps) {
13
+
  const handleExpand = (totalFoldedLines: number, fileName: string) => {
14
+
    amplitude.track('Code Diff Expanded', {
15
+
      category: 'Artifact',
16
+
      session_id: sessionId,
17
+
      project_id: project?.id,
18
+
      project_name: project?.productName,
19
+
      project_type: project?.type,
20
+
      file_name: fileName,
21
+
      expanded_lines: totalFoldedLines,
22
+
      version: version,
23
+
    });
24
+
  };
25
+
12
26
  return (
13
27
    <div className='flex-grow overflow-y-auto h-full'>
14
28
      {exceptIdenticalPatchFiles.map((patchFile, idx) => (
Expand 10 lines ...
25
39
            leftTitle={<PathRenderer path={patchFile.path} />}
26
40
            splitView={false}
27
41
            codeFoldMessageRenderer={(totalFoldedLines) => (
28
-
              <span className='text-xs leading-none font-mono text-primary font-medium'>
42
+
              <span 
43
+
                className='text-xs leading-none font-mono text-primary font-medium'
44
+
                onClick={() => handleExpand(totalFoldedLines, patchFile.path)}
45
+
              >
29
46
                Expand {totalFoldedLines} {totalFoldedLines === 1 ? 'line' : 'lines'}
30
47
              </span>
31
48
            )}
Expand 6 lines ...
apps/www/hooks/useAmplitudeUser.ts
1
+
import { useEffect } from 'react';
2
+
import * as amplitude from '@amplitude/analytics-browser';
3
+
export function useAmplitudeUser() {
4
+
  useEffect(() => {
5
+
    const setUserProperties = async () => {
6
+
      const preferredLanguage = navigator.language || 'en-US';
7
+
      const lastLoginDate = new Date().toISOString();
8
+
      amplitude.identify(new amplitude.Identify()
9
+
        .set('preferredLanguage', preferredLanguage)
10
+
        .set('lastLoginDate', lastLoginDate)
11
+
      );
12
+
    };
13
+
    setUserProperties();
14
+
  }, []);
15
+
}
This custom hook sets user properties for Amplitude tracking. It's using the browser's language settings and the current timestamp for the last login date. Be aware that this will update the user properties on every mount of the component using this hook, which might not be the desired behavior for the 'lastLoginDate' property in all cases.
apps/www/package.json
12
12
"dependencies": {
13
13
  "@ai-sdk/anthropic": "^0.0.50",
14
14
  "@ai-sdk/cohere": "^0.0.25",
15
+
  "@amplitude/analytics-browser": "^2.3.8",
15
16
  "@catch/data": "workspace:*",
16
17
  "@catch/transactional": "workspace:*",
17
18
  "@catch/type": "workspace:*",
SDK 
setup
 makes your product 
slower to 
generate revenue
.
SDK setup is a time-consuming hassle for both user and the company.
It often takes a months with endless back-and-forth emails.
Let Catch Do It
Using Catch is like sending a solution engineer on-site.
Seamless setup in minutes. Empower customers, amplify growth.
Chat to Pull Request
Chat to Pull Request
Users can chat and get pull request. It will reduces customer support workloads.
“Try this on my code” Button
“Try this on my code” Button
Just put a button on your docs. Then users can install your SDK in minutes.
SDK Migration Copilot
SDK Migration Copilot
Take your competitors’ users in a minute. AI is good at code transformation.
Import Local Code with CLI
Import Local Code with CLI
Quickly add local files to your project with a CLI command.
How it works?
Connect your repo
Connect to GitHub and select a repo to work on.
You can also connect your local code with CLI.
 Catch drastically cut down our time.
I loved how it magically inserted codes in the right places on our app’s codebase by reusing our existing logic.
Daehyun Yoon
Co-Founder of Standada
Secure by design.
E2E Encryption
Code uploads are E2E encrypted, and protected by AES-256 CDC and RSA-4096 encryption.
Local Upload
Connect your local project using CLI with a secure connection, even if you are not using GitHub. Learn More
Sandboxed Environment
Codes are separately stored on a E2E-encrypted sandbox, and deleted after a session.
Interested in?
We’ll get in touch in 24 hours.
Get a custom demo