Lychee Chat

A universal AI Chat component with agent system, model selection, streaming support, and full customization.

Features

• 🤖 Agent System - Create, configure, and manage custom AI agents with tool support
• 🧠 Model Selection - Switch between different AI model providers
• 💬 Streaming Messages - Real-time streaming chat with progress indicators
• 🔧 Tool Calls - Visual tool/agent call execution with expandable details
• 🖼️ Image Support - Paste/upload images directly in chat
• 📝 Markdown Rendering - Full markdown support with code highlighting
• 🎨 Customizable Theme - Dark/light mode, custom colors, avatars, and more
• 🔌 Pluggable Backend - Abstract IChatService interface for any backend
• 📦 npm Package - Easy to integrate into any React project

Installation

npm install lychee-chat
# or
yarn add lychee-chat

Quick Start

1. Implement the Chat Service

Create a service that implements the IChatService interface:

import { IChatService, ChatCompletionParams, ChatStreamHandler } from 'lychee-chat';

class MyChatService implements IChatService {
  chatCompletion(params: ChatCompletionParams): ChatStreamHandler {
    // Connect to your AI backend and return a stream handler
    const handler: ChatStreamHandler = {
      onMessage: (callback) => {
        // Call callback(data) as tokens arrive
        // Call callback('STREAM_DONE') when complete
      },
    };
    return handler;
  }

  async stopChat(streamToken: string) { /* stop streaming */ }
  async getModelPlatList() { /* return available models */ }
  async getAgentsList() { /* return available agents */ }
  async registerAgent(config) { /* register new agent */ }
  async removeAgent(key) { /* remove agent */ }
  async agentToolCallBack(params) { /* tool call result callback */ }
  async saveAgentConfig(config) { /* save agent config */ }
  async sendCorsServer(param) { /* CORS proxy request */ }
  async getMcpServerList() { /* list MCP servers */ }
  async editOrAddMcpServer(param) { /* edit/add MCP server */ }
  async deleteMcpServer(name) { /* delete MCP server */ }
}

2. Use the Component

import { LycheeChat } from 'lychee-chat';

function App() {
  const chatService = new MyChatService();

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <LycheeChat
        chatService={chatService}
        config={{
          welcomeMessage: 'Hello! How can I help you today?',
          placeholder: 'Ask me anything...',
          theme: { mode: 'dark' },
          showUserLogin: false,
          showModelSelect: true,
          showAgentSelect: true,
        }}
      />
    </div>
  );
}

Configuration Options

ChatConfig

| Property | Type | Default | Description | |----------|------|---------|-------------| | welcomeMessage | string \| ((userInfo?) => string) | 'Hi～' | Welcome message shown on first load | | placeholder | string | '请和我交流吧～' | Input placeholder text | | roleConfig | RoleConfig | Built-in avatars | Avatars and names for user/assistant/system | | theme | ChatTheme | Dark mode | Theme colors and mode | | maxImageAttachments | number | 5 | Max images that can be pasted/uploaded | | showUserLogin | boolean | true | Show user login section | | showModelSelect | boolean | true | Show model selection dropdown | | showAgentSelect | boolean | true | Show agent selection feature | | showClearContext | boolean | true | Show clear context button | | enableImageUpload | boolean | true | Enable image paste/upload | | enableBugRef | boolean | true | Enable bug reference feature | | className | string | - | Custom CSS class for container | | style | React.CSSProperties | - | Custom inline styles |

ChatTheme

| Property | Type | Default | Description | |----------|------|---------|-------------| | primaryColor | string | '#8f41e9' | Primary accent color | | userMessageBg | string | '#0652ee' | User message background | | assistantMessageBg | string | '#2a2a2a' | Assistant message background | | codeBlockBg | string | '#202020' | Code block background | | fontFamily | string | System fonts | Custom font family | | borderRadius | number | 2 | Message bubble border radius | | mode | 'dark' \| 'light' | 'dark' | Theme mode |

Creating Custom Agents (Tools)

import { tool, z } from 'lychee-chat';

const searchTool = tool(
  async (params) => {
    const result = await fetch(`/api/search?q=${params.query}`);
    return result.json();
  },
  {
    name: 'web_search',
    description: 'Search the web for information',
    schema: z.object({
      query: z.string().describe('Search query'),
    }),
  }
);

const myAgent = {
  key: 'searchAgent',
  name: 'Search Agent',
  desc: 'An agent that can search the web',
  prompt: 'You are a helpful search assistant...',
  tools: [searchTool],
};

Message Protocol

The component supports a rich message protocol for tool/agent calls:

| Marker | Description | |--------|-------------| | #USE_TOOL#...#USE_TOOL_END# | Tool invocation | | #TOOL_RESULT#...#TOOL_RESULT_END# | Tool result | | #USE_AGENT#...#USE_AGENT_END# | Agent delegation | | #AGENT_RESULT#...#AGENT_RESULT_END# | Agent result | | #END_RESULT# | End of visible result | | #END_RESULT_HIDE# | End of hidden result | | #BACK_ERROR# | Error indicator | | #DEAL_FAIL# | Processing failure |

License

MIT