Convert Figma logo to code with AI

Yonom logoassistant-ui

React Components for AI Chat 💬 🚀

2,152
358
2,152
14

Top Related Projects

31,565

🤖 Assemble, configure, and deploy autonomous AI Agents in your browser.

169,151

AutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.

32,416

Drag & drop UI to build your customized LLM flow

93,526

🦜🔗 Build context-aware reasoning applications

Examples and guides for using the OpenAI API

Quick Overview

Assistant UI is a web-based interface for interacting with AI language models, specifically designed for OpenAI's GPT models. It provides a user-friendly chat interface with features like conversation history, model selection, and customizable system prompts.

Pros

  • Easy-to-use interface for interacting with AI language models
  • Supports multiple conversations and model switching
  • Customizable system prompts for tailored AI responses
  • Open-source and easily deployable

Cons

  • Limited to OpenAI's GPT models (as of the current version)
  • Requires API key management, which may be challenging for some users
  • May lack advanced features found in more comprehensive AI platforms
  • Dependent on OpenAI's API availability and pricing

Code Examples

// Example of creating a new conversation
const conversation = new Conversation({
  model: 'gpt-3.5-turbo',
  systemPrompt: 'You are a helpful assistant.',
});
// Example of sending a message to the AI
const response = await conversation.sendMessage('Hello, how are you?');
console.log(response.content);
// Example of changing the model mid-conversation
conversation.setModel('gpt-4');

Getting Started

  1. Clone the repository:

    git clone https://github.com/Yonom/assistant-ui.git
    
  2. Install dependencies:

    cd assistant-ui
    npm install
    
  3. Set up your OpenAI API key:

    • Create a .env.local file in the root directory
    • Add your API key: OPENAI_API_KEY=your_api_key_here
  4. Start the development server:

    npm run dev
    
  5. Open your browser and navigate to http://localhost:3000 to use the Assistant UI.

Competitor Comparisons

31,565

🤖 Assemble, configure, and deploy autonomous AI Agents in your browser.

Pros of AgentGPT

  • More comprehensive AI agent system with task planning and execution
  • Supports multiple AI models and providers
  • Active development with frequent updates and contributions

Cons of AgentGPT

  • More complex setup and configuration
  • Potentially higher resource requirements due to advanced features
  • Steeper learning curve for new users

Code Comparison

assistant-ui:

const response = await fetch('/api/chat', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ messages }),
});

AgentGPT:

const response = await axios.post(
  '/api/agent/tasks',
  { goal: taskDescription },
  { headers: { 'Content-Type': 'application/json' } }
);

Summary

AgentGPT offers a more advanced AI agent system with support for multiple models and providers, making it suitable for complex tasks and workflows. However, it may require more setup and resources compared to assistant-ui. The code comparison shows that AgentGPT uses a more structured approach to task handling, while assistant-ui focuses on simpler chat-based interactions. Choose AgentGPT for more sophisticated AI applications, and assistant-ui for straightforward chat interfaces.

169,151

AutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.

Pros of AutoGPT

  • More advanced AI capabilities, including autonomous task completion and goal-oriented behavior
  • Broader range of applications, from web browsing to code generation
  • Larger and more active community, with frequent updates and contributions

Cons of AutoGPT

  • More complex setup and configuration process
  • Higher resource requirements, potentially limiting accessibility for some users
  • Steeper learning curve for new users

Code Comparison

AutoGPT (Python):

def get_command(response: str):
    try:
        response_json = fix_and_parse_json(response)
        return response_json["command"]
    except json.decoder.JSONDecodeError:
        return "Error: Invalid JSON"

Assistant UI (JavaScript):

const getCommand = (response) => {
  try {
    const responseJson = JSON.parse(response);
    return responseJson.command;
  } catch (error) {
    return "Error: Invalid JSON";
  }
};

Both projects aim to provide interfaces for AI assistants, but AutoGPT offers more advanced features and autonomy at the cost of increased complexity. Assistant UI focuses on a simpler, more user-friendly approach, making it potentially more accessible for beginners or those with limited resources.

Pros of TaskMatrix

  • More comprehensive task management system with multi-agent collaboration
  • Integrates visual and language models for enhanced capabilities
  • Supports a wider range of tasks, including image generation and manipulation

Cons of TaskMatrix

  • More complex setup and configuration required
  • Potentially higher resource requirements due to multiple AI models
  • Less focus on user interface and ease of use for non-technical users

Code Comparison

TaskMatrix:

def execute_task(self, task):
    subtasks = self.task_planner.decompose_task(task)
    for subtask in subtasks:
        agent = self.agent_selector.select_agent(subtask)
        result = agent.execute(subtask)
        self.result_integrator.integrate(result)

Assistant UI:

