v0-sdk 0.0.9 → 0.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -44
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,27 +39,13 @@ const chat = await v0.chats.create({
|
|
|
39
39
|
message: 'Create a responsive navbar with Tailwind CSS',
|
|
40
40
|
system: 'You are an expert React developer',
|
|
41
41
|
})
|
|
42
|
-
|
|
43
42
|
console.log(`Chat created: ${chat.url}`)
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
### Preview Generated Code
|
|
47
|
-
|
|
48
|
-
```typescript
|
|
49
|
-
// Get the latest version for live preview
|
|
50
|
-
const latestMessage = chat.messages[chat.messages.length - 1]
|
|
51
|
-
const versionId = latestMessage.id
|
|
52
|
-
|
|
53
|
-
// Get the iframe URL for live preview
|
|
54
|
-
const iframe = await v0.chats.findIframe({
|
|
55
|
-
chatId: chat.id,
|
|
56
|
-
versionId: versionId,
|
|
57
|
-
})
|
|
58
43
|
|
|
59
|
-
|
|
44
|
+
// Preview generated code
|
|
45
|
+
console.log(`Preview URL: ${chat.demo}`)
|
|
60
46
|
|
|
61
47
|
// Use in your application
|
|
62
|
-
const previewHtml = `<iframe src="${
|
|
48
|
+
const previewHtml = `<iframe src="${chat.demo}" width="100%" height="600px"></iframe>`
|
|
63
49
|
```
|
|
64
50
|
|
|
65
51
|
## Authentication
|
|
@@ -110,32 +96,6 @@ const response = await v0.chats.createMessage({
|
|
|
110
96
|
})
|
|
111
97
|
```
|
|
112
98
|
|
|
113
|
-
### Live Preview with iframes
|
|
114
|
-
|
|
115
|
-
One of the most powerful features of the v0 SDK is the ability to render live previews of generated code using iframes. This allows you to see the AI-generated components and applications running in real-time.
|
|
116
|
-
|
|
117
|
-
```typescript
|
|
118
|
-
// Create a chat and get the generated code
|
|
119
|
-
const chat = await v0.chats.create({
|
|
120
|
-
message: 'Create a todo app with React',
|
|
121
|
-
})
|
|
122
|
-
|
|
123
|
-
// Get the latest version from the chat messages
|
|
124
|
-
const latestMessage = chat.messages[chat.messages.length - 1]
|
|
125
|
-
const versionId = latestMessage.id // or extract from chat.latestBlockId
|
|
126
|
-
|
|
127
|
-
// Get the iframe URL for live preview
|
|
128
|
-
const iframe = await v0.chats.findIframe({
|
|
129
|
-
chatId: chat.id,
|
|
130
|
-
versionId: versionId,
|
|
131
|
-
})
|
|
132
|
-
|
|
133
|
-
console.log(`Preview URL: ${iframe.url}`)
|
|
134
|
-
|
|
135
|
-
// Use in your application
|
|
136
|
-
const previewHtml = `<iframe src="${iframe.url}" width="100%" height="600px"></iframe>`
|
|
137
|
-
```
|
|
138
|
-
|
|
139
99
|
#### Other Chat Operations
|
|
140
100
|
|
|
141
101
|
- `v0.chats.find()` - Get chat history
|
|
@@ -143,7 +103,6 @@ const previewHtml = `<iframe src="${iframe.url}" width="100%" height="600px"></i
|
|
|
143
103
|
- `v0.chats.favorite({ chatId })` - Favorite a chat
|
|
144
104
|
- `v0.chats.unfavorite({ chatId })` - Unfavorite a chat
|
|
145
105
|
- `v0.chats.getProject({ chatId })` - Get chat's associated project
|
|
146
|
-
- `v0.chats.getVersionFrameToken({ chatId, versionId })` - Get version frame token
|
|
147
106
|
|
|
148
107
|
### Project Operations
|
|
149
108
|
|