[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73529":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":15,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":38,"readmeContent":39,"aiSummary":40,"trendingCount":16,"starSnapshotCount":16,"syncStatus":41,"lastSyncTime":42,"discoverSource":43},73529,"fragments","e2b-dev\u002Ffragments","e2b-dev","Open-source Next.js template for building apps that are fully generated by AI. By E2B.","https:\u002F\u002Ffragments.e2b.dev",null,"TypeScript",6311,864,45,9,0,3,10,29,78.71,"Apache License 2.0",false,"main",[25,26,27,28,29,30,31,32,33,34,35,36,37],"ai","ai-code-generation","anthropic","claude","claude-ai","code-interpreter","e2b","javascript","llm","nextjs","react","sandbox","typescript","2026-06-12 04:01:09","![E2B Fragments Preview Light](\u002Freadme-assets\u002Ffragments-light.png#gh-light-mode-only)\n![E2B Fragments Preview Dark](\u002Freadme-assets\u002Ffragments-dark.png#gh-dark-mode-only)\n\n# Fragments by E2B\n\nThis is an open-source version of apps like [Anthropic's Claude Artifacts](https:\u002F\u002Fwww.anthropic.com\u002Fnews\u002Fclaude-3-5-sonnet), Vercel [v0](https:\u002F\u002Fv0.dev), or [GPT Engineer](https:\u002F\u002Fgptengineer.app).\n\nPowered by the [E2B SDK](https:\u002F\u002Fgithub.com\u002Fe2b-dev\u002Fcode-interpreter).\n\n[→ Try on fragments.e2b.dev](https:\u002F\u002Ffragments.e2b.dev)\n\n## Features\n\n- Based on Next.js 14 (App Router, Server Actions), shadcn\u002Fui, TailwindCSS, Vercel AI SDK.\n- Uses the [E2B SDK](https:\u002F\u002Fgithub.com\u002Fe2b-dev\u002Fcode-interpreter) by [E2B](https:\u002F\u002Fe2b.dev) to securely execute code generated by AI.\n- Streaming in the UI.\n- Can install and use any package from npm, pip.\n- Supported stacks ([add your own](#adding-custom-personas)):\n  - 🔸 Python interpreter\n  - 🔸 Next.js\n  - 🔸 Vue.js\n  - 🔸 Streamlit\n  - 🔸 Gradio\n- Supported LLM Providers ([add your own](#adding-custom-llm-models)):\n  - 🔸 OpenAI\n  - 🔸 Anthropic\n  - 🔸 Google AI\n  - 🔸 Mistral\n  - 🔸 Groq\n  - 🔸 Fireworks\n  - 🔸 Together AI\n  - 🔸 Ollama\n- Integrates with [Morph](https:\u002F\u002Fmorphllm.com\u002F) Apply model for token efficient, accurate and faster code editing.\n\n**Make sure to give us a star!**\n\n\u003Cimg width=\"165\" alt=\"Screenshot 2024-04-20 at 22 13 32\" src=\"https:\u002F\u002Fgithub.com\u002Fmishushakov\u002Fllm-scraper\u002Fassets\u002F10400064\u002F11e2a79f-a835-48c4-9f85-5c104ca7bb49\">\n\n## Get started\n\n### Prerequisites\n\n- [git](https:\u002F\u002Fgit-scm.com)\n- Recent version of [Node.js](https:\u002F\u002Fnodejs.org) and npm package manager\n- [E2B API Key](https:\u002F\u002Fe2b.dev)\n- LLM Provider API Key\n\n### 1. Clone the repository\n\nIn your terminal:\n\n```\ngit clone https:\u002F\u002Fgithub.com\u002Fe2b-dev\u002Ffragments.git\n```\n\n### 2. Install the dependencies\n\nEnter the repository:\n\n```\ncd fragments\n```\n\nRun the following to install the required dependencies:\n\n```\nnpm i\n```\n\n### 3. Set the environment variables\n\nCreate a `.env.local` file and set the following:\n\n```sh\n# Get your API key here - https:\u002F\u002Fe2b.dev\u002F\nE2B_API_KEY=\"your-e2b-api-key\"\n\n# OpenAI API Key\nOPENAI_API_KEY=\n\n# Other providers\nANTHROPIC_API_KEY=\nGROQ_API_KEY=\nFIREWORKS_API_KEY=\nTOGETHER_API_KEY=\nGOOGLE_AI_API_KEY=\nGOOGLE_VERTEX_CREDENTIALS=\nMISTRAL_API_KEY=\nXAI_API_KEY=\n\n### Optional env vars\n\n# (on by default) Get your MORPH key here - https:\u002F\u002Fmorphllm.com\u002Fdashboard\u002Fapi-keys\nMORPH_API_KEY=\n\n# Domain of the site\nNEXT_PUBLIC_SITE_URL=\n\n# Rate limit\nRATE_LIMIT_MAX_REQUESTS=\nRATE_LIMIT_WINDOW=\n\n# Vercel\u002FUpstash KV (short URLs, rate limiting)\nKV_REST_API_URL=\nKV_REST_API_TOKEN=\n\n# Supabase (auth)\nSUPABASE_URL=\nSUPABASE_ANON_KEY=\n\n# PostHog (analytics)\nNEXT_PUBLIC_POSTHOG_KEY=\nNEXT_PUBLIC_POSTHOG_HOST=\n\n### Disabling functionality (when uncommented)\n\n# Disable API key and base URL input in the chat\n# NEXT_PUBLIC_NO_API_KEY_INPUT=\n# NEXT_PUBLIC_NO_BASE_URL_INPUT=\n\n# Hide local models from the list of available models\n# NEXT_PUBLIC_HIDE_LOCAL_MODELS=\n```\n\n### 4. Start the development server\n\n```\nnpm run dev\n```\n\n### 5. Build the web app\n\n```\nnpm run build\n```\n\n## Customize\n\n### Adding custom personas\n\n1. Make sure [E2B CLI](https:\u002F\u002Fe2b.dev\u002Fdocs\u002Fcli) is installed and you're logged in.\n\n2. Add a new folder under [sandbox-templates\u002F](sandbox-templates\u002F)\n\n3. Initialize a new template using E2B CLI:\n\n    ```\n    e2b template init\n    ```\n\n    This will create a new file called `e2b.Dockerfile`.\n\n4. Adjust the `e2b.Dockerfile`\n\n    Here's an example streamlit template:\n\n    ```Dockerfile\n    # You can use most Debian-based base images\n    FROM python:3.19-slim\n\n    RUN pip3 install --no-cache-dir streamlit pandas numpy matplotlib requests seaborn plotly\n\n    # Copy the code to the container\n    WORKDIR \u002Fhome\u002Fuser\n    COPY . \u002Fhome\u002Fuser\n    ```\n\n5. Specify a custom start command in `e2b.toml`:\n\n    ```toml\n    start_cmd = \"cd \u002Fhome\u002Fuser && streamlit run app.py\"\n    ```\n\n6. Deploy the template with the E2B CLI\n\n    ```\n    e2b template build --name \u003Ctemplate-name>\n    ```\n\n    After the build has finished, you should get the following message:\n\n    ```\n    ✅ Building sandbox template \u003Ctemplate-id> \u003Ctemplate-name> finished.\n    ```\n\n7. Open [lib\u002Ftemplates.json](lib\u002Ftemplates.json) in your code editor.\n\n    Add your new template to the list. Here's an example for Streamlit:\n\n    ```json\n    \"streamlit-developer\": {\n      \"name\": \"Streamlit developer\",\n      \"lib\": [\n        \"streamlit\",\n        \"pandas\",\n        \"numpy\",\n        \"matplotlib\",\n        \"requests\",\n        \"seaborn\",\n        \"plotly\"\n      ],\n      \"file\": \"app.py\",\n      \"instructions\": \"A streamlit app that reloads automatically.\",\n      \"port\": 8501 \u002F\u002F can be null\n    },\n    ```\n\n    Provide a template id (as key), name, list of dependencies, entrypoint and a port (optional). You can also add additional instructions that will be given to the LLM.\n\n4. Optionally, add a new logo under [public\u002Fthirdparty\u002Ftemplates](public\u002Fthirdparty\u002Ftemplates)\n\n### Adding custom LLM models\n\n1. Open [lib\u002Fmodels.json](lib\u002Fmodels.ts) in your code editor.\n\n2. Add a new entry to the models list:\n\n    ```json\n    {\n      \"id\": \"mistral-large\",\n      \"name\": \"Mistral Large\",\n      \"provider\": \"Ollama\",\n      \"providerId\": \"ollama\"\n    }\n    ```\n\n    Where id is the model id, name is the model name (visible in the UI), provider is the provider name and providerId is the provider tag (see [adding providers](#adding-custom-llm-providers) below).\n\n### Adding custom LLM providers\n\n1. Open [lib\u002Fmodels.ts](lib\u002Fmodels.ts) in your code editor.\n\n2. Add a new entry to the `providerConfigs` list:\n\n    Example for fireworks:\n\n    ```ts\n    fireworks: () => createOpenAI({ apiKey: apiKey || process.env.FIREWORKS_API_KEY, baseURL: baseURL || 'https:\u002F\u002Fapi.fireworks.ai\u002Finference\u002Fv1' })(modelNameString),\n    ```\n\n3. Optionally, adjust the default structured output mode in the `getDefaultMode` function:\n\n    ```ts\n    if (providerId === 'fireworks') {\n      return 'json'\n    }\n    ```\n\n4. Optionally, add a new logo under [public\u002Fthirdparty\u002Flogos](public\u002Fthirdparty\u002Flogos)\n\n## Contributing\n\nAs an open-source project, we welcome contributions from the community. If you are experiencing any bugs or want to add some improvements, please feel free to open an issue or pull request.\n","Fragments 是一个基于 Next.js 的开源模板，用于构建完全由 AI 生成的应用程序。该项目利用了 E2B SDK 来安全地执行 AI 生成的代码，并支持多种编程语言和框架（如 Python、Next.js、Vue.js 等）以及多个主流的 LLM 提供商（如 OpenAI、Anthropic、Google AI 等）。其核心功能包括通过 App Router 和 Server Actions 实现的现代 Web 应用架构、UI 组件库 shadcn\u002Fui 与 TailwindCSS 的结合使用、以及对 npm 和 pip 包的支持，从而使得开发者能够快速搭建起具备强大 AI 能力的应用。Fragments 适合于需要集成高级 AI 功能到 Web 应用中的场景，比如自动代码生成、智能助手等。",2,"2026-06-11 03:45:59","high_star"]