NarrateAI is an extension for Visual Studio Code that aids in generating Storybook components with the help of AI models.
Features
NarrateAI offers several commands and settings to customize the story generation experience:
Commands
NarrateAI: Create Storybook Component:
Generates a Storybook component based on the selected text in a TypeScript React/TSX file. The React component must be selected prior to use of the command
NarrateAI: Set Server URL:
Sets the URL of the NarrateAI server. This is the endpoint where the extension sends requests to generate components.
NarrateAI: Set API Key:
Configures the API Key required for authenticating with the NarrateAI server.
NarrateAI: Set System Guidance:
Allows setting additional system guidance text that is sent to the AI model to influence the story generation.
NarrateAI: Set OpenAI Model:
Sets the specific OpenAI model to be used for generating stories. For more information on available models, visit OpenAI models documentation.
Settings
Server URL (narrateai.serverUrl):
The URL of the NarrateAI server. Default: http://localhost:3000/generate-storybook
API Key (narrateai.apiKey):
The API Key for accessing the NarrateAI server.
Story Component Example (narrateai.storyComponentExample):
An example of a good story component. This can be used as a reference for the AI model.
System Guidance (narrateai.systemGuidance):
Additional guidance for the story generation model. This text supplements the default system guidance.
OpenAI Model (narrateai.openAiModel):
The specific OpenAI model to be used for story generation. Default: gpt-4
Getting Started
To start using NarrateAI, ensure you have either a local server running that the extension can communicate with or reach out to chase to get the production server url. Reach out to Chase for the NarrateAI API key. Set the server URL and API Key using the provided commands. Optionally, you can also set the OpenAI model and system guidance.
Once configured, open a TypeScript React or TSX file and select a specific portion of text to generate a Storybook component using the "NarrateAI: Create Storybook Component" command.
Usage
Open a TypeScript React or TSX file in VS Code.
Select code for story component generation.
Run the command "NarrateAI: Create Storybook Component" from the command palette or the editor context menu.
If prompted, enter additional model guidance for the component.
The extension will communicate with the configured server and generate a Storybook component based on the input provided.
Modify the created story to fully match your needs
