@v0-sdk/react 0.1.1 → 0.2.0

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2025 Vercel, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -1,5 +1,7 @@
 # @v0-sdk/react
 
+> **⚠️ Developer Preview**: This SDK is currently in beta and is subject to change. Use in production at your own risk.
+
 React components for rendering content from the v0 Platform API.
 
 ## Installation
@@ -35,20 +37,68 @@ function ChatMessage({ apiResponse }) {
 
 ### With Streaming
 
+The package provides built-in support for streaming responses from v0 API:
+
 ```tsx
-import { Message } from '@v0-sdk/react'
+import { StreamingMessage } from '@v0-sdk/react'
+import { createClient } from 'v0-sdk'
 
-function StreamingMessage({ apiResponse, isStreaming }) {
-  const content = JSON.parse(apiResponse.content)
+const v0 = createClient()
+
+function ChatDemo() {
+  const [stream, setStream] = useState<ReadableStream<Uint8Array> | null>(null)
+
+  const handleSendMessage = async (message: string) => {
+    const response = await v0.chats.create({
+      message,
+      responseMode: 'experimental_stream',
+    })
+    setStream(response)
+  }
 
   return (
-    <Message
-      content={content}
-      messageId={apiResponse.id}
-      role={apiResponse.role}
-      streaming={isStreaming}
-      isLastMessage={true}
-    />
+    <div>
+      {stream && (
+        <StreamingMessage
+          stream={stream}
+          messageId="demo-message"
+          role="assistant"
+          onComplete={(content) => console.log('Stream complete:', content)}
+        />
+      )}
+    </div>
+  )
+}
+```
+
+### Using the Streaming Hook
+
+For more control, use the `useStreamingMessage` hook directly:
+
+```tsx
+import { useStreamingMessage, Message } from '@v0-sdk/react'
+
+function CustomStreamingComponent({
+  stream,
+}: {
+  stream: ReadableStream<Uint8Array>
+}) {
+  const { content, isStreaming, error, isComplete } =
+    useStreamingMessage(stream)
+
+  if (error) return <div>Error: {error}</div>
+
+  return (
+    <div>
+      <div>Status: {isStreaming ? 'Streaming...' : 'Complete'}</div>
+      <Message
+        content={content}
+        streaming={isStreaming}
+        isLastMessage={true}
+        messageId="custom-streaming"
+        role="assistant"
+      />
+    </div>
   )
 }
 ```
@@ -424,4 +474,4 @@ const myMessage: MessageProps = {
 
 ## License
 
-MIT
+Apache 2.0