async function executeTask(task) {
  const response = await fetch('/api/chat', {
    method: 'POST',
    body: JSON.stringify({ messages: [{ role: 'user', content: task }] }),
  });
  return response.json();
}

Summary

TaskMatrix offers a more advanced and versatile system for handling complex tasks using multiple AI agents and models. It excels in scenarios requiring diverse capabilities and collaboration between different AI components. However, this comes at the cost of increased complexity and potentially higher resource requirements.

Assistant UI, on the other hand, provides a simpler and more user-friendly approach, focusing on a straightforward chat-based interface for interacting with an AI assistant. It's likely easier to set up and use for basic tasks but may lack the advanced features and flexibility offered by TaskMatrix.

32,416

Drag & drop UI to build your customized LLM flow

Pros of Flowise

  • More comprehensive UI for building and managing AI workflows
  • Supports a wider range of AI models and integrations
  • Active development with frequent updates and new features

Cons of Flowise

  • Steeper learning curve due to more complex features
  • Requires more system resources to run effectively
  • Less focused on simple chat-based interactions

Code Comparison

Flowise (Node.js backend):

const { ChatOpenAI } = require("langchain/chat_models/openai");
const { ConversationChain } = require("langchain/chains");

const chatModel = new ChatOpenAI({ temperature: 0 });
const chain = new ConversationChain({ llm: chatModel });

Assistant UI (React frontend):

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();
  // ... rendering logic
}

The code snippets highlight the different approaches: Flowise focuses on backend AI workflow construction, while Assistant UI emphasizes frontend chat implementation. Flowise offers more flexibility in AI model selection and chain creation, whereas Assistant UI provides a simpler, React-based chat interface.

93,526

🦜🔗 Build context-aware reasoning applications

Pros of langchain

  • More comprehensive framework for building AI applications
  • Larger community and ecosystem with extensive documentation
  • Supports multiple programming languages (Python, JavaScript, etc.)

Cons of langchain

  • Steeper learning curve due to its extensive features
  • May be overkill for simple chatbot or assistant projects
  • Requires more setup and configuration

Code Comparison

assistant-ui:

import { OpenAIChat } from 'openai-streams';

export const runtime = 'edge';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const stream = await OpenAIChat(messages);
  return new Response(stream);
}

langchain:

from langchain.llms import OpenAI
from langchain.prompts import PromptTemplate
from langchain.chains import LLMChain

llm = OpenAI(temperature=0.9)
prompt = PromptTemplate(input_variables=["product"], template="What is a good name for a company that makes {product}?")
chain = LLMChain(llm=llm, prompt=prompt)

print(chain.run("colorful socks"))

Summary

assistant-ui is a lightweight, easy-to-use solution for building AI assistants, while langchain offers a more comprehensive framework for complex AI applications. assistant-ui is ideal for quick prototyping and simple chatbots, whereas langchain provides more flexibility and features for advanced use cases across multiple programming languages.

Examples and guides for using the OpenAI API

Pros of openai-cookbook

  • Comprehensive collection of examples and best practices for using OpenAI's APIs
  • Regularly updated with new features and improvements from OpenAI
  • Covers a wide range of use cases and applications

Cons of openai-cookbook

  • Focuses primarily on API usage rather than providing a complete UI solution
  • May require more setup and integration work for developers to create a functional application

Code Comparison

assistant-ui:

const conversation = useConversation();
const { messages, input, setInput, handleSubmit, isLoading } = conversation;

openai-cookbook:

response = openai.ChatCompletion.create(
    model="gpt-3.5-turbo",
    messages=[{"role": "user", "content": "Hello!"}]
)

Summary

assistant-ui provides a ready-to-use UI for building AI assistants, while openai-cookbook offers a broader range of examples and best practices for working with OpenAI's APIs. assistant-ui is more focused on creating a complete application, whereas openai-cookbook serves as a comprehensive resource for developers looking to integrate OpenAI's capabilities into their projects. The choice between the two depends on whether you need a pre-built UI solution or prefer more flexibility in implementing OpenAI's APIs in your own application.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

assistant-ui Header

Product · Documentation · Examples · Discord Community · Contact Sales

assistant-ui is a set of React components for AI chat, with integrations Langchain, Vercel AI SDK, TailwindCSS, shadcn-ui, react-markdown, react-syntax-highlighter, React Hook Form and more!

Wide model provider support (OpenAI, Anthropic, Mistral, Perplexity, AWS Bedrock, Azure, Google Gemini, Hugging Face, Fireworks, Cohere, Replicate, Ollama) out of the box and the ability to integrate custom APIs.

Quick Start

assistant-ui starter template

Step 1: Create a new project with assistant-ui pre-configured:

npx create-assistant-ui@latest my-app
cd my-app

Step 2: Update the .env file with your OpenAI API key.

Step 3: Run the app:

npm run dev