SPARC (Specification, Pseudocode, Architecture, Refinement, and Completion) Framework UI Components
npm install @ruv/sparc-uiA comprehensive React component library for the SPARC (Specification, Pseudocode, Architecture, Refinement, and Completion) Framework. This library provides a robust set of UI components designed to streamline the development of AI-powered applications.
The SPARC UI Framework is built on modern web technologies and best practices, offering:
- AI-First Architecture: Deep integration with multiple LLM providers
- Component-Driven Design: Modular, reusable components following atomic design principles
- Type Safety: Full TypeScript support with comprehensive type definitions
- Modern Styling: Built with Tailwind CSS for responsive and customizable designs
- Accessibility: ARIA-compliant components following WCAG guidelines
- Framework Agnostic: Core components work with any React-based framework
``bash`
npm install @ruv/sparc-uior
yarn add @ruv/sparc-uior
pnpm add @ruv/sparc-ui
`bashE2B API Key (Required) - Get your key at https://e2b.dev/
E2B_API_KEY="your-e2b-api-key"
$3
`bash
Site Configuration
NEXT_PUBLIC_SITE_URL="your-site-url"UI Configuration
NEXT_PUBLIC_NO_API_KEY_INPUT="true"
NEXT_PUBLIC_NO_BASE_URL_INPUT="true"Rate Limiting
RATE_LIMIT_MAX_REQUESTS="100"
RATE_LIMIT_WINDOW="60"Vercel/Upstash KV (for short URLs and rate limiting)
KV_REST_API_URL="your-kv-api-url"
KV_REST_API_TOKEN="your-kv-api-token"Supabase Authentication
SUPABASE_URL="your-supabase-url"
SUPABASE_ANON_KEY="your-supabase-anon-key"PostHog Analytics
NEXT_PUBLIC_POSTHOG_KEY="your-posthog-key"
NEXT_PUBLIC_POSTHOG_HOST="your-posthog-host"
`
Core Features
$3
The framework provides seamless integration with multiple AI providers:
`tsx
// OpenAI Integration
provider="openai"
model="gpt-4-turbo-preview"
temperature={0.7}
maxTokens={2000}
systemPrompt="You are a helpful assistant..."
/>// Anthropic Integration
provider="anthropic"
model="claude-3-opus-20240229"
temperature={0.5}
maxTokens={4000}
/>
// Custom Provider Integration
provider="custom"
endpoint="https://your-api.com/v1/chat"
headers={{
'Authorization': 'Bearer your-token'
}}
/>
`$3
Secure, sandboxed code execution powered by E2B with support for multiple development environments:
#### Available Templates
- Gradio Developer: Build ML/AI interfaces with Gradio (Port: 7860)
- Next.js Developer: Create React applications with Next.js (Port: 3000)
- Streamlit Developer: Develop data apps with Streamlit (Port: 8501)
- Vue Developer: Build Vue/Nuxt applications (Port: 3000)
`tsx
// Example: Using a sandbox template
mode="code"
template="gradio-developer" // Specify the template
code={[{
file_path: "app.py",
file_content:
}]}
port={7860} // Template-specific port
onExecute={async (result) => {
const { url, error } = result;
if (error) {
console.error('Execution failed:', error);
} else {
console.log('App running at:', url);
}
}}
/>
`For detailed template documentation and implementation guides, see sandbox-templates/README.md.
$3
#### Theme Customization
`tsx
import { ThemeProvider } from '@ruv/sparc-ui'; theme={{
colors: {
primary: '#007AFF',
secondary: '#5856D6',
background: '#ffffff',
text: '#000000'
},
typography: {
fontFamily: 'Inter, system-ui, sans-serif',
fontSize: {
base: '16px',
heading: '24px'
}
},
spacing: {
base: '4px',
large: '8px'
}
}}
>
`#### Component Composition
`tsx
import { ChatInput, Preview, FragmentCode, useChat } from '@ruv/sparc-ui';function CustomChatInterface() {
const {
messages,
isLoading,
sendMessage,
clearMessages
} = useChat({
provider: 'anthropic',
model: 'claude-3-opus-20240229'
});
return (
{messages.map((msg) => (
{msg.type === 'code' ? (
code={msg.content}
language={msg.language}
showLineNumbers
enableCopy
theme="github-dark"
/>
) : (
mode="markdown"
content={msg.content}
enableMath
enableDiagrams
/>
)}
))}
onSubmit={sendMessage}
suggestions={[
'Explain this code',
'Generate unit tests',
'Optimize performance'
]}
autoComplete={{
enable: true,
source: 'codebase'
}}
/>
);
}
`$3
#### Code Analysis and Transformation
`tsx
import { FragmentCode, useCodeAnalysis } from '@ruv/sparc-ui';function CodeAnalyzer() {
const { analyze, refactor } = useCodeAnalysis();
const handleAnalyze = async (code) => {
const analysis = await analyze(code, {
metrics: ['complexity', 'maintainability'],
suggestions: true,
security: true
});
const refactored = await refactor(code, {
target: 'performance',
preserveLogic: true
});
return { analysis, refactored };
};
return (
onAnalyze={handleAnalyze}
showMetrics
enableRefactoring
diffView
/>
);
}
`#### Real-time Collaboration
`tsx
import { CollaborativeEditor } from '@ruv/sparc-ui'; mode="pair-programming"
room="project-123"
participants={{
max: 5,
roles: ['driver', 'navigator']
}}
features={{
cursor: true,
chat: true,
voice: true
}}
persistence={{
enable: true,
provider: 'local-storage'
}}
/>
`Performance Optimization
$3
The package supports tree-shaking and code splitting:
`tsx
// Import only what you need
import { ChatInput } from '@ruv/sparc-ui/chat';
import { Preview } from '@ruv/sparc-ui/preview';
`$3
`tsx
import { lazy, Suspense } from 'react';const ChatInput = lazy(() => import('@ruv/sparc-ui/chat'));
const Preview = lazy(() => import('@ruv/sparc-ui/preview'));
function App() {
return (
}>
);
}
`Security Considerations
- All code execution is sandboxed using E2B's secure environment
- API keys are never exposed to the client
- Rate limiting prevents abuse
- Input validation and sanitization on all user inputs
- Regular security audits and dependency updates
Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development
`bash
Install dependencies
npm installRun development server
npm run devBuild package
npm run buildRun tests
npm testRun linting
npm run lint
``- Documentation: https://sparc-ui.dev
- Issues: GitHub Issues
- Discord: Join our community
This project is licensed under the Apache 2 License. See LICENSE file for details.