Skip to content

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.

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