Grit Web SDK¶

Overview¶

Grit Web SDK is a modern, cloud-native frontend framework designed to create responsive and scalable web applications. Built on top of industry-standard technologies, it provides a comprehensive solution for developing AI-powered chatbots and interactive web experiences with seamless backend integration.

Open on Github

Architecture¶

The Grit Web SDK employs a modular, component-based architecture that ensures maintainability and scalability:

┌─────────────────────────────────────────────────────────┐
│                   Grit Web SDK                        │
├─────────────────────────────────────────────────────────┤
│                  UI Components Layer                     │
│         (React Components, Tailwind CSS)                │
├─────────────────────────────────────────────────────────┤
│                State Management Layer                    │
│          (Context API, Custom Hooks)                    │
├─────────────────────────────────────────────────────────┤
│                 API Integration Layer                    │
│           (REST Client, WebSocket Support)              │
├─────────────────────────────────────────────────────────┤
│                  Security Layer                          │
│         (Authentication, CSRF Protection)               │
└─────────────────────────────────────────────────────────┘
                           │
                           ▼
                  Grit App Run SDK (Backend)

Key Features¶

1. AI Chatbot Framework¶

Pre-built chat interface components
Real-time message streaming
Conversation history management
Multi-modal support (text, images, files)
Customizable UI themes

2. Secure API Integration¶

Built-in REST API client with automatic retry logic
WebSocket support for real-time features
Automatic token refresh and session management
CORS-compliant request handling
Request/response interceptors for logging and monitoring

3. Component Library¶

Responsive, accessible UI components
Dark mode support
Mobile-first design approach

4. Developer Experience¶

Hot module replacement for rapid development
TypeScript support with comprehensive type definitions
Built-in linting and formatting
Comprehensive error boundaries
Development and production build configurations

Getting Started¶

Prerequisites¶

# Required versions
Node.js >= 18.0.0
npm >= 9.0.0 or yarn >= 1.22.0

Quick Start¶

# Clone the repository
git clone <repository-url>

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

# Start development server
npm run dev

Environment Configuration¶

# API Configuration
NEXT_PUBLIC_API_URL=https://api.your-domain.com
NEXT_PUBLIC_WS_URL=wss://ws.your-domain.com

# Feature Flags
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ENABLE_DEBUG=false

# Security
NEXT_PUBLIC_CSRF_TOKEN_HEADER=X-CSRF-Token

Integration with Grit One SDK¶

The Grit Web SDK is designed to work seamlessly with the Grit One SDK backend:

API Communication¶

// Example: Chat API integration
import { ChatClient } from '@grit/web-sdk';

const client = new ChatClient({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  timeout: 30000,
  headers: {
    'X-Client-Version': '1.0.0'
  }
});

// Send message
const response = await client.messages.create({
  threadId: 'thread-123',
  content: 'Hello, AI assistant!',
  metadata: {
    source: 'web-app'
  }
});

WebSocket Connection¶

// Real-time message streaming
import { StreamingClient } from '@grit/web-sdk';

const stream = new StreamingClient({
  url: process.env.NEXT_PUBLIC_WS_URL,
  reconnect: true,
  reconnectInterval: 5000
});

stream.on('message', (data) => {
  console.log('Received:', data);
});

stream.on('error', (error) => {
  console.error('Stream error:', error);
});

Use Cases¶

1. AI Customer Support Chatbot¶

Build intelligent customer support interfaces with conversation history, agent handoff, and knowledge base integration.

2. Educational Assistant¶

Create interactive learning experiences with AI tutors, progress tracking, and personalized content delivery.

3. Business Analytics Dashboard¶

Develop data visualization interfaces with natural language querying capabilities and real-time updates.

4. Content Generation Platform¶

Build tools for AI-assisted content creation with live preview, version control, and collaboration features.

Performance Optimization¶

Code Splitting: Automatic route-based code splitting
Image Optimization: Next.js Image component with lazy loading
Bundle Analysis: Built-in webpack bundle analyzer
Caching Strategy: Service worker support for offline functionality
CDN Integration: Static asset optimization and edge caching

Security Considerations¶

Content Security Policy (CSP): Configurable headers for XSS protection
HTTPS Enforcement: Automatic redirect and HSTS headers
Input Sanitization: Built-in XSS protection for user inputs
Authentication: JWT-based auth with secure token storage
Rate Limiting: Client-side request throttling