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 Agentic AI 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 One 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¶

File location is frontend/.

Prerequisites¶

# Required versions
Node.js >= 18.0.0
npm >= 9.0.0

Installation¶

cd frontend
npm install

Running Local Server¶

Make sure backend server is already running
Run the following:
```
cd frontend
npm run dev
```
Browse 127.0.0.1:8000

Integration with Grit One SDK¶

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

Example Usage¶

Key Integration Patterns¶

API Communication:

// CSRF token handling
const csrfToken = getCookie('csrftoken')

// Secure REST API call
const response = await fetch('/api/endpoint/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRFToken': csrfToken || '',
    'X-Requested-With': 'XMLHttpRequest',
  },
  credentials: 'same-origin',
  body: JSON.stringify(data),
})

State Management:

// React hooks for component state
const [data, setData] = useState<DataType[]>([])
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState<string | null>(null)

Modern React (JSX Transform):

// No React import needed for JSX (React 17+)
import { useState, useEffect } from 'react'

export function MyComponent() {
  return <div>...</div>
}

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