Introducing Gram Elements
Gram Elements is a library of UI primitives for building chat-like experiences for MCP Servers.
The first release of Gram Elements includes:
- An all-in-one
<Chat />component that encapsulates the entire chat lifecycle, including built-in support for tool calling and streaming responses - A powerful configuration framework to refine the chat experience, including different layouts, theming, and much more
Getting started
Here’s a preview of adding Elements to a chat application:
import {
GramElementsProvider,
Chat,
type ElementsConfig
} from '@gram-ai/elements'
import '@gram-ai/elements/elements.css'
const config: ElementsConfig = {
projectSlug: '{project_slug}',
mcp: 'https://app.getgram.ai/mcp/{mcp_slug}',
chatEndpoint: '/chat/completions',
variant: 'widget',
welcome: {
title: 'Hello!',
subtitle: 'How can I help you today?',
},
composer: {
placeholder: 'Ask me anything...',
},
modal: {
defaultOpen: true,
},
}
export const App = () => {
return (
<GramElementsProvider config={config}>
<Chat />
</GramElementsProvider>
)
}Check out the Gram Elements documentation to get started.