←back to changelog

ChatBotKit React SDK version 1.6.0 is out

ChatBotKit React SDK Version 1.6.0 is a groundbreaking update that introduces enhancements, and innovative components designed to synergize seamlessly with React Server-Side Components and Next.js Server Functions.

We are thrilled to announce the release of the ChatBotKit React SDK Version 1.6.0, a groundbreaking update that introduces an array of enhancements, bug fixes, and innovative components designed to synergize seamlessly with React Server-Side Components and Next.js Server Functions. This latest version empowers developers with the capability to stream responses from server functions directly to the client, offering full streaming support in a manner that is both efficient and user-friendly.

Key Features of Version 1.6.0

  • Enhanced Streaming Capabilities: With full streaming support, ChatBotKit React SDK 1.6.0 allows for direct and dynamic response streaming from server to client, ensuring a smooth and responsive user experience.
  • Simplified Mechanisms: Acknowledging the complexity and bloat found in other solutions, such as the Vercel AI SDK, ChatBotKit has meticulously refined its mechanisms to offer a straightforward, yet powerful alternative that developers will find both accessible and superior.
  • New Components and Concepts: The introduction of powerful new concepts and components is specifically tailored to fit well with React Server-Side Components and Next.js Server Functions, enhancing flexibility and creativity in web development.
  • Stateless Example Integration: A stateless example utilizing the ChatbotKit React components in a Next.js application showcases the practical application and benefits of the SDK's new features. This example can be explored further at ChatBotKit Node SDK Example.
See The Developer Insights

This SDK version introduces a streamlined approach to initiating conversations and managing conversation states through server functions and components. Consider the following example:

File app/pages.jsx:

import ChatArea from '../components/ChatArea.jsx'

export default function Page() {
  return <ChatArea />
}

FIle components/ChatArea.jsx:


'use client'

import { ChatInput, useConversationManager } from '@chatbotkit/react'
import { complete } from '../actions/conversation.js'

export default function ChatArea() {
  const {
    thinking,
    
    text,
    setText,
    
    messages,
    
    submit,
  } = useConversationManager({
    endpoint: complete,
  })

  return (
    <div>
      <div>
        {messages.map(({ id, type, text }) => {
          switch (type) {
            case 'user':
              return (
                <div key={id}>
                  <strong>user:</strong> {text}
                </div>
              )

            case 'bot':
              return (
                <div key={id}>
                  <strong>bot:</strong> {text}
                </div>
              )
          }
        })}
        {thinking ? (
          <div key="thinking">
            <strong>bot:</strong> thinking...
          </div>
        ) : null}
      </div>
      <ChatInput
        value={text}
        onChange={(e) => setText(e.target.value)}
        onSubmit={submit}
        placeholder="Type something..."
        style={{
          border: 0,
          outline: 'none',
          resize: 'none',
          width: '100%',
          marginTop: '10px',
        }}
      />
    </div>
  )
}

File actions/conversation.js

'use server'

import { ChatBotKit } from '@chatbotkit/sdk'
import { stream } from '@chatbotkit/react/utils/stream'

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

export async function complete({ messages }) {
  return stream(
    cbk.conversation.complete(null, {
      messages,
    })
  )
}

The actions/conversation.js file demonstrates how to employ the ChatBotKit SDK and the stream function for efficient conversation handling. Meanwhile, the ChatArea.jsx component offers a stateless implementation example, illustrating the use of useConversationManager for conversation state management, along with an AutoTextarea component for user inputs. Furthermore, the app/page.jsx ties these components together, providing a concise example of how to integrate ChatBotKit's capabilities into a Next.js page.

We are dedicated to delivering cutting-edge tools and SDKs to developers, enabling them to build sophisticated conversational AI chatbots and interactive experiences. With a focus on ease of use, scalability, and performance, ChatBotKit continues to push the boundaries of what's possible in conversational AI technology and web development.

NodeJSReactSDKfeatureAIconversational AI