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¶
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