API Documentation

import { ElementsConfig } from '@gram-ai/elements'
import { useAssistantState } from '@assistant-ui/react'
 
const config: ElementsConfig = {
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  welcome: {
    title: 'Hello!',
    subtitle: 'How can I help you today?',
  },
  components: {
    Text: () => {
      const message = useAssistantState(({ message }) => message)
      const text = message.parts
        .map((part) => (part.type === 'text' ? part.text : ''))
        .join('')
 
      return (
        <div className="custom-text">
          {text}
        </div>
      )
    },
  },
}

import { ElementsConfig } from '@gram-ai/elements'
 
const CustomWelcome = () => {
  return (
    <div className="flex flex-col items-center justify-center h-full">
      <h1 className="text-4xl font-bold mb-4">Welcome to My AI Assistant!</h1>
      <p className="text-gray-600">Start chatting below</p>
    </div>
  )
}
 
const config: ElementsConfig = {
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  welcome: {
    title: 'Hello!',
    subtitle: 'How can I help you today?',
  },
  components: {
    ThreadWelcome: CustomWelcome,
  },
}

import { ElementsConfig } from '@gram-ai/elements'
import { MessagePrimitive } from '@assistant-ui/react'
 
const CustomUserMessage = () => {
  return (
    <MessagePrimitive.Root>
      <div className="my-custom-user-message">
        <div className="message-avatar">👤</div>
        <div className="message-content">
          <MessagePrimitive.Parts />
        </div>
      </div>
    </MessagePrimitive.Root>
  )
}
 
const config: ElementsConfig = {
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  welcome: {
    title: 'Hello!',
    subtitle: 'How can I help you today?',
  },
  components: {
    UserMessage: CustomUserMessage,
  },
}

import { ElementsConfig } from '@gram-ai/elements'
import {
  CustomComposer,
  CustomUserMessage,
  CustomAssistantMessage,
  CustomText,
} from './components'
 
const config: ElementsConfig = {
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  welcome: {
    title: 'Hello!',
    subtitle: 'How can I help you today?',
  },
  components: {
    Composer: CustomComposer,
    UserMessage: CustomUserMessage,
    AssistantMessage: CustomAssistantMessage,
    Text: CustomText,
  },
}

import { ElementsConfig } from '@gram-ai/elements'
 
const config: ElementsConfig = {
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  welcome: {
    title: 'Welcome!',
    subtitle: 'How can I assist you today?',
  },
}

import { ElementsConfig } from '@gram-ai/elements'
import { recommended } from '@gram-ai/elements/plugins'
import { WeatherComponent } from './components/WeatherComponent'
import { CustomText } from './components/CustomText'
 
const config: ElementsConfig = {
  systemPrompt: 'You are a helpful AI assistant.',
  projectSlug: 'my-project',
  mcp: 'https://app.getgram.ai/mcp/my-mcp-slug',
  chatEndpoint: '/api/chat',
  variant: 'widget',
  plugins: recommended,
  components: {
    Text: CustomText,
  },
  theme: {
    colorScheme: 'system',
    density: 'normal',
    radius: 'soft',
  },
  environment: {
    API_KEY: 'your-api-key',
    BASE_URL: 'https://api.example.com',
  },
  welcome: {
    title: 'Hello!',
    subtitle: 'How can I help you today?',
    suggestions: [
      {
        title: 'Get Weather',
        label: 'Check current weather',
        action: 'What is the weather like today?',
      },
      {
        title: 'Summarize',
        label: 'Summarize a document',
        action: 'Can you summarize this document for me?',
      },
    ],
  },
  composer: {
    placeholder: 'Type your message...',
  },
  modal: {
    defaultOpen: false,
    title: 'AI Assistant',
    position: 'bottom-right',
    expandable: true,
    dimensions: {
      default: {
        width: 400,
        height: 600,
        maxHeight: '90%',
      },
      expanded: {
        width: '90%',
        height: '90%',
      },
    },
  },
  model: {
    showModelPicker: true,
    defaultModel: 'anthropic/claude-sonnet-4.5',
  },
  tools: {
    components: {
      get_current_weather: WeatherComponent,
    },
  },
}