@lineai/developer

The experience library for Line AI developer projects. This package provides tools for building developer-client interfaces, enabling seamless feedback collection and communication.

Features

• 🎯 Developer Chat Widget - Floating chat button for feedback and bug reports
• 📸 Screenshot Capture - Built-in screenshot functionality with html2canvas-pro
• 🖼️ Image Attachments - Support for multiple image uploads
• 🔐 Auth-Agnostic - Works with Clerk, Firebase, or any auth system
• 🎨 Customizable - Configurable position, colors, and behavior
• 📦 TypeScript - Full type safety

Installation

pnpm add @lineai/developer

Peer Dependencies

pnpm add react react-dom @radix-ui/react-popover lucide-react

Usage

With Clerk Authentication

import { DeveloperChat } from '@lineai/developer';
import { useAuth } from '@clerk/nextjs';

export function App() {
  const { getToken } = useAuth();

  return (
    <>
      {/* Your app content */}

      <DeveloperChat
        getAuthToken={() => getToken()}
        projectId="my-project"
        orgSlug="my-org"
      />
    </>
  );
}

With Firebase Authentication

import { DeveloperChat } from '@lineai/developer';
import { useAuth } from '@/lib/auth'; // Your Firebase auth hook

export function App() {
  const { user } = useAuth();

  return (
    <>
      {/* Your app content */}

      <DeveloperChat
        getAuthToken={async () => {
          if (!user) return null;
          return await user.getIdToken(true);
        }}
        projectId="my-project"
        orgSlug="my-org"
      />
    </>
  );
}

With Optional Project Context

When projectId and orgSlug are not provided, the API will use your organization's default repository:

<DeveloperChat
  getAuthToken={() => getToken()}
  // projectId and orgSlug are optional
  // API will use organization's default repo
/>

API Reference

DeveloperChat Props

type DeveloperChatProps = {
  // Required: Function to retrieve auth token
  getAuthToken: () => Promise<string | null>;

  // Optional: Project identifier
  projectId?: string;

  // Optional: Organization slug
  orgSlug?: string;

  // Optional: Full developer chat API endpoint URL
  // Defaults to process.env.NEXT_PUBLIC_LINE_AI_DEVELOPER_CHAT_URL
  apiUrl?: string;

  // Optional: Image upload endpoint URL
  // Defaults to process.env.NEXT_PUBLIC_LINE_AI_UPLOAD_URL or 'https://upload.getline.ai'
  uploadUrl?: string;

  // Optional: GitHub repository URL for feedback issues
  // Defaults to process.env.NEXT_PUBLIC_GITHUB_FEEDBACK_REPO_URL
  // Format: https://github.com/owner/repo
  repoUrl?: string;

  // Optional: Button position (default: 'bottom-right')
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';

  // Optional: Accent color for UI elements (default: '#3b82f6')
  accentColor?: string;

  // Optional: Open popover by default (default: false)
  defaultOpen?: boolean;

  // Optional: Callback when feedback is sent
  onSend?: (result: DeveloperChatResult) => void;

  // Optional: Callback when an error occurs
  onError?: (error: Error) => void;
};

DeveloperChatResult

type DeveloperChatResult = {
  success: boolean;
  issueUrl?: string;
  issueNumber?: number;
  error?: string;
  category?: string;
  labels?: string[];
};

Features

Screenshot Capture

Users can capture screenshots of the current page with a single click. Screenshots are automatically attached to the feedback.

Image Attachments

Users can drag-and-drop or select multiple images to attach to their feedback.

Draft Persistence

Feedback drafts are automatically saved to localStorage and restored when the user returns.

Environment Variables

# Optional: Custom developer chat API endpoint
NEXT_PUBLIC_LINE_AI_DEVELOPER_CHAT_URL=""

# Optional: Custom image upload endpoint
NEXT_PUBLIC_LINE_AI_UPLOAD_URL=

# Optional: GitHub repository URL for feedback issues
NEXT_PUBLIC_GITHUB_FEEDBACK_REPO_URL=https://github.com/owner/repo

Examples

Custom Styling

<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  position="bottom-left"
  accentColor="#10b981"
/>

Custom API Endpoint

<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  apiUrl="https://custom-api.example.com/developer-chat"
/>

With Callbacks

<DeveloperChat
  getAuthToken={() => getToken()}
  projectId="my-project"
  orgSlug="my-org"
  onSend={(result) => {
    console.log('Feedback sent:', result);
    // Show success toast
  }}
  onError={(error) => {
    console.error('Error:', error);
    // Show error toast
  }}
/>

Dynamic Project Context

export function ProjectPage({ projectId }: { projectId: string }) {
  const { getToken } = useAuth();

  return (
    <>
      {/* Your project content */}

      <DeveloperChat
        getAuthToken={() => getToken()}
        projectId={projectId} // Dynamic based on current project
        orgSlug="my-org"
      />
    </>
  );
}

License

MIT

Support

For issues or questions, contact [email protected]