Changelog

Chat requests in Speakeasy Elements now execute client-side, simplifying the architecture and improving responsiveness. The chat handler has been removed from the server package as chat requests now happen directly from the client. A new session handler has been introduced for backend implementations that need server-side session management.

Features

• Client-side chat requests - Chat requests now execute directly from the client, reducing server-side complexity and improving response times.
• Session handler - A new session handler has been added to the server package for consumers who need backend session management.

Bug fixes

• TypeDoc improvements - Fixed TSDoc comments for multiple type definitions in the Elements library, improving developer documentation.

Speakeasy Elements is a library of UI primitives for building chat-like experiences for MCP Servers. The first release of Speakeasy 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://ai.speakeasy.com/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 Speakeasy Elements documentation to get started.