Transforming Conversational AI Development with React Server Actions

We proudly announce the launch of version 1.8.0 of its React SDK, marking a significant leap forward in the development of conversational AI agents and bots. This latest version introduces an innovative approach to building AI agents utilizing React, React Server Actions, and React Server Components, offering developers unprecedented ease and flexibility in creating conversational interfaces.

The 1.8.0 release is highlighted by the introduction of several powerful primitives that enable the definition of an AI agent with functional access. These functions can either return a result or render a React component, which can be progressively rendered using streaming. This breakthrough allows for the creation of applications that blend conventional chatbot interactions with rich UI components, paving the way for a new hybrid model of user experience.

Version 1.8.0 of the SDK includes a preview feature that demonstrates the full capabilities of these new developments. Developers can now experiment with this feature to explore the potential of combining chatbot functionalities with advanced UI components, leading to the creation of more engaging and interactive applications.

To showcase the capabilities of the new version, ChatBotKit has provided an example application that leverages these new features, available at GitHub Example. This example serves as a guide for developers looking to harness the power of the updated SDK in their projects.

The ChatBotKit team is excited to see the innovative applications developers will create with the 1.8.0 release. The integration of React technologies with conversational AI opens up new possibilities for the development of interactive and user-friendly applications. The SDK is available for download, and developers are encouraged to explore the new features and share their feedback for future improvements.

'use server'

import CalendarEvents from '../components/CalendarEvents.jsx'

import { streamComplete } from '@chatbotkit/react/actions/complete'
import { ChatBotKit } from '@chatbotkit/sdk'

const cbk = new ChatBotKit({
  secret: process.env.CHATBOTKIT_API_SECRET,
})

export async function complete({ messages }) {
  return streamComplete({
    client: cbk.conversation,

    messages,

    functions: [
      {
        name: 'getUserName',
        description: 'Get the authenticated user name',
        parameters: {},
        handler: async () => {
          return 'John Doe'
        },
      },

      {
        name: 'getCalendarEvents',
        description: 'Get a list of calendar events',
        parameters: {},
        handler: async () => {
          const events = [
            { id: 1, title: 'Meeting with Jane Doe' },
            { id: 2, title: 'Meeting with Jill Doe' },
          ]

          return {
            children: <CalendarEvents events={events} />, // MAGIC!!!

            result: {
              events,
            },
          }
        },
      },

      {
        name: 'declineCalendarEvent',
        description: 'Decline a calendar event',
        parameters: {
          type: 'object',
          properties: {
            id: {
              type: 'number',
              description: 'The ID of the event to decline',
            },
          },
          required: ['id'],
        },
        handler: async ({ id }) => {
          return `You have declined the event with ID ${id}`
        },
      },
    ],
  })
}