35 | {messages.map((message: Message, index: number) => {
36 | return (
37 | (
38 |
99 | )
100 | }
101 |
--------------------------------------------------------------------------------
/components/code-theme.css:
--------------------------------------------------------------------------------
1 | /* Prism.js GitHub Dark Theme */
2 |
3 | code[class*='language-'],
4 | pre[class*='language-'] {
5 | font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono',
6 | 'Droid Sans Mono', 'Source Code Pro', monospace;
7 | text-align: left;
8 | white-space: pre;
9 | word-spacing: normal;
10 | word-break: normal;
11 | word-wrap: normal;
12 | line-height: 1.5;
13 | tab-size: 4;
14 | hyphens: none;
15 | }
16 |
17 | code[class*='language-'],
18 | pre[class*='language-'] {
19 | color: #24292e;
20 | }
21 |
22 | .token.comment,
23 | .token.prolog,
24 | .token.doctype,
25 | .token.cdata {
26 | color: #6a737d;
27 | }
28 |
29 | .token.punctuation {
30 | color: #24292e;
31 | }
32 |
33 | .token.namespace {
34 | opacity: 0.7;
35 | }
36 |
37 | .token.property,
38 | .token.tag,
39 | .token.boolean,
40 | .token.number,
41 | .token.constant,
42 | .token.symbol {
43 | color: #005cc5;
44 | }
45 |
46 | .token.selector,
47 | .token.attr-name,
48 | .token.string,
49 | .token.char,
50 | .token.builtin {
51 | color: #032f62;
52 | }
53 |
54 | .token.operator,
55 | .token.entity,
56 | .token.url,
57 | .language-css .token.string,
58 | .style .token.string {
59 | color: #d73a49;
60 | background: transparent;
61 | }
62 |
63 | .token.atrule,
64 | .token.attr-value,
65 | .token.keyword {
66 | color: #d73a49;
67 | }
68 |
69 | .token.function,
70 | .token.class-name {
71 | color: #6f42c1;
72 | }
73 |
74 | .token.regex,
75 | .token.important,
76 | .token.variable {
77 | color: #e36209;
78 | }
79 |
80 | .token.important,
81 | .token.bold {
82 | font-weight: bold;
83 | }
84 |
85 | .token.italic {
86 | font-style: italic;
87 | }
88 |
89 | .token.entity {
90 | cursor: help;
91 | }
92 |
93 | /* Dark */
94 | .dark code[class*='language-'],
95 | .dark pre[class*='language-'] {
96 | color: #e1e4e8;
97 | }
98 |
99 | .dark .token.comment,
100 | .dark .token.prolog,
101 | .dark .token.doctype,
102 | .dark .token.cdata {
103 | color: #6a737d; /* comment */
104 | }
105 |
106 | .dark .token.punctuation {
107 | color: #e1e4e8; /* editor.foreground */
108 | }
109 |
110 | .dark .token.namespace {
111 | opacity: 0.7;
112 | }
113 |
114 | .dark .token.property,
115 | .dark .token.tag,
116 | .dark .token.boolean,
117 | .dark .token.number,
118 | .dark .token.constant,
119 | .dark .token.symbol,
120 | .dark .token.deleted {
121 | color: #79b8ff; /* constant, entity.name.constant, variable.other.constant */
122 | }
123 |
124 | .dark .token.selector,
125 | .dark .token.attr-name,
126 | .dark .token.string,
127 | .dark .token.char,
128 | .dark .token.builtin,
129 | .dark .token.inserted {
130 | color: #9ecbff; /* string */
131 | }
132 |
133 | .dark .token.operator,
134 | .dark .token.entity,
135 | .dark .token.url,
136 | .dark .language-css .token.string,
137 | .dark .style .token.string {
138 | color: #e1e4e8; /* editor.foreground */
139 | }
140 |
141 | .dark .token.atrule,
142 | .dark .token.attr-value,
143 | .dark .token.keyword {
144 | color: #f97583; /* keyword */
145 | }
146 |
147 | .dark .token.function,
148 | .dark .token.class-name {
149 | color: #b392f0; /* entity, entity.name */
150 | }
151 |
152 | .dark .token.regex,
153 | .dark .token.important,
154 | .dark .token.variable {
155 | color: #ffab70; /* variable */
156 | }
157 |
158 | .dark .token.important,
159 | .dark .token.bold {
160 | font-weight: bold;
161 | }
162 |
163 | .dark .token.italic {
164 | font-style: italic;
165 | }
166 |
167 | .dark .token.entity {
168 | cursor: help;
169 | }
170 |
--------------------------------------------------------------------------------
/components/code-view.tsx:
--------------------------------------------------------------------------------
1 | // import "prismjs/plugins/line-numbers/prism-line-numbers.js";
2 | // import "prismjs/plugins/line-numbers/prism-line-numbers.css";
3 | import './code-theme.css'
4 | import Prism from 'prismjs'
5 | import 'prismjs/components/prism-javascript'
6 | import 'prismjs/components/prism-jsx'
7 | import 'prismjs/components/prism-python'
8 | import 'prismjs/components/prism-tsx'
9 | import 'prismjs/components/prism-typescript'
10 | import { useEffect } from 'react'
11 |
12 | export function CodeView({ code, lang }: { code: string; lang: string }) {
13 | useEffect(() => {
14 | Prism.highlightAll()
15 | }, [code])
16 |
17 | return (
18 |
43 | {message.content.map((content, id) => {
44 | if (content.type === 'image') {
45 | return (
46 | 
52 | )
53 | }
54 | if(message.role == 'user'){
55 | return content.text
56 | }
57 | if (content.type === 'text') {
58 | return (
59 | {content.text}
60 | )
61 | }
62 | })}
63 |
64 | {/* 生成代码区域 */}
65 | {message.object && (
66 |
89 | )
90 | )
91 | })}
92 | {isLoading && (
93 |
68 | setCurrentPreview({
69 | fragment: message.object,
70 | result: message.result,
71 | })
72 | }
73 | className="py-2 pl-2 w-full md:w-max flex items-center border rounded-xl select-none hover:bg-white dark:hover:bg-white/5 hover:cursor-pointer"
74 | >
75 |
87 | )}
88 |
76 |
78 |
79 |
80 | {message.object.title}
81 |
82 |
83 | Click to see fragment
84 |
85 |
86 |
94 |
97 | )}
98 |
27 | {code}
28 |
29 | )
30 | }
31 |
--------------------------------------------------------------------------------
/components/deploy-dialog.tsx:
--------------------------------------------------------------------------------
1 | import Logo from './logo'
2 | import { CopyButton } from './ui/copy-button'
3 | import {
4 | Select,
5 | SelectContent,
6 | SelectGroup,
7 | SelectItem,
8 | SelectLabel,
9 | SelectTrigger,
10 | SelectValue,
11 | } from './ui/select'
12 | import { publish } from '@/app/actions/publish'
13 | import { Button } from '@/components/ui/button'
14 | import {
15 | DropdownMenu,
16 | DropdownMenuContent,
17 | DropdownMenuTrigger,
18 | } from '@/components/ui/dropdown-menu'
19 | import { Input } from '@/components/ui/input'
20 | import { Duration } from '@/lib/duration'
21 | import { usePostHog } from 'posthog-js/react'
22 | import { useEffect, useState } from 'react'
23 |
24 | export function DeployDialog({
25 | url,
26 | sbxId,
27 | apiKey,
28 | }: {
29 | url: string
30 | sbxId: string
31 | apiKey: string | undefined
32 | }) {
33 | const posthog = usePostHog()
34 |
35 | const [publishedURL, setPublishedURL] = useStateDeploy to E2B
66 |
67 | Deploying the fragment will make it publicly accessible to others via
68 | link.
69 |
70 |
71 | The fragment will be available up until the expiration date you choose
72 | and you'll be billed based on our{' '}
73 |
78 | Compute pricing
79 |
80 | .
81 |
82 |
83 | All new accounts receive $100 worth of compute credits. Upgrade to{' '}
84 |
89 | Pro tier
90 | {' '}
91 | for longer expiration.
92 |
93 |
124 |
38 |
91 | )
92 | }
93 |
--------------------------------------------------------------------------------
/components/fragment-interpreter.tsx:
--------------------------------------------------------------------------------
1 | import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
2 | import { ExecutionResultInterpreter } from '@/lib/types'
3 | import { Terminal } from 'lucide-react'
4 | import Image from 'next/image'
5 |
6 | function LogsOutput({
7 | stdout,
8 | stderr,
9 | }: {
10 | stdout: string[]
11 | stderr: string[]
12 | }) {
13 | if (stdout.length === 0 && stderr.length === 0) return null
14 |
15 | return (
16 |
39 |
84 |
40 | {files.map((file) => (
41 |
53 | setCurrentFile(file.name)}
47 | >
48 |
51 | ))}
52 |
54 |
55 |
56 |
57 |
62 | Copy
63 |
64 |
65 |
66 |
67 |
68 |
78 |
79 | Download
80 |
81 |
82 |
83 |
85 |
90 |
17 | {stdout &&
18 | stdout.length > 0 &&
19 | stdout.map((out: string, index: number) => (
20 |
32 | )
33 | }
34 |
35 | export function FragmentInterpreter({
36 | result,
37 | }: {
38 | result: ExecutionResultInterpreter
39 | }) {
40 | const { cellResults, stdout, stderr, runtimeError } = result
41 |
42 | // The AI-generated code experienced runtime error
43 | if (runtimeError) {
44 | const { name, value, traceback } = runtimeError
45 | return (
46 |
21 | {out}
22 |
23 | ))}
24 | {stderr &&
25 | stderr.length > 0 &&
26 | stderr.map((err: string, index: number) => (
27 |
28 | {err}
29 |
30 | ))}
31 |
47 |
48 |
50 | {name}: {value}
51 |
52 |
53 | {traceback}
54 |
55 |
56 |
57 | )
58 | }
59 |
60 | // Cell results can contain text, pdfs, images, and code (html, latex, json)
61 | // TODO: Show all results
62 | // TODO: Check other formats than `png`
63 | if (cellResults.length > 0) {
64 | const imgInBase64 = cellResults[0].png
65 | return (
66 |
67 |
77 | )
78 | }
79 |
80 | // No cell results, but there is stdout or stderr
81 | if (stdout.length > 0 || stderr.length > 0) {
82 | return
68 |
75 |
23 |
30 |
64 | )
65 | }
66 |
--------------------------------------------------------------------------------
/components/logo.tsx:
--------------------------------------------------------------------------------
1 | export type LogoStyle = 'e2b' | 'fragments'
2 |
3 | export default function Logo({
4 | style = 'e2b',
5 | ...props
6 | }: { style?: LogoStyle } & React.SVGProps
31 |
63 |
32 |
33 |
34 |
35 |
42 |
43 | Refresh
44 |
45 |
46 |
47 | {result.url}
48 |
49 |
50 |
51 |
52 |
58 | Copy URL
59 |
60 |
61 |
62 |
45 |
48 | onSelectedTabChange(value as 'code' | 'fragment')
49 | }
50 | className="h-full flex flex-col items-start justify-start"
51 | >
52 |
129 |
130 | )
131 | }
132 |
--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { cva, type VariantProps } from "class-variance-authority"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const alertVariants = cva(
7 | "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
8 | {
9 | variants: {
10 | variant: {
11 | default: "bg-background text-foreground",
12 | destructive:
13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
14 | },
15 | },
16 | defaultVariants: {
17 | variant: "default",
18 | },
19 | }
20 | )
21 |
22 | const Alert = React.forwardRef<
23 | HTMLDivElement,
24 | React.HTMLAttributes
53 |
54 |
55 |
56 |
64 |
65 | Close sidebar
66 |
67 |
68 |
109 | {fragment && (
110 |
69 |
70 |
74 | {isChatLoading && (
75 |
82 |
87 | Preview
88 | {isPreviewLoading && (
89 |
95 |
96 |
97 | {result && (
98 |
99 | {isLinkAvailable && (
100 |
107 | )}
108 |
111 |
112 | {fragment.code && fragment.file_path && (
113 |
123 |
124 | {result &&
126 |
127 | )}
128 |
22 | {title && {title} }
23 | {description && (
24 | {description}
25 | )}
26 |
27 | {action}
28 |
6 |
7 |
12 |
21 |
22 |
23 |
29 |
30 | {% endblock %}
--------------------------------------------------------------------------------
/docs/docs/zh/contribute.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Contribute to Efflux
3 | description: # for seo optimization
4 | keywords: # for seo optimization
5 | contributors:
6 | - Jun Ma
7 | ---
8 |
9 | We welcome contributions from developers and users in the open source community in any ways to make Efflux better!
10 |
11 | ## Commit Code/Doc Changes
12 |
13 | 1. Fork the repository.
14 | 2. Create a new branch (`git checkout -b feature-branch`).
15 | 3. Make your changes.
16 | 4. Commit your changes (`git commit -am 'Add new feature'`).
17 | 5. Push to your branch (`git push origin feature-branch`).
18 | 6. Open a pull request.
19 |
20 | !!! note
21 | Make sure you follow the coding standards and guidelines defined in the project.
22 |
23 | ## Report Issues
24 |
25 | If you encounter any issues or bugs, feel free to open an issue in the respective repository and include as much detail as you can.
26 |
27 | Be sure to include:
28 |
29 | - A description of the issue.
30 | - Steps to reproduce.
31 | - Logs or screenshots that can help in debugging.
--------------------------------------------------------------------------------
/docs/docs/zh/generate-code.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Generate Code
3 | description: # for seo optimization
4 | keywords: # for seo optimization
5 | contributors:
6 | - Jun Ma
7 | ---
8 |
9 | Efflux provides a chat-based interface where you can input text prompts to get responses with generative code snippets. For UI components, Efflux can render the generated code and provide an interactive environment for you to try it out. What's more, you can upload image files of UI components to build similar pages with one click.
10 |
11 | 
12 |
13 | ## How it Works
14 |
15 | 1. **Input Prompt**: Type text descriptions or upload images to let Efflux understand the required interface you want to build.
16 | 2. **Generate Code**: Efflux generates code using open-source tools, like React, Tailwind CSS, and Shadcn UI, based on your prompt.
17 | 3. **Preview and Edit**: Preview the code and make real-time edits in Efflux to fit your needs.
18 | 4. **Integrate Code**: Copy and paste the desired code into your application.
19 |
20 | ## Example of Text-to-UI
21 |
22 | The following is an example of generating a simple login page.
23 |
24 | 
25 |
26 | On the **Preview** tab, you can check out the rendered code for your desired UI component.
27 |
28 | 
29 |
30 | ## Example of Image-to-UI
31 |
32 | The following is an example of generating a similar user interface based on the uploaded image.
33 |
34 | 
35 |
36 | On the **Preview** tab, you can check out the rendered code for your desired UI component.
37 |
38 | 
39 |
40 | It can be a good starting point for you to iterate the GUI.
--------------------------------------------------------------------------------
/docs/docs/zh/get-started.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Set up Efflux
3 | description: # for seo optimization
4 | keywords: # for seo optimization
5 | contributors:
6 | - Jun Ma
7 | ---
8 |
9 | ## Prerequisites
10 |
11 | Make sure the following dependencies have been installed:
12 |
13 | - Python 3.12 or higher versions
14 |
15 | - Node.js 18 or higher versions
16 |
17 | - [Git](https://git-scm.com/downloads)
18 |
19 | ## Set up Backend Service
20 |
21 | 1. Clone the [efflux-backend repo](https://github.com/isoftstone-data-intelligence-ai/efflux-backend).
22 |
23 | ```sh
24 | git clone git@github.com:isoftstone-data-intelligence-ai/efflux-backend.git
25 | ```
26 |
27 | 2. Install `uv`.
28 |
29 | ```sh
30 | cd efflux-backend
31 | pip install uv
32 | ```
33 |
34 | 3. Reload dependencies.
35 |
36 | ```sh
37 | uv sync --reinstall
38 | ```
39 |
40 | 4. Activate your virtual environment.
41 |
42 | ```sh
43 | # Activate virtual environment
44 | source .venv/bin/activate # MacOS/Linux
45 |
46 | # Deactivate when needed
47 | deactivate
48 | ```
49 |
50 | 5. Configure environment variables.
51 |
52 | ```sh
53 | # Copy environment variable template
54 | cp .env.sample .env
55 |
56 | # Edit .env file, configure:
57 | # 1. Database connection info (DATABASE_NAME, DATABASE_USERNAME, DATABASE_PASSWORD)
58 | # 2. At least one LLM configuration (e.g., Azure OpenAI, Qwen, Doubao, or Moonshot)
59 | ```
60 |
61 | 6. Select your LLM.
62 |
63 | ```sh
64 | # Edit core/common/container.py file
65 | # Find the llm registration section, replace with any of the following models (Qwen by default):
66 | # - QwenLlm: Qwen
67 | # - AzureLlm: Azure OpenAI
68 | # - DoubaoLlm: Doubao
69 | # - MoonshotLlm: Moonshot
70 |
71 | # Example: Using Azure OpenAI
72 | from core.llm.azure_open_ai import AzureLlm
73 | # ...
74 | llm = providers.Singleton(AzureLlm)
75 | ```
76 |
77 | 7. Start PostgreSQL database.
78 |
79 | ```sh
80 | # Method 1: If PostgreSQL is installed locally
81 | # Simply start your local PostgreSQL service
82 |
83 | # Method 2: Using Docker (example)
84 | docker run -d --name local-postgres \
85 | -e POSTGRES_DB=your_database_name \
86 | -e POSTGRES_USER=your_username \
87 | -e POSTGRES_PASSWORD=your_password \
88 | -p 5432:5432 \
89 | postgres
90 |
91 | # Note: Ensure database connection info matches the configuration in your .env file
92 | ```
93 |
94 | 8. Initialize the database.
95 |
96 | ```sh
97 | # Create a new version and generate a migration file in alembic/versions
98 | alembic revision --autogenerate -m "initial migration"
99 |
100 | # Preview SQL to be executed:
101 | alembic upgrade head --sql
102 |
103 | # If preview looks good, execute migration
104 | alembic upgrade head
105 | ```
106 |
107 | 9. Start the service.
108 |
109 | ```sh
110 | python -m uvicorn main:app --host 0.0.0.0 --port 8000
111 | ```
112 |
113 | ## Set up Frontend Service
114 |
115 | 1. Clone the [efflux-frontend repo](https://github.com/isoftstone-data-intelligence-ai/efflux-frontend).
116 |
117 | ```sh
118 | git clone https://github.com/isoftstone-data-intelligence-ai/efflux-frontend.git
119 | ```
120 |
121 | 2. Install the dependencies.
122 |
123 | ```sh
124 | cd efflux-frontend
125 | npm i
126 | ```
127 |
128 | 3. Create a `.env.local` file and set the environment variables as follows:
129 |
130 | ```sh
131 | # Get your API key here - https://e2b.dev/
132 | E2B_API_KEY="your-e2b-api-key"
133 |
134 | # Get your Azure API key here https://learn.microsoft.com/en-us/azure/ai-services/openai/how-to/create-resource?tabs=portal
135 | AZURE_API_KEY="your-azure-api-key"
136 |
137 | # API URL
138 | NEXT_PUBLIC_API_URL="your-backend-service-url"
139 |
140 | # OpenAI API Key
141 | OPENAI_API_KEY=
142 |
143 | # Other providers
144 | ANTHROPIC_API_KEY=
145 | GROQ_API_KEY=
146 | FIREWORKS_API_KEY=
147 | TOGETHER_API_KEY=
148 | GOOGLE_AI_API_KEY=
149 | GOOGLE_VERTEX_CREDENTIALS=
150 | MISTRAL_API_KEY=
151 | XAI_API_KEY=
152 |
153 | ### Optional env vars
154 |
155 | # Domain of the site
156 | NEXT_PUBLIC_SITE_URL=
157 |
158 | # Disabling API key and base URL input in the chat
159 | NEXT_PUBLIC_NO_API_KEY_INPUT=
160 | NEXT_PUBLIC_NO_BASE_URL_INPUT=
161 |
162 | # Rate limit
163 | RATE_LIMIT_MAX_REQUESTS=
164 | RATE_LIMIT_WINDOW=
165 |
166 | # Vercel/Upstash KV (short URLs, rate limiting)
167 | KV_REST_API_URL=
168 | KV_REST_API_TOKEN=
169 |
170 | # Supabase (auth)
171 | SUPABASE_URL=
172 | SUPABASE_ANON_KEY=
173 |
174 | # PostHog (analytics)
175 | NEXT_PUBLIC_POSTHOG_KEY=
176 | NEXT_PUBLIC_POSTHOG_HOST=
177 | ```
178 |
179 | 4. Start the development server.
180 |
181 | ```sh
182 | npm run dev
183 | ```
184 |
185 | Then you can access your local efflux at http://localhost:3000. The landing page looks like the following:
186 |
187 | 
188 |
189 | ## What's Next?
190 |
191 | * [Generate UI Code](generate-code.md)
192 |
193 | * [Work with MCP](work-with-mcp.md)
--------------------------------------------------------------------------------
/docs/docs/zh/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Overview
3 | description: # for seo optimization
4 | keywords: # for seo optimization
5 | contributors:
6 | - Jun Ma
7 | ---
8 |
9 | ## Efflux是什么?
10 |
11 | Efflux 是一款新一代 AI 交互平台 —— 一个强大、轻量且高度灵活的框架，可无缝集成最先进的大语言模型（LLMs）、生成式前端技术以及 MCP（模型上下文协议）服务器。它重新定义了 AI 驱动应用的部署和扩展方式，可以通过接入海量社区工具，构建普惠AI生态。
12 |
13 | Efflux 可以是：
14 |
15 | * **基于 LLM 的聊天机器人**，能够与用户进行自然语言对话。
16 |
17 | * **文本到组件（Text-to-Artifact）生成工具**，帮助开发者轻松创建代码片段 —— 只需描述你的想法即可。Efflux 能实时渲染生成的 UI 代码，让你能够立即测试和迭代。
18 |
19 | *探索更多 → [生成UI代码](generate-code.md)*
20 |
21 | * **开箱即用的 MCP（模型上下文协议）主机**，通过更广泛的数据访问和集成自定义工具释放 LLM 潜力。
22 |
23 | *探索更多 → [使用MCP](work-with-mcp.md)*
24 |
25 | ## 🌟Why Efflux?
26 |
27 | Efflux empowers developers and enthusiasts to:
28 |
29 | - **Build Conversational AI Agents**
30 |
31 | Create human-like chatbots with contextual awareness and conversation history management.
32 |
33 | - **Accelerate Development Workflows**
34 |
35 | Effortlessly generate code snippets - from UI components to APIs and full-stack modules.
36 |
37 | - **Unlock Advanced Capabilities**
38 |
39 | Leverage MCP servers to seamlessly integrate databases, various tools, and more while maintaining data governance.
40 |
41 | ## ✨Core Features
42 |
43 | - Intuitive chat-based interface with history management
44 | - Multi-LLM support (Claude, DeepSeek, and many more)
45 | - Native MCP integration with unlimited possibilities
46 | - Dynamic artifact rendering engine
47 | - Advanced context memory management
48 |
49 | ## 🧩Architecture
50 |
51 | ```
52 | Efflux
53 | ├── Core
54 | │ ├── MCP Manager # MCP management
55 | │ ├── Model Router # Intelligent routing
56 | │ └── Context Manager # Conversation context management
57 | ├── Service Layer
58 | │ ├── LLM Manager # Multiple LLM management
59 | │ ├── Model Switching # Model switching
60 | │ ├── Agent Node # Agent node
61 | │ └── Intelligent Reasoning # Intelligent reasoning
62 | ├── Extension
63 | │ └── Plugin System # Pluggable extension
64 | └── Web
65 | ├── Artifacts Engine # Dynamic front-end rendering
66 | ├── Web Interface # Interactive interface
67 | ├── UI Stream Response # Streaming response
68 | └── Sandbox Debugging # Sandbox debugging
69 | ```
70 |
71 | ## 🚀Get Started
72 |
73 | Setting up Efflux is just a few clicks away. For more details, visit [Get Started](get-started.md).
74 |
75 | ## 🤝Contribute to Efflux
76 |
77 | We’re committed to building Efflux as a collaborative, open-source project and ecosystem. Participation is not only welcomed – it's essential!
78 |
79 | Here's how you can get involved:
80 |
81 | * file issues to report bugs
82 | * commit pull requests to improve codes and docs
83 |
84 | For more details, visit [Contribute to Efflux](contribute.md).
--------------------------------------------------------------------------------
/docs/mkdocs.yml:
--------------------------------------------------------------------------------
1 | # website title
2 | site_name: Efflux Docs
3 |
4 | # website URL
5 | site_url: https://jun-ma.github.io/efflux-frontend/
6 | repo_url: https://github.com/isoftstone-data-intelligence-ai/efflux-frontend
7 |
8 | # website style
9 | theme:
10 | name: material
11 | favicon: assets/favicon.ico
12 | logo: assets/logo.svg
13 | features:
14 | - content.code.copy # copy code
15 | - content.code.select # select code language
16 | - content.code.annotate # display code language
17 | - navigation.top # back to top
18 | - content.tabs.link # code tab
19 | - content.tooltips
20 | custom_dir: docs/overrides
21 |
22 | # website navigation and multi-language
23 | plugins:
24 | - search:
25 | lang:
26 | - en
27 | - zh
28 | - i18n:
29 | docs_structure: folder
30 | languages:
31 | - locale: en
32 | name: English
33 | build: true
34 | default: true
35 | folder: en
36 | nav:
37 | - Overview: index.md
38 | - Get Started: get-started.md
39 | - Generate Code: generate-code.md
40 | - Work with MCP: work-with-mcp.md
41 | - Contribute to Efflux: contribute.md
42 | - locale: zh
43 | name: 中文
44 | build: true
45 | folder: zh
46 | nav:
47 | - 概览: index.md
48 | - 快速开始: get-started.md
49 | - 生成UI代码: generate-code.md
50 | - 使用MCP: work-with-mcp.md
51 | - 贡献: contribute.md
52 |
53 | # mkdocs.yml
54 | dev_addr: 'localhost:8080' # port number for `mkdocs serve`
55 |
56 | # markdown formats
57 | markdown_extensions:
58 | - pymdownx.highlight:
59 | use_pygments: true
60 | pygments_lang_class: true
61 | - pymdownx.inlinehilite
62 | - pymdownx.snippets
63 | - pymdownx.extra
64 | - pymdownx.superfences
65 | - pymdownx.tabbed:
66 | alternate_style: true
67 | - admonition
68 | - pymdownx.details
69 | - toc:
70 | baselevel: 3 # maximum level of toc
71 |
72 |
73 | # feedback
74 | extra_javascript:
75 | - docs/javascripts/feedback.js
--------------------------------------------------------------------------------
/lib/api.ts:
--------------------------------------------------------------------------------
1 | import request from '@/lib/request';
2 | var apiUrl = process.env.NEXT_PUBLIC_API_URL;
3 |
4 | //列表
5 | export const getServerList = (data) => {
6 | return request({
7 | url: `/mcp/mcp_server_list/${data.userId}`,
8 | method: 'get',
9 | });
10 | };
11 |
12 | //添加 mcpServer
13 | export const addMcpServer = (data) => {
14 | return request({
15 | url: `/mcp/mcp_server`,
16 | method: 'post',
17 | data: data,
18 | });
19 | };
20 |
21 | //修改 mcpServer
22 | export const updateMcpServer = (data) => {
23 | return request({
24 | url: '/mcp/mcp_server',
25 | method: 'put',
26 | data: data,
27 | });
28 | };
29 |
30 | //删除 mcpServer
31 | export const delMcpServer = (data) => {
32 | return request({
33 | url: `/mcp/mcp_server/${data.id}`,
34 | method: 'delete',
35 | data: data,
36 | });
37 | };
38 |
39 | //查看 mcpServer
40 | export const getMcpServer = (data) => {
41 | return request({
42 | url: `/mcp/mcp_server/${data.id}`,
43 | method: 'get',
44 | });
45 | };
46 |
47 | // 查看会话
48 | export const getChatList = (data) => {
49 | return request({
50 | url: `/chat_window/chat_window_list/${data.userId}`,
51 | method: 'get',
52 | });
53 | };
--------------------------------------------------------------------------------
/lib/auth.ts:
--------------------------------------------------------------------------------
1 | import { supabase } from './supabase'
2 | import { Session } from '@supabase/supabase-js'
3 | import { usePostHog } from 'posthog-js/react'
4 | import { useState, useEffect } from 'react'
5 |
6 | export type AuthViewType =
7 | | 'sign_in'
8 | | 'sign_up'
9 | | 'magic_link'
10 | | 'forgotten_password'
11 | | 'update_password'
12 | | 'verify_otp'
13 |
14 | interface UserTeam {
15 | id: string
16 | name: string
17 | is_default: boolean
18 | tier: string
19 | email: string
20 | team_api_keys: { api_key: string }[]
21 | }
22 |
23 | export async function getUserAPIKey(session: Session) {
24 | // If Supabase is not initialized will use E2B_API_KEY env var
25 | if (!supabase || process.env.E2B_API_KEY) return process.env.E2B_API_KEY
26 |
27 | const { data: userTeams } = await supabase
28 | .from('users_teams')
29 | .select(
30 | 'teams (id, name, is_default, tier, email, team_api_keys (api_key))',
31 | )
32 | .eq('user_id', session?.user.id)
33 |
34 | const teams = userTeams
35 | ?.map((userTeam: any) => userTeam.teams)
36 | .map((team: UserTeam) => {
37 | return {
38 | ...team,
39 | apiKeys: team.team_api_keys.map((apiKey) => apiKey.api_key),
40 | }
41 | })
42 |
43 | const defaultTeam = teams?.find((team) => team.is_default)
44 | return defaultTeam?.apiKeys[0]
45 | }
46 |
47 | export function useAuth(
48 | setAuthDialog: (value: boolean) => void,
49 | setAuthView: (value: AuthViewType) => void,
50 | ) {
51 | const [session, setSession] = useState7 |
Was this page helpful?
8 | 9 | 10 | 11 |