General Introduction
Srcbook is a TypeScript-centered application development platform designed to rapidly create and iterate web applications with AI assistants. It supports native operation, provides an interactive notebook interface, and allows users to write and execute back-end code.Srcbook is open source, runs on a local machine, and requires users to provide their own API keys to utilize AI features.
Among the AI programming tools focused on building the front-end world, Srcbook vs. v0.dev ,Bolt ,Blackbox It is more advantageous when building front-end projects with complex structures and continuous multiple rounds of dialog iterations.
The Srcbook demo address is not functionally equivalent to the open source version, which includes more complete application building functionality and note-taking capabilities.Srcbook officially recommends the claude-3-5-sonnet-latest model. You can use the freely available Grok model Alternative.
Function List
- application builder: AI application builder with TypeScript support to create, edit and run web applications.
- notebooks: Create, run and share TypeScript notebooks with support for exporting to a valid Markdown format (.src.md).
- AI function: Generate sample code, modify code, fix problems, support hot reload Web preview.
- local implementation: Local execution via web interface with Node.js support.
- plot: Rich annotation and charting with Mermaid.
Using Help
Installation process
- Environmental requirements: Ensure that Node.js version 18+ is installed, it is recommended to use nvm to manage the local Node version.
- One-Click Srcbook Installation::
- Use npx to run the latest version:
bash
npx srcbook@latest start
- Or global installation:
bash
npm install -g srcbook
srcbook start
- Use npx to run the latest version:
Guidelines for use
- Launch Srcbook: Run in a terminal
srcbook start
command to start the Srcbook server. - Create a new project::
- Open your browser to access
http://localhost:3000
, enter Srcbook's web interface. - Use the AI Assistant to generate initial code templates, or write TypeScript code manually.
- Open your browser to access
- Editing and previewing::
- Edit the code in the web interface and preview the modification effect in real time.
- Use the hot reload feature to eliminate the need to manually refresh the page.
- Using the Interactive Notebook::
- Create a new TypeScript notebook to write and execute code snippets.
- Export notebooks to Markdown format for easy sharing and version control.
- Charts and notes::
- Enhance code readability by drawing diagrams and comments in notebooks using Mermaid syntax.
- Managing projects::
- Use local folders to manage your projects and keep your code and data safe.
- Regular backups and version control to avoid data loss.
Featured Functions Operation Procedure
- AI generated code::
- Enter the requirement description in the editor and the AI assistant will generate the appropriate code template.
- Modify and refine the code as prompted, and the AI assistant will provide real-time suggestions and bug fixes.
- Real-time preview::
- Each time you save a code change, the live preview window will automatically update to show the latest effect.
- Use the hot reload feature to improve development efficiency by eliminating the need to manually refresh the page.
- Interactive Notebook::
- Write the TypeScript code segment in the notebook interface and click the Run button to execute the code.
- Use Markdown syntax to record notes and annotations, export to Markdown files for easy sharing and collaboration.
Uninstallation process
- Removal Packages: On the command line, type
npm uninstall -g srcbook
or use the uninstall command of the corresponding package manager. - Clean up your local directory: Delete the local configuration directory
~/.srcbook
The
Disable analytics and tracking
In order to improve Srcbook, we collect some behavioral analytics data, but do not collect any personally identifiable information (PII). If you wish to disable tracking, you can set up the environment inSRCBOOK_DISABLE_ANALYTICS=true
The