SPARC UI Framework

A 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.

Overview

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

Quick Start

$3

``bash
npm install @ruv/sparc-ui


or

`bash


E2B API Key (Required) - Get your key at https://e2b.dev/

`bash


Site Configuration

`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:
import gradio as gr
def greet(name): return f"Hello {name}!"
demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

}]}
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 (


`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

Support

- Documentation: https://sparc-ui.dev
- Issues: GitHub Issues
- Discord: Join our community

License

This project is licensed under the Apache 2 License. See LICENSE file for details.