Spaik SDK Material

Material UI components for building AI chat interfaces.

Spaik SDK is an open-source project developed by engineers at Siili Solutions Oyj. This is not an official Siili product.

Installation

``bash
npm install spaik-sdk-material
`

Requires peer dependencies:

`bash
npm install spaik-sdk-react react react-dom
`

Quick Start

`tsx
import { AgentSdkClientProvider, AgentSdkClient } from 'spaik-sdk-react';
import { AgentChat, AgentThemeProvider } from 'spaik-sdk-material';

const client = new AgentSdkClient({ baseUrl: 'http://localhost:8000' });

function App() {
return (





);
}
`

Components

$3

Full chat interface with sidebar and message area.

`tsx
import { AgentChat } from 'spaik-sdk-material';


`

$3

Message list with input, without sidebar.

`tsx
import { ChatPanel } from 'spaik-sdk-material';


`

$3

Thread list for navigation.

`tsx
import { ThreadSidebar } from 'spaik-sdk-material';

onThreadSelect={setSelectedThreadId}
selectedThreadId={selectedThreadId}
/>
`

$3

Individual message display.

`tsx
import { MessageCard } from 'spaik-sdk-material';


`

$3

Chat input with attachments.

`tsx
import { MessageInput } from 'spaik-sdk-material';

onSend={(content, attachments) => sendMessage(threadId, { content, attachments })}
disabled={isStreaming}
/>
`

$3

`tsx
import { SpeakButton, PushToTalkButton } from 'spaik-sdk-material';

// Text-to-speech for a message
b.content).join('')} />

// Voice input

`

Theming

$3

`tsx
import { AgentThemeProvider } from 'spaik-sdk-material';




`

$3

`tsx
import { AgentThemeProvider, createAgentTheme } from 'spaik-sdk-material';

const theme = createAgentTheme({
palette: {
primary: { main: '#1976d2' },
background: { default: '#f5f5f5' },
},
messageColors: {
user: '#e3f2fd',
assistant: '#fff',
},
});




`

$3

Access theme in components:

`tsx
import { useAgentTheme } from 'spaik-sdk-material';

function MyComponent() {
const theme = useAgentTheme();
return

;
}
`

Message Blocks

Components for different block types:

`tsx
import {
TextBlock,
ReasoningBlock,
ToolCallBlock,
ErrorBlock,
} from 'spaik-sdk-material';

// Automatically rendered by MessageCard, or use directly:




`

Markdown

Built-in markdown rendering with GFM support:

`tsx
import { MarkdownRenderer } from 'spaik-sdk-material';


`

Development

`bash
bun install
bun run build
bun run dev # Watch mode
bun run type-check
bun run lint
``

License

MIT - Copyright (c) 2026 Siili Solutions Oyj