0.1.1 • Published 7 months ago
use-ollama v0.1.1
useOllama
A custom hook that allows you to use the Ollama API in your React project.
Installation
npm install use-ollama
API
For more information on the Ollama API, visit the Ollama API documentation.
<OllamaProvider
host="localhost" // string - host of the Ollama API
/>
const {
loading, // boolean - Loading state indicator
error, // string - Error message
response, // object - Response from the API
chat, // function - Generate the next message in a chat with a provided model
generate, // function - Generate a response for a given prompt with a provided model
pull, // function - Download a model from the ollama library
push, // function - Upload a model to a model library. Requires registering for ollama.ai and adding a public key first
create, // function - Create a model from a Modelfile
remove, // function - Delete a model and its data
copy, // function - Copy a model. Creates a model with another name from an existing model
list, // function - List models that are available locally on the host
show, // function - Show information about a model including details, modelfile, template, parameters, license, and system prompt
embeddings // function - Generate embeddings from a model
} = useOllama();
Usage
Here is a really simple example of how you can use the hook to create a chat-like app.
import { useEffect, useState } from 'react';
import { OllamaProvider, useOllama } from 'use-ollama';
const App = () => {
return (
<OllamaProvider host="localhost">
<Component />
</OllamaProvider>
)
}
const Component = () => {
const { chat, response, error } = useOllama();
const [ message, setMessage ] = useState('');
const [ messages, setMessages ] = useState([]);
const handleMessageChange = event => {
setMessage(event.target.value)
}
const handleMessageSend = event => {
setMessages([
...messages,
{
role: 'user',
content: message
}
]);
}
useEffect(() => {
const isLatestMessageFromUser = () => (
messages[messages.length - 1]?.role === 'user'
)
const sendMessage = async () => {
const message = {
role: 'assistant',
content: ''
}
setMessages([
...messages,
message
]);
await chat( {
model: 'llama3',
messages: messages.map( message => ( {
role: message.role,
content: message.content
} ) ),
stream: true
} )
}
if( messages.length > 0 && isLatestMessageFromUser() ) {
sendMessage()
}
}, [messages, chat]);
useEffect(() => {
const collectResponse = async response => {
const message = messages[messages.length - 1]
for await ( const part of response ) {
message.content += part.message.content
setMessages([
...messages.slice(0, -1),
message
])
if(part.done === true) {
break
}
}
}
if(response) {
collectResponse(response)
}
}, [response])
return (
<div>
<div>
{messages.map((message, index) => (
<div key={index}>{message.content}</div>
))}
</div>
<div>
<input
type="text"
value={message}
onChange={handleMessageChange}
/>
<button onClick={handleMessageSend}>Send</button>
</div>
<div>{error}</div>
</div>
)
}
export default App
License
This project is licensed under the MIT License - see the LICENSE file for details